Types Of CSS: How To Use In HTML Documents - October 3rd, 2024

We all know about Cascading Style Sheet and its importance in Styling our web pages. Let us know three major types of CSS inline, internal (embedded), and external CSS.

It is important to know all the methods of integrating CSS in HTML documents for our web development project. In this article, we will learn in detail the types of CSS in web development and their uses.

Table of Contents

What is CSS (Cascading Style Sheet) Used For?

Cascading Style Sheet (CSS) is a stylesheet language used to define the styling, color, size, texture, and design of HTML elements in a web page or application.

types of css

CSS is very important for web development as it defines how HTML elements are rendered and appear to the users. CSS can be applied in the header section of HTML or it can be aligned inline with the individual HTML elements. Based on these factors CSS is divided into three major categories given below.

Inline CSS
Internal or Embedded CSS
External CSS

Types of CSS (Cascading Style Sheet)

Let us know the three major types of CSS (Cascading Style Sheet) below.

1. Inline CSS

The inline CSS helps to style and customize HTML elements individually. This is used when we have elements that we want to stand out from the rest of the elements on the web page.

We can also use Inline CSS when we do not know the exact location of the CSS file of a web project. Let us understand Inline CSS with the help of an example below.

Example of Inline CSS

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<h1 style=”color: blue; text-align: center;”>This is a Heading</h1>

<p style=”font-size: 20px; color: green;“>This is a paragraph with inline CSS.</p>

</body>

</html>

Pros of Inline CSS

Quick and easy to implement CSS for any specific element directly through HTML tags.
It can override styles from external and internal stylesheets making it much useful for last-minute changes.
No External dependencies which makes it less complex to implement.

Cons of Inline CSS

Inline CSS is used for individual elements and hence lacks reusability.
Maintenance becomes tough when the number of inline styles increases. It also increases the size of your HTML file.
Limited scalability

2. Internal CSS

The internal CSS is implemented in the <head> section of the HTML document page using the <style> tag. This method of CSS is useful when we have to apply styles to a single document without affecting multiple pages. Let us understand internal CSS with an example.

Example of Internal CSS

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS Example</title>

<style>

body {

background-color: lightblue;

}

h1 {

color: navy;

text-align: center;

}

p {

font-size: 18px;

color: darkgreen;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph with internal CSS.</p>

</body>

</html>

Pros of Internal CSS

No external file is required to integrate CSS in HTML documents.
It can override external styles if required easily.
It is easier to implement and make changes directly within the <style> tag in the <head> section of HTML documents.
It is better to use a single HTML document.

Cons of Internal CSS

Internal CSS lacks reusability as inline CSS and hence we need to apply them separately for each element in the HTML document.
Using Internal CSS on multiple pages can lead to increased page load time.
Internal CSS is not well aligned with the best practices for using HTML and CSS in a web development project.

3. External CSS

You might have already got it by its name “External CSS” which means using an external “ .css” file for storing all CSS styling for all HTML elements. Using external CSS we can scale up the reusability of styles in HTML elements and need not apply styling and customization to specific elements separately.

To connect this CSS file to the HTML file we use <link> tag in the <head> section of the HTML document. This helps us integrate CSS styling into our HTML page in an organised manner.

Example of External CSS

<!DOCTYPE html>

<html>

<head>

<title>External CSS Example</title>

<link rel=”stylesheet” type=”text/css” href=”external.css”>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph with external CSS.</p>

</body>

</html>

CSS File (external.css)

body {

background-color: lightgray;

}

h1 {

color: darkblue;

text-align: center;

}

p {

font-size: 16px;

color: black;

}

Pros of External CSS

External CSS is more organized and readable than other types of CSS.
External CSS files can easily be linked to multiple HTML documents and hence promote reusability.
Any changes or modifications can be done through a single place and are automatically applied to all other HTML elements.
It reduces page load time significantly.
Also, CSS external files are highly scalable making it more easier to integrate and use for large websites having multiple pages.

Cons of External CSS

External CSS requires an additional HTTP request to load the CSS file.
If an external CSS file is not integrated properly inside HTML documents styles will not be loaded as defined.
Not preferred for simple and small projects having a single HTML page.

Which Type Of CSS is The Best For Multiple Web Pages?

External CSS is the best method of integrating CSS inside an HTML document in all major aspects. Nowadays, websites are complex and more functional with many features. A complex CSS structure layout, color, bg color, format, font family, and other parameters are integrated which becomes tough to manage.

Any changes and modifications can be done through a single place which will be applied to every element in the HTML document. It makes HTML files tidy and optimized. You can easily customise different sections in separate files and link them to the HTML document file.

Page load time is also lower in external CSS when compared to the other two types of CSS methods. Hence, considering all the above factors external CSS is more preferred in medium to large web development projects.

Internal CSS Vs. Inline CSS Vs. External CSS

Let us know about some major differences in these three types of CSS based on various factors. Check the table below.

Inline CSS	Internal CSS	External CSS
This CSS property can be individually applied to specific HTML tags.	It is applied in the <head> section of the HTML document.	It is applied in a separate CSS file.
It is an ideal practice for smaller web development projects.	It is an ideal practice for medium to large projects.	It is an ideal practice for smaller to web pages having multiple pages.
<element style=”property: value;”>	<style> selector { property: value; } </style>	selector { property: value;
It affects only the element in which it is applied.	It affects the entire HTML document where the <style> element is defined.	It can affect multiple HTML document pages.
It is not reusable	It is not reusable	It can be reused for multiple HTML pages.
It can possibly slow down the page loading speed if used frequently.	The same goes for Internal CSS	It is fastest as CSS file is cached by the browser and can be reused across multiple HTML pages.
Simple and quick to implement	Keeps the HTML elements organised	Gives a centralised control over HTML elements

Learn Web Development with PW Skills

Become proficient in front-end and back-end development with our Full Stack Web Development Course. Get perks like no other online courses with interactive classes, experienced mentors, 24×7 doubt support, dedicated career support, and interview opportunities all in one course at pwskills.com

Types of CSS FAQs

Q1. What are the types of CSS in web development?

Ans: There are three major types of CSS based on the methods of integrating them in HTML documents namely inline CSS, internal CSS, and external CSS.

Q2. Why external CSS is better?

Ans: External CSS decreases file size and page load time of a web page significantly improving its efficiency. Also, making changes and modifications is much easier in external CSS than in other types of CSS.