External CSS

Last Updated : 7 Aug 2026

External CSS is a method of adding CSS to one or more HTML documents using a separate stylesheet file. The CSS rules are written in a file with the .css extension and linked to the HTML document using the <link> tag.

In this chapter, you will learn what External CSS is, its syntax, how to link a CSS file, examples of External CSS, and its advantages and disadvantages.

What is External CSS?

External CSS is used when the same styles are required on multiple HTML pages. Instead of writing CSS inside every HTML document, all CSS rules are stored in a separate file with the .css extension.

The HTML document is connected to the stylesheet using the <link> tag, which is placed inside the <head> section. Any changes made to the external CSS file are automatically reflected on every HTML page that uses that stylesheet.

Syntax of External CSS

The following syntax is used to link an external stylesheet to an HTML document.

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

In this syntax:

<link> connects the HTML document to an external stylesheet.
rel="stylesheet" specifies that the linked file is a stylesheet.
href specifies the path of the CSS file.

Example of External CSS

The following example demonstrates how to use an external stylesheet.

HTML File:

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

CSS File (mystyle.css):

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

Explanation

In this example:

The HTML page is linked to the mystyle.css file.
The background color of the page becomes light blue.
All <h1> elements appear in navy color with a left margin of 20 pixels.

Applying External CSS to Multiple Pages

One external stylesheet can be shared by multiple HTML pages.

Example

index.html

about.html

contact.html

style.css

All three HTML files contain the following code inside the <head> section:

<link rel="stylesheet" href="style.css">

Explanation

All the HTML pages use the same style.css file. If the stylesheet is modified, the changes are automatically applied to every page linked to it.

Creating an External CSS File

An external stylesheet is created as a separate file with the .css extension. It contains only CSS rules and does not include HTML tags.

Example

p {
    color: green;
    font-size: 18px;
}

button {
    background-color: blue;
    color: white;
}

Explanation

The stylesheet contains CSS rules for paragraphs and buttons. These styles are applied to every HTML document that links this stylesheet.

Linking CSS from Another Folder

The href attribute can specify the location of the CSS file using a relative path.

Example

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

Explanation:

In this example, the CSS file named style.css is stored inside the css folder. The browser loads the stylesheet using the specified path.

Advantages of External CSS

The same stylesheet can be used by multiple HTML pages.
Changes made to the stylesheet are reflected on all linked pages.
HTML documents remain cleaner because CSS is stored separately.
CSS files can be cached by browsers, reducing page loading time.
Suitable for medium and large websites.

Disadvantages of External CSS

An additional CSS file is required.
If the stylesheet cannot be loaded, the HTML page is displayed without the intended styles.
Small projects with a single page may not require a separate stylesheet.

Next TopicCSS Comments

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.