History of CSS

CSS was first proposed by Håkon Wium Lie on October 10, 1994, while he was working with Tim Berners-Lee (the father of the World Wide Web). Style sheets have existed in various forms since the beginnings of Standard Generalized Markup Language (SGML) in the 1980s. CSS was developed to provide a standardized style sheet language for the web.

What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to describe how HTML elements are to be displayed on a webpage, including the layout, colors, fonts, and more.

Note: The key difference between CSS and HTML is that CSS is used for styling (look and feel) while HTML is used for structuring content.

Types of CSS / Ways to Add CSS

There are three ways to add CSS to HTML:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS can be used to apply a unique style to a single HTML element. To use inline CSS, add the style attribute directly to the relevant element.

<h1 style="color: red;">This is a red heading</h1>
Note: Inline CSS only affects the specific element it is applied to. If you need to apply the same style to multiple elements, you'll need to repeat the inline styles, which can lead to code redundancy.

Internal CSS

Internal CSS is defined within a <style> tag, inside the <head> section of an HTML document. It can be used to style a single page.

<style>
    p {
        color: red;
    }
</style>
Note: Internal CSS styles only apply to the page in which they are defined. To avoid redundancy when styling multiple pages, it's better to use external CSS.

External CSS

External CSS involves creating a separate CSS file (e.g., style.css) and linking it to your HTML documents. This approach allows you to apply the same styles to multiple pages, making it the most efficient and commonly used method in the industry.

/* style.css */
p {
    color: green;
}

/* Linking the CSS file in HTML */
<link rel="stylesheet" href="style.css">
Note: Using external CSS means you only need to update the CSS file to apply changes across all linked HTML pages, ensuring consistency and saving time.

CSS Specificity

If multiple styles are applied to an element (e.g., both inline and internal CSS), the inline CSS will take precedence, overriding the others. Here's an example:

<style>
    p {
        color: blue;
    }
</style>

<p style="color: red;">This text will be red, not blue.</p>
Note: Inline CSS has the highest specificity, so it will override internal and external CSS if applied to the same element.

    Thank you for reading! Your thoughts and suggestions are always welcome—let’s connect in the comments below!