Types of CSS (Cascading Style Sheet)

Quiz

CSS stands for "Cascading Style Sheet". It is a style sheet language used to control the layout and other visual aspects of the web pages. CSS plays an important role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.

There are three types of CSS which are mentioned below.

Inline CSS
Internal CSS
External CSS

1. Inline CSS

Inline CSS is applied directly to an HTML element using the style attribute. It has the highest priority among the three methods.

Example 1

In this example we have changed the text color using color property and font of the written text using inline CSS properties.

<p style="color: #04af2f; font-family: Verdana, sans-serif;">
    This line is an inline-styled paragraph.
</p>

Example 2

In this example we have changed the background color, height, width and text color of the div element using inline CSS properties.

<div style="background-color: #04af2f; color : white; 
            height : 100px; width: 250px">
    This line is an inline-styled paragraph.
</p>

2. Internal CSS

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

Example 1

In this example we have changed the text color and font of the written text using internal CSS properties.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        p {
            color: #04af2f;
            font-family: Verdana, sans-serif;
        }
    </style>
</head>

<body>
    <p>This line is styled using internal CSS.</p>
</body>

</html>

Example 2

In this example we have changed the background color, height, width and text color of the div element using internal CSS properties.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        p {
            background-color: #04af2f;
            color: white;
            height: 100px;
            width: 250px;            
        }
    </style>
</head>

<body>
    <p>This line is styled using internal CSS.</p>
</body>

</html>

3. External CSS

External CSS is written in a separate .css file and linked to the HTML document using the <link> tag. This is the recommended method for large projects as it improves maintainability.

Example

Here is an example of External CSS having separate files for HTML and CSS.

HTML File

<!-- HTML file -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This line is styled using external CSS.</p>
</body>

CSS File

/* styles.css */
p { 
    color: #04af2f;
    font-family: Verdana, sans-serif; 
}

Note: The specificity order for above three types of CSS is as follows: Inline CSS > Internal CSS > External CSS.

Print Page