Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

How to Structure an External CSS DocumentExternal style sheets are essentially the same thing as embedded style sheets; the key difference is thatno markup exists in a CSS file. When you create an external, independent CSS document, it must be createdusing the .css file extension.An external CSS document may contain nothing but CSS rules or comments. A CSS document cannotcontain any markup; see how this is done in the following Try It Out.Try It OutLinking to an External Style SheetExample 2-9. To link to an external style sheet, follow these steps.1. Enter the following XHTML document:Selectors and GroupingStyle SheetRuleSelectorDeclarationPropertyValue2. Save the XHTML document as Example_2-9.html.3. In a new document, enter the following CSS:h1, h2, h3, h4, h5, h6 {font-family: sans-serif;color: maroon;border-bottom: 1px solid rgb(200, 200, 200);}4. Save the CSS as stylesheet.css in the same folder that Example_2-9.html was saved in.5. Load up the document in a browser. You should see output that looks like Figure 2-6.How It WorksChapter 2: The EssentialsThe embedded style sheet between the ... tags has been replaced with an externalstyle sheet by placing the rules inside the embedded style sheet into their own document, saving thatdocument with a .css file extension, and then linking to the new file by including the elementin the XHTML document. One of the benefits of an external style sheet is that it allows the same style55