HTML and CSS Reference
In Chapter 1, we talked about the three layers of a Web page: HTML/XHTML, CSS, and
sheets in external files. In fact, external style sheets are the most powerful type if you
want the style to affect more than one page; in fact, you can use the same style for hun-
dreds, thousands, or millions of pages. The file name for the external style sheet has a
external file has a . js extension.
To link the external file to the existing HTML file, a link is created as shown here:
< link rel =stylesheet href ="style_file.css" type ="text/css">
The following examples demonstrate the use of external style sheets. Example 14.11
is the HTML file containing a link to the external file and Example 14.12 is the .css file.
It contains the style sheet, but notice it does not contain <style></style> tags.
<head> <title>External Style Sheets</title>
<link rel=stylesheet type="text/css"
<!-- Name of external file is extern.css. See Example 14.12 -->
<h2>Paragraph Style Below</h2>
<p>The style defined for this paragraph is found in an external
CSS document. The filename ends with <em>.css</em>. Now
we can apply this style to as many pages as we want to.</p>
<h2>An H2 Element</h2>
<h3>An H3 Element</h3>
<p>This is not a <em>designer's dream style</em>, but it
illustrates the power. Don't you think so?</p>
The link tag is opened within the <head> tags of your HTML document. The link
tag has a rel attribute that is assigned stylesheet . This tells the browser that the link
is going to a style sheet type document. The href attribute tells the browser the
name of the CSS file containing the style sheet. This is a local file called extern.css .
If necessary, use a complete path to the file.