An Easy Guide to CSS for Website Styling

Hello there!

Are you ready to unleash your creativity and take your web development skills to the next level? Then let's dive into the amazing world of CSS!

Imagine a building where the structure is complete—the foundation, roofing, and all. But something is still missing. We need to style the house to our taste with paint, interior decoration, and more to achieve a finished product. This is exactly what CSS does for your HTML.

CSS, which stands for Cascading Style Sheets, is used for styling our HTML to make the web look better and more user-friendly.

Methods of Styling with CSS

We have three primary methods to apply CSS to our HTML:

Inline Styling
Internal Styling
External Styling

All these methods achieve the same effect on the website but differ in the readability and organization of your code.

Inline Styling

Inline styling is applied directly within an HTML element using the style attribute.

Example of Inline Styling:

<p style="color: blue; font-size: 14px;">This is an inline styled paragraph.</p>

Internal Styling

Internal styling is done within the <style> tag, which is placed inside the <head> section of an HTML document.

Example of Internal Styling:

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is an internally styled paragraph.</p>
</body>

External Styling

External styling is similar to internal styling but is written in a separate CSS file that is linked to the HTML document.

Example of External Styling:

HTML File:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is an externally styled paragraph.</p>
</body>

CSS File (styles.css): this will also be in a folder where the index.html is located

p {
  color: green;
  font-size: 18px;
}

Precedence in CSS

Inline styles have the highest precedence since they are closest to the elements being styled. This is followed by internal styles and then external styles. The browser reads the code from top to bottom, loading external styles first, then internal styles, and finally inline styles. The only way to override this precedence is by using the !important declaration.

Conclusion

The journey into CSS has been great, and it’s crucial to understand these different methods to style your web pages effectively. Thanks to Ayodele Samuel Adebayo(UncleBigBay) and TIIDELab for always making learning easy for us!