HTML and CSS Reference
In-Depth Information
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.
EXAMPLE
14.11
<html>
<head>
<title>External Style Sheets</title>
1
<link rel=stylesheet type="text/css"
href="extern.css" media="all">
<!-- Name of external file is extern.css. See Example 14.12 -->
2
</head>
3
<body>
<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>
</body>
</html>
EXPLANATION
1
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.
Continues
