Types of CSS

CSS stands for Cascading Style Sheets. It is used to style HTML webpages by adding colors, changing fonts, setting backgrounds, and controlling spacing and layouts.

There are three types of CSS: Inline CSS, Internal CSS, and External CSS.

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

Example:

<h1 style="color: blue;">Hello World!</h1>

In this example, the heading color will be blue.

Inline CSS is useful when we want to apply a style to a specific element. However, using it for many elements can make the code difficult to manage.

2. Internal CSS

Internal CSS is written inside the <style> tag in the <head> section of an HTML document.

Example:

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

In this example, the heading color will be red.

Internal CSS is useful when we want to style a single webpage without creating a separate CSS file.

3. External CSS

External CSS is written in a separate file with the .css extension. We connect it to the HTML file using the <link> tag.

HTML (index.html):

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello World!</h1>
</body>

CSS (style.css):

h1 {
    color: green;
}

In this example, the heading color will be green.

External CSS is commonly used in real-world projects because it keeps HTML and CSS separate. We can also use the same CSS file to style multiple webpages.

Difference Between the Three Types

• Inline CSS: Written inside an HTML element.
• Internal CSS: Written inside the HTML document.
• External CSS: Written in a separate CSS file.

Each type has its own use. Inline CSS is suitable for individual elements, Internal CSS is useful for a single page, and External CSS is suitable for larger websites.