External CSS

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section.

Here is the generic syntax of including external CSS file :−

<head>
<link type = "text/css" href = "..." media = "..." />
</head>

Attributes:

Attributes associated with <style> elements are :−

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

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css


body {  
   background-color: Wheat;  
}  
h1 {  
   color: blue;  
   margin-left: 20px;  
}   

Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;