HTML and CSS Reference
In-Depth Information
14.6 The External Type with a Link
14.6.1 The <link> Tag
In Chapter 1, we talked about the three layers of a Web page: HTML/XHTML, CSS, and
JavaScript. The CSS layer can be separated from the HTML document by placing style
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
.css extension, just as the HTML file has an .html or .htm extension, and a JavaScript
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"
href="extern.css" media="all">
<!-- Name of external file is extern.css. See Example 14.12 -->
<h1><u>External Stylin'</u></h1>
<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.
Search WWH ::

Custom Search