Types of CSS (Cascading Style Sheet)

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.

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.

Example 2

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

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.