Transform Websites with CSS Basics

CSS stands for Cascading Style Sheets, it helps in transforming plain textual HTML page to the modern responsive and stunning web pages, in this article I will take you through the fundamental of CSS all you need to know to get started.

What is CSS 🤔

CSS stands for Cascading Style Sheets, well that sounds complex lets breakdown each of the terms, Cascading in CSS essentially means that when multiple rules apply to the same element, the highest priority one will be used for styling. CSS uses this rules to apply styles to the HTML elements.

Class

A class selector is used to define styles that can be applied to multiple elements on a page. A class is identified by a dot (.) followed by the class name. You can assign it to HTML elements using the class attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Class</title>
    <style>
        .highlight {
            background-color: yellow;
            color: blue;
            font-size: 20px;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1 class="highlight">Welcome to CSS Class Example</h1>
    <p class="highlight">Please subscribe to my newsletter if you found this helpful</p>
    <p>This paragraph does not use the "highlight" class, so it looks normal.</p>
</body>
</html>

ID

ID defines the style for a single element, it should be used for a single element the ID in CSS is identified by # symbol.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS ID</title>
    <style>
        #unique-heading {
            color: white;
            background-color: green;
            padding: 20px;
            text-align: center;
            font-size: 24px;
}
    </style>
</head>
<body>
    <h1 id="unique-heading">This is a Unique Heading</h1>
</body>
</html>

Selectors 🪝

Selectors are the most fundamental part of CSS, without these it is not possible to style elements through external CSS. The selector helps in selecting particular elements and apply styling on that particular elements.

Universal Selector (*): Selecting everything in the document or page.

      *{
          color: white;
          background-color: black;
      }

Tag Selector (<tag>): Selecting based on the html tags.

      h1{
          font-size: 3rem;
          background-color: red;
      }

Class Selector (.<class-name>): Groups based on the class name.

  *{
      color: white;
      background-color: black;
  }

Class Selector (.<class-name>): Groups based on the class name.

      .primary-button {
          color: white;
          background-color: skyblue;
      }

Id Selector (#<id-name>): Groups based on id.

      .payment_id {
          background-color: red;
      }

Understanding Specificity

Now let's understand the specificity algorithm. CSS can be written in multiple ways, so to avoid conflicts, CSS has its own algorithm. One part is based on the CSS file, and the other is based on selectors.

Specificity on where CSS is written

CSS is written in 3 ways inline, internal and external

Inline CSS – Written directly in the HTML element using the style attribute.
Internal CSS – Written inside a <style> block within the HTML document's <head> section.
External CSS – Written in an external file that is linked to the HTML document using the <link> tag.

Inline CSS > Internal CSS > External CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Specificity</title>
    <style>
        .text {
            color: blue;
        }
    </style>

    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1 class="text" style="color: red;">This is a heading with inline style</h1>

</body>
</html>

/* External CSS */
.text {
    color: green;
}

Inline CSS (style="color: red;"): This has the highest specificity. The element with the inline style will always take precedence over other CSS rules, no matter where they are declared.
- Specificity: 1,0,0,0
Internal CSS (<style> .text { color: blue; } </style>): This has lower specificity compared to inline styles, but higher than external CSS.
- Specificity: 0,0,1,0
External CSS (.text { color: green; }): This has the lowest specificity and will only apply if no more specific styles override it.
- Specificity: 0,0,1,0

Result:

The text color will be red because the inline style has the highest specificity and overrides the styles from both the internal and external CSS files.

Specificity based on selectors

1. Element Selectors (HTML Tags)

These are the most basic selectors in CSS and refer to HTML elements like div, h1, p, a, etc.
```
  div {
      color: red;
  }
```

2.Class Selectors

These selectors target elements with a specific class attribute (.className).
```
  .highlight {
      color: blue;
  }
```

3. ID Selectors

These selectors target elements with a specific id attribute (#idName)
```
  #special {
      color: green;
  }
```

4. Inline Styles

Inline styles are styles written directly in an element’s style attribute. These are considered the most specific type of selector.
```
  <h1 style="color: purple;">This is a heading</h1>
```

Lets combine all of the conecpts

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

    <style>
        h1 {
            color: red; 
        }

        .highlight {
            color: blue; 
        }

        #special {
            color: green;
        }

        h1.highlight#special {
            color: yellow; 
        }

        a:hover {
            color: orange; 
        }

        p::first-letter {
            font-size: 2em; 
        }

        input[type="text"] {
            color: pink; 
        }

        h1 {
            color: purple; 
        }
    </style>
</head>
<body>

    <h1 class="highlight" id="special">This is a heading</h1>

</body>
</html>

Conclusion

When working with CSS specificity, it’s important to understand how different types of selectors contribute to the final specificity score. A combination of selectors can make a rule more specific and more likely to be applied. By calculating the specificity, you can control which styles are applied in cases of conflicting rules.

From Plain to Stunning: The Power of CSS Basics

Learn How Simple CSS Can Enhance Your Website's Look