How Many Types of CSS? Learn All CSS Types With Examples

Everyone likes to visit websites that are easy to use, look visually appealing, and have a colourful ambience. Have you ever seen people stick to a website with no colour coordination or a boring colour scheme? It would be difficult to hold people's attention on a website with a pale colour scheme. 

The Websites that have a hooking ambience look great because of a factor called 'CSS'. A website is like a home; HTML acts like its frames and walls, and CSS is the paint on the walls, the tiles that lie on the floor, and the furniture that provides comfort. CSS is responsible for the outlook of the website. It takes care that the website must be bright, engaging, and visually appealing.

But in the journey of building websites, you will have to go through multiple types of CSS. There are multiple ways to style your webpages. Now, you must be wondering how to add style to your website using CSS.

This article will tell you what CSS is, how many types of CSS there are, and how to use it.  You will learn everything about CSS, along with the examples that will help you enhance your practical knowledge.

What do you mean by CSS?

Before we jump into counting how many types of CSS exist, it is important to understand what CSS stands for and what it means. CSS stands for Cascading Style Sheets. To break each word down, it means: 

• Cascading – (means that the rules can go from one style to another)
• Style – (means using colours, font sizes, and layouts)
• Sheets – (means that it acts like a template or a page of instructions)

To be crisp and precise, CSS is the programming language that helps you tell the browser how you want your website to look. CSS controls everything, big and small, in the website’s outlook. Whether it is a small button or the background colour of the entire website.

How Many Types of CSS are there?

If you ask how many types of CSS there are, the search engines will have a direct answer for you. There are three types of CSS. They are used in specific ways to style an HTML document. The 3 types of CSS are the following:

1. Inline CSS
2. Internal CSS (Embedded CSS)
3. External CSS

Each type of CSS is used specifically and has different jobs. The following is an in-depth expansion of each type of CSS with examples.

1. Inline CSS

Inline CSS is the first type of CSS to discuss. It is used to style a specific HTML element.  You will write the style code directly in the HTML tag, and to do this, you will have to use the style attribute. 

Imagine you have 6 clouds drawn in front of you. You want 5 clouds to be blue but 1 cloud to be grey. Inline CSS gives you the liberty to point directly at that cloud and colour it instantly. It helps you to style a specific element without touching the rest of them.

Example of Inline CSS

The definition alone is not enough; you must know how to write inline CSS code. The following is an example of how to write inline CSS in an HTML file: 

<p style="color: red; font-size: 30px;">This is a red paragraph</p>

In the given example, only the specific paragraph that is mentioned will become red and grow in size to 30 pixels. Whereas other paragraphs will stay the normal size and colour.

When you should use Inline CSS

• When you want to change a single thing instantly. 
• When you want to test a small change to see if it looks good on the website.
• When you cannot access a separate style sheet file.

Merits and Demerits of Inline CSS

• Merits: It provides fast and instant results along with the ability to apply immediate effects to the exact element without affecting other elements.  
• Demerits: It gives a messy look to your HTML code. If you have 40 paragraphs and you want them in black colour, you will have to copy and paste the code 40 times, and that takes a lot of time and effort. 

2. Internal CSS

Internal CSS is also called embedded CSS. While writing internal CSS code, you avoid writing styles inside every single HTML tag. Instead, you put all your style instructions in one single place at the top of your HTML document.

In internal CSS, you will place these instructions inside a special <style> tag. This <style> tag lies inside the <head> section of the HTML web page. 

Example of Internal CSS

The following is an example of creating an internal CSS code:

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Informational webpage</title>

    <style>

        body {

            background-color: lightblue;

        }

        h1 {

            color: black;

            text-align: center;

        }

        p {

            font-family: Arial;

            color: black;

        }

    </style>

</head>

<body>

    <h1>Hey there, welcome to the website</h1>

    <p>This paragraph has used internal CSS styling.</p>

    <p>This paragraph also gets the same style automatically!</p>

</body>

</html>

When this code runs, the background of the whole page will become light blue, the heading will turn black and move to the middle, and every single paragraph on the page will use the Arial font automatically.

When you should use Internal CSS

• When the website that you are building has only one page.
• When you want a single page to look different from the rest of your website.
• When you have an instant school project, and you want to keep your HTML code and your style code in the same file.

Merits and Demerits of Internal CSS

• Merits: With internal CSS, you can style lots of elements at the same time. If you want to turn all the paragraphs blue, you just have to write it once, and every paragraph on that page will change into blue.
• Demerits: It will only work on the targeted page. If you have a website of 5 pages, you will have to copy and paste the complete <style> block onto all five pages, and if your mind changes, you will have to fix the code.

3. External CSS

The third and most powerful type of CSS is the External CSS. It is the most powerful way to style your HTML document. All professional web developers use external CSS almost every time. With external CSS, you write all your style rules in a completely separate file. This file must have a .css extension in the end, for example, “style.css”. It does not have any HTML code inside it. It only has CSS styling rules inside. 

There is a special <link> tag that connects the separate CSS file to your HTML page. The tag is placed inside the <head> section of the HTML document. 

Example of External CSS

In the first step, create a separate file named style.css and write your styles in it. 

CSS

/* This is the style.css file */

body {

    background-color: yellow;

}

h2 {

    color: green;

}

button {

    background-color: blue;

    border-radius: 5px;

}

Next, you connect this file to your HTML page using the <link> tag:

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Our Big Website</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <h2>This Heading is red</h2>

    <button>Click Me!</button>

</body>

</html>

Now, the HTML page you have created will read the instructions from style.css and will make the required changes accordingly. 

When You Should Use External CSS

• When the website that you are building has more than one page.
• When your complete website is supposed to have one look, font style, and colour scheme. 
• When there is a team you are working with, and you want your style code to be organised.

Merits and Demerits of External CSS

• Merits: With external CSS, you can change the look of a thousand websites by making changes in just one CSS file. It speeds up your website as the browsers will save the CSS file after the initial visit. It also helps in keeping your HTML files clean and easy to read. 
• Demerits: It might happen that the external CSS file will fail to load because of a broken link or a slow internet connection, and your website will lose all its look and feel. Instead, it will look completely broken.

Conclusion:

To conclude, when the question arises about how many types of CSS there are, there is a simple answer to it. You can confidently answer that there are 3 types of CSS.

• Inline CSS is used directly in a specific HTML tag for specific and instant changes. 
• Internal CSS is used within the <style> tag at the top part of your page when you are working on a single web page. 
• External CSS is used while creating a separate .css file that is linked to your HTML pages for professional websites.

If you master these three types of CSS, you will have complete control over the look of your website. You will be able to make your website look beautiful. It will help your website engage with more people and keep them satisfied with the outlook.

Frequently Asked Questions (FAQ)

1. What are the different types of CSS?

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

2. Which type of CSS is the best?

There is no best CSS approach. It depends on the goal you have for our website. 

3. Is CSS a type of HTML?

No, CSS is not a type of HTML. They are used together to create a website, but they both are distinct languages.

4. What are 5 CSS selectors?

The 5 universal selectors in CSS are: Universal selector, Element selector, Class selector, ID selector, and Pseudo-class selector.

5. What is CSS used for?

CSS is used for controlling the presentation and visual design of the website.