External Style Sheet

This style is related to one or more HTML pages. These styles are specified in a separate file (.css) and to be attached to HTML pages using LINK element.

Pros:

Easy to apply to multiple pages.
Easy to maintain, since HTML pages and CSS files are different physical files.

Cons:

System gives third (last) preference to this style type when apply to HTML elements. First and second preference applies to Inline CSS and Internal CSS.

Example (code portion from .css file):


                        body {
                        width:800px;
                        border:dotted;
                        }

CSS file (corestyles.css) contents.

                    
body {
        width:800px;
        border:dotted;
}
h1{
        text-align:center;
}
h2{
        background-color:green;
        color:white;
}
p{
        font-family:arial;
}

CSS external style example.

                        
<!DOCTYPE html />
<html>
<head>
   <link rel="stylesheet" href="corestyles.css"/>

   <title> CSS External Style </title>
</head>
<body>
    <h1>CSS Styles</h1>
    <h2> Different ways to apply CSS styles</h2>
    <p> a)	Inline style </p>
    <p> b)	Internal style sheet</p>
    <p> c)	External style sheet </p>
</body>
</html>

Result:

In the above example,

CSS external style sheet styles are applied to HTML elements.
All styles are created under a CSS file (corestyles.css).
CSS file is attached to HTML file using LINK element.