CSS is an acronym for Cascading Style Sheets. It is a style sheet language that describes how the elements on a web page should look or appear. In short, CSS is a language that styles web pages.
It is a time-saving language that comes with the ability to apply styles to multiple web pages at once. Also, it is possible to style a single element on a web page or a single web page with different types of CSS.
Now, it is obvious to get a question in your mind: how many types of CSS are there?
There are three types of CSS, namely Inline, Internal, and External. In this article, we are going to explain types of CSS, along with their examples, to have better comprehension.
Follow along and we hope you enjoy this article!
Contents
3 Types of CSS
1. Inline CSS
When you need to style a single HTML element on a web page, inline CSS comes in handy. It requires you to use a style attribute within the HTML tag without the need for selectors. However, it is pretty challenging to manage a website using inline CSS because you need to include a separate style attribute for each HTML element on a web page.
But what is the correct way to apply CSS style? The correct way to apply inline CSS style is to use the style attribute inside the HTML tag of the elements that you need to style.
Example
<!DOCTYPE html>
<html>
<body>
<h1style="background-color:grey; text-align:center;"> Types of CSS </h1>
<pstyle="color:orange;font-style:italic; font-size: 25px; text-align:center;"> Inline CSS </p>
</body>
</html>Output
In the above example, we have applied different styles to heading <h1> and a paragraph <p>.
Advantages
- It is pretty easy to write online CSS on an HTML document.
- With inline CSS, you can test and preview changes to your web page or website and carry out quick fixes.
- There is no need to create and link a separate CSS file to your HTML document, as you can add inline CSS within an HTML tag.
Disadvantages
- Inline CSS is time-consuming, as you have to specify the style attribute for each element on an HTML page.
- It becomes difficult to handle a website with inline CSS.
- When you style multiple elements using inline CSS, it may affect a web page’s load time and size.
2. Internal CSS
When there is a need to apply the same style to all the elements on a single web page, internal CSS is useful. In inline CSS, we have simply used the style attribute. In internal CSS, you need to use a tag. But, which tag is used for internal CSS?
You need to define the internal CSS within the <style> tag and embed it in the <head> section of the HTML document that you wish to style.
We often refer to inline CSS as embedded CSS. The primary difference between inline and internal CSS is that the former styles a single HTML element on a web page, and the latter styles the entire web page (all elements on a web page).
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center; background-color:grey}
p {color: green; text-align: center}
</style>
</head>
<body>
<h1>Types of CSS</h1>
<p>Internal or Embedded CSS</p>
<p>Hello World!</p>
<p>Learn internal CSS here.</p>
</body>
</html>Output
In the above example, we have applied CSS for heading <h1> and all the paragraphs in the <head> section of the HTML document.
Advantages
- With internal CSS, you can style all the elements of a web page at once.
- Like inline CSS, there is no need to create a separate CSS file and link it to an HTML document.
- Compared to inline CSS, it is faster, more convenient, and more efficient.
Disadvantages
- Internal CSS is not ideal to use if you require to style multiple web pages.
- Using internal CSS increases an HTML page’s load time and size as you include it in the page itself.
3. External CSS
The last type of CSS is external CSS. It lets you style multiple web pages by creating a .css file and linking it to all the web pages that require the same styling. With external CSS, it is possible to apply the style to a complete website. Every web page of a website should refer to the external CSS file using the <link> tag inside the <head> section of that web page.
Among all types of CSS styles, external CSS is the most efficient and does not consume time. The primary difference between internal CSS and external CSS is that the former styles a single web page by including internal CSS in the <head> section. Meanwhile, the latter styles multiple web pages by creating and linking an external .css file to those pages.
Example
CSS file: Let us say we name the CSS file as learn.css and add the following code
<!-- wp:paragraph -->
<p>h1{ </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>text-align:center; background-color:black; color: white</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>p{</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>background-color: powderblue; text-align: center; color: purple</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->HTML document
<!DOCTYPE html>
<html>
<head>
<linkrel="stylesheet"href="learn.css">
</head>
<body>
<h1>Types of CSS</h1>
<p>External CSS</p>
<p>Hello World!</p>
<p>Learn external CSS here.</p>
</body>
</html>Output
Advantages
- External CSS makes the management of websites easier.
- The HTML documents are small in size and have less load time because there is an external CSS file.
- You need to create just a single .css file to style multiple web pages.
Disadvantages
- You need to load the external CSS file in order to render your web pages correctly.
- If you upload multiple external CSS files, the load time of a website may increase.
Difference Between Inline, Internal, and External CSS
The following table highlights the differences between inline, internal, and external CSS:
| Inline CSS | Internal CSS | External CSS |
| It styles a single element on a web page. | This type of CSS styles the entire web page, i.e., all elements on a single web page. | It styles the entire website through a single .css file. |
| Inline CSS leverages the style attribute. | The style> tag is used in the HTML document’s head> section. | External CSS leverages an external .css file. |
| You cannot use any selector. | It lets you use selectors, such as id, tag name, class, etc. | It supports the use of CSS selectors. |
| Inline CSS is time-consuming. | Internal CSS is more time-consuming than external CSS. | External CSS saves you time as it lets you style multiple web pages with a single file. |
Types of CSS Summary
- Inline CSS styles a single element on a web page.
- It uses the style attribute within an HTML tag.
- Internal CSS styles all the elements on a web page at once.
- You can write internal CSS inside the <style> tag within the <head> section of an HTML document.
- External CSS applies the style to multiple web pages or an entire website.
- It requires you to create an external .css file and import it into every web page using the <link> tag.
That’s it guys. We hope this article that broke down the different types of CSS was helpful.
If you have questions or want to add something to the article, please comment below!
Has an A.S Degree in Information Security, and has worked at many IT jobs. He eventually found a love for Marketing and now does SEO for a living. Franco enjoys writing about Technology, Ethical hacking and growth marketing and more.
