What is External Style Sheet HTML

In this article, we will see what is external style sheet HTML.

External Style Sheet

External Style Sheet is basically a CSS file containing list of declaration blocks.
This (.css) file is linked to various web pages to apply similar styles.

To link HTML and CSS files together we use link tags.

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

Note:

Advantage:
We can implement consistency throughout the website.

Limitations:
If we make any changes in the CSS file, then every other linked HTML page will get affected.

Examples:

This file is saved as style.css

p{
color: white;
background-color: blue;
font-size: 20px;
}

This file is saved as index.html

<html>
<head>
<title>External style</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>This is paragraph1</p>
<p>This is paragraph2</p>
<p>This is paragraph3</p>
</body>
</html>

Output: