Using External Style Sheets

The third method of applying styles to a document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changed, the modifications can take place in one CSS file rather than all HTML pages.

To change the header style to an external style, move the rule set to a new CSS file as shown in Listing 4.4.

Next, link to this style sheet from your HTML file using the link element as shown in Listing 4.5.

Listing 4.4. CSS Code Containing an External Style Sheet with Styles for the `<p>` Element

p {      font-family: arial, helvetica, sans-serif;      margin: 1em;      padding: 1em;      background-color: gray;      width: 10em; }

Listing 4.5. HTML Code Containing the `link` Element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"          "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>     <meta http-equiv="content-type" content="text/html;     charset=utf-8">     <title>Lesson 4</title>     <link rel="stylesheet" href="style.css" type="text/css"     media="screen"> </head> <body> <p>     Lorem ipsum dolor sit amet, consectetuer adipiscing     elit... </p> </body> </html>

Listing 4.4. CSS Code Containing an External Style Sheet with Styles for the <p> Element

Listing 4.5. HTML Code Containing the link Element

Listing 4.4. CSS Code Containing an External Style Sheet with Styles for the `<p>` Element

Listing 4.5. HTML Code Containing the `link` Element