Have you ever imagine a flower with no colors or a car with some irregular shape ?🤔 How does it look like ? Does it make you feel good ?

I don’t think so that it makes you feel good.🥲It would be very boring to see the world without colors or any kind of styles.

So, in the same way if we see websites without any styles such as font colors, backgrounds, images it would be so boring to use that site 🥱Let me give you an example of a boring website.

Will you ever enjoy a social media application with such boring interface 🥱. Naaaaaaah!!!

So, here is the solution. Use something known as CSS (Cascading stylesheets). After CSS your website will look something like this⬇️

This website looks cool 😎

What is CSS? 🤔

» CSS is nothing but a piece of code which enhances the overall visual aesthetics of you website. It helps you to add some stylings to enhance the look and feel of the website. There are many different types of styles available and CSS also includes animation too😎. Let us now dive deep into the ocean of CSS and see how it works and what are some of its powers 🦸

Meaning of Cascading

In simple terms, Cascading means to override the previous CSS properties with new one. According to GeeksforGeeks Cascading is a process by which the browser determines which style rules to apply when multiple rules target the same element.

The browser can have its own default style called User agent style and the developer with have its own. User agent styles and developer styles are given below.

The cascading process determines which of these styles is applied when they conflict. Here how it works

» Specificity: CSS rules with more specific selectors will take more priority than the others. id selector will have more priority that a class selector so it will override it if both are applied to same element.

» Importance: Properties marked with !important will have more importance/precedence even if they are less specific.

» Source order: When two rules have same specificity then there order matter. The rules written down below will have more priority and override the previous one.

Ways to apply CSS 👇

There are three ways to apply CSS in your HTML file :

Inline CSS - In Inline CSS, we directly define the styles using a style attribute in the HTML element. Example :
```
 <div style="background-color:blue; color:white">
     This is an example of inline CSS.
 </div>
```

Internal CSS - As the name suggests, we use a separate <style> tag in order to define our styles. Example :

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
   </head>

   <style>
     body {
       max-width: 800px;
       margin: 0 auto;
     }

     h1 {
       text-align: center;
       color: rgb(109, 109, 109);
       font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
         sans-serif;
       background-color: lightblue;
       padding: 15px;
       border-radius: 18px;
     }

     p {
       padding: 20px;
       text-align: center;
       border: 1px solid black;
       border-radius: 15px;
       box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
     }

     button {
       padding: 10px 20px;
       background-color: lightcoral;
       border: 1px solid gray;
       border-radius: 10px;
       font-weight: bolder;
       color: white;
       font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
         sans-serif;
       max-width: 200px;
       display: block;
       margin: 50px auto;
     }
   </style>

   <body>
     <h1>Hey there, this is a tutorial on CSS</h1>
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique at id
       error distinctio qui totam sapiente inventore aperiam eaque dolores ipsum
       culpa nulla excepturi obcaecati itaque omnis corrupti neque ea modi, quasi
       quos soluta!
     </p>
     <button>Click here</button>
   </body>
 </html>

External CSS - In External CSS, we have a separate file where we define our styles and import them into our HTML file using <link rel="stylesheet" href="style.css" /> . Example :

 body {
   max-width: 800px;
   margin: 0 auto;
 }

 h1 {
   text-align: center;
   color: rgb(109, 109, 109);
   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
   background-color: lightblue;
   padding: 15px;
   border-radius: 18px;
 }

 p {
   padding: 20px;
   text-align: center;
   border: 1px solid black;
   border-radius: 15px;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
 }

 button {
   padding: 10px 20px;
   background-color: lightcoral;
   border: 1px solid gray;
   border-radius: 10px;
   font-weight: bolder;
   color: white;
   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
   max-width: 200px;
   display: block;
   margin: 50px auto;
 }

Selectors in CSS 🚀

As I have mentioned above about some selectors such as id and class. As the name is itself self explanatory it is just used to select and element from your HTML. Although there is one more way to select an element and that is by directly selecting it through its tag name like (<p>, <h1>, <div> etc.)

Id is unique to every element. Whenever we select an element by using the id of it we use #. Example :

<!DOCTYPE html>
<html lang="en">
  <style>
    #heading {
      color: red;
      background-color: yellow;
    }
  </style>

  <body>
    <h1 id="heading">Hey there, this is a tutorial on CSS</h1>
  </body>
</html>

Many elements can have same class. It is used to group elements so that common properties could be applied to them. Whenever we select an element by using the id of it we use dot(.) . Example :

<!DOCTYPE html>
<html lang="en">
  <style>
    .heading {
      color: red;
      background-color: yellow;
    }
  </style>

  <body>
    <h1 class="heading">Hey there, this is a tutorial on CSS</h1>
  </body>
</html>

Whenever we select an element directly by using its tag name, we do not use any symbols. Example :

<!DOCTYPE html>
<html lang="en">
  <style>
    h1 {
      color: red;
      background-color: yellow;
    }
  </style>

  <body>
    <h1>Hey there, this is a tutorial on CSS</h1>
  </body>
</html>

Note: Inline CSS has the highest priority, so it overrides internal and external styles. Internal CSS comes next, overriding external styles, while external CSS is applied only if no inline or internal styles are set.

In order to learn more about CSS properties, Here are some best links of the cheatsheet down below⬇️

CSS cheatsheet - https://htmlcheatsheet.com/css/
Code with Harry - https://www.codewithharry.com/blogpost/css-cheatsheet/

Conclusion 🫡

CSS offers a multitude of advantages that make it an indispensable tool for web development. Understanding its benefits, such as efficient global styling and ease of maintenance, can significantly enhance your web development projects.

Understanding Cascading Style Sheets (CSS): A Beginner's Guide

CSS Essentials for Beginners

What is CSS? 🤔

Meaning of Cascading

Ways to apply CSS 👇

Selectors in CSS 🚀

Conclusion 🫡