Because it is possible to have more than one style sheet lan-guage, you can tell the browser what type of style sheet you are using with the type attri-bute of the HTML tag.. These par
Trang 114.5 Types of Style Sheets
There are several ways to define style sheets within a document:
1 Embedded—The style is defined within the <style> tags for the HTML
docu-ment
2 Inline—The style is defined for a specific HTML element.
3 External—The style is defined in an external file
14.5.1 The Embedded Style Sheet and the <style> Tag
A style sheet that is created with the HTML <style></style> tags right in the current
doc-ument is called an embedded style sheet
The <style> Tag. The <style></style> tags were introduced into HTML to allow the
style sheets to be inserted right into an HTML document They are used to create a set
of rules to define the style of an HTML element(s) The <style></style> tags are placed
between the <head></head> tags in the document, as shown here:
<html><title>CSS Example</title>
<head>
<style>
h1 { color: blue ; }
</style>
</head>
The type Attribute. Because it is possible to have more than one style sheet
lan-guage, you can tell the browser what type of style sheet you are using with the type
attri-bute of the HTML <style> tag When the browser loads the page, it will ignore the style
sheet if it doesn’t recognize the language; otherwise it will read the style sheet
The following example specifies that the type is text/css; that is, text and CSS.
F O RM A T
<style type="style sheet language">
Example:
<style type="text/css">
Trang 2E X A M P L E 1 4 9
<html>
<head><title>Cascading Style Sheets</title>
1 <style type="text/css">
text-indent:5%;
margin-left: 20%;
margin-right: 20%;
border-width:10px;
border-style:groove;
padding: 15px;
font-family: times,arial;
font-size:150%;
font-weight:900 }
text-align: center;
background:blue;
border-width:5px;
border-style:solid;
border-color:black;
margin-left:20%;margin-right:20%;
font-family:courier, arial;
font-weight:900;
color: white; }
>
7 </style>
</head>
<body>
8 <div align="center"><h1>Stylin' Web Page</h1></div>
9 <p>HTML by itself doesn't give you much other than structure in
a page and there's no guarantee that every browser out there will render the tags in the same way So along came style sheets Style sheets enhance HTML as a word processor enhances plain text <p>But no guarantees what a browser might do with a style sheet, any more than what a stylist might do to your hair, but we can hope for the best.
10 <h2><center>An H2 Element</center></h2>
<h3><center>An H3 Element</center></h3>
11 <p>This is not a <em>designer's dream style</em>, but it
illustrates the power.</p>
</body>
</html>
Trang 3E X P L A N A T I O N
1 The HTML <style> tag belongs within the <head></head> tags The is the start of
an embedded CSS
2 A rule is defined for the HTML body element The background color of the
docu-ment will be light blue
3 A rule is defined for the HTML p (paragraph) element The left and right margins
are set at 20%, meaning that they will be moved inward 20% from their respective
edges They will be surrounded by a grooved border, with the text given a 15-pixel
size padding The font is Times or Arial (whichever works on your browser),
point size 150% bigger than its default, and weight 900 is the boldest of the bold
4 A rule is defined for a group of selectors (heading levels h1, h2, and h3) They will
be centered on the page, and the text will be white against a blue bordered
back-ground in a Courier or Arial font
5 The rule for the <h2> and <h3> tags sets the font size to 24 points
6 A rule is defined for an em element Text will be green and bold.
7 This marks the end of the HTML header that encloses the style sheet
8 As shown in the output (see Figure 14.11), the heading level is displayed
accord-ing to the style defined in the style sheet, line 4
9 This paragraph is displayed according to the rule set in the style sheet, line 3
No-tice how both the left and right margins have moved toward the center
10 The heading level is displayed according to the rule set in the style sheet, lines 4
and 5, and the first paragraph is indented
11 The <em> tag is embedded within the <p> tag It inherits from the <p> tag
every-thing but the font color and weight These paragraph properties were overridden
in the style sheet defined on line 6 for the em element.
Trang 414.5.2 The Inline Style and the <style> Attribute
Inline style sheets are also embedded within an HTML document, but are assigned as an
attribute of the <style> tag in the body of the document and are useful for overriding an
already existing style for a particular element in a linked style sheet On the negative side,
they have to be redefined for any element that requires that style, element by element For
example, if the h1 element has been defined to be blue and you want to temporarily change
it to red, you can define the style as an attribute of the style tag for that element:
<h1 style= "color: red; "> This is red text</h1>
Figure 14.11 HTML and CSS—An embedded style sheet.
E X A M P L E 1 4 1 0
<html>
<head><title>Inline Style Sheets</title>
1 <style type="text/css">
2 body { background-color: orange;
color:darkblue; /* color of text */ }
Left
Margin
Indent
Right Margin
Trang 5</style>
</head>
<body>
3 <h1 style="color:darkred;
text-align:center;
text-decoration:underline;">Inline Stylin'</h1>
4 <p style="color:black;
background:white;
font-family:sans-serif;font-size:large">
This paragraph uses an inline style As soon as another paragraph is started, the style will revert back to its default.
5 <p> This paragraph has reverted back to its default style,
and so has the following heading.</p>
<h1>Default heading</h1>
</body>
</html>
E X P L A N A T I O N
1 A CSS starts here in the head of the document
2 The background color is set to orange and the color of the font is set to dark blue
3 This h1 uses an inline style, an attribute of the <h1> tag and effective for this
head-ing only The color will be red, the text centered and underlined
4 This is an inline style for the paragraph tag It is an attribute of the <p> tag and is
only good for this paragraph The text of the paragraph will be black, the
back-ground color of the paragraph will be white, and the font family, sans serif, large
The next time a <p> tag is used, the style will revert to its former style.
5 This paragraph has reverted to its former style See Figure 14.12
Figure 14.12 Inline styles are temporary.
E X A M P L E 1 4 1 0 (C O N T I N U E D)
Trang 614.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.
E X A M P L E 1 4 1 1
<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>
E X P L A N A T I O N
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