External CSS

The external style sheet is generally used when you want to make changes on multiple pages. With an external style sheet, you can change the look of an entire website by changing just one file.

It is considered a best practice to have your CSS stylesheets in an external file. 

External style sheets are created in separate documents with a .css extension. An external style sheet is simply a listing of CSS rules.

The external style sheet may be written in any text editor but must be saved with a .CSS extension.

An external style sheet is a separate file where you can declare all the styles that you want to use on your website.

When you use external CSS file you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.

Contents hide
Syntax
Example

Syntax

<link> tag is used on every web pages where you want to include external CSS file.

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

You’ll write rel="stylesheet" to tell the browser that you are importing a stylesheet.  You will use this attribute to tell the browser what the relationship is with the imported file. It is optional.

src attribute specifies the file to import.

You use the type attribute to define the type of the content you’re linking to. For a stylesheet, this would be text/css. It is optional.

External CSS file should not contain any HTML elements. It should not contain <style> tag.

Example

File: mystyle.css

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

External styles are defined within the <link> element, inside the <head> section of an HTML page.

There is no limit to the number of external style sheets a single HTML page can use.

You can give the file any name as long as it has the .css extension

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

Do not use space between the property value and the unit. For example: It should be margin-left:20px not margin-left:20 px.

In this article, you learned how to add an external style sheet to your web page using the link element.

You can read about file path here, if you have confusion about how to link CSS file from different folder.