527 chapter 14 Introduction to CSS Cascading Style Sheets with JavaScript 14.1 What Is CSS?. Cascading Style Sheets CSS was a standard introduced by the World Wide Web Con-sortium W3C
Trang 1527
chapter
14
Introduction to CSS
(Cascading Style
Sheets) with JavaScript
14.1 What Is CSS?
Cascading Style Sheets (CSS) was a standard introduced by the World Wide Web
Con-sortium (W3C) in 1995 to help designers get more control over their Web pages by
enhancing what HTML can do—it is used to stylize the content of a Web page Whereas
HTML is concerned with the structure and organization of a document, CSS is
con-cerned with its layout and presentation, or formatting the document In the old days,
HTML tags were used to set up the structure and style of a page If you wanted to create
an H1 tag with an Arial blue font, point size 22, you would have to set the same
attri-butes for each H1 tag in the entire document, To apply these changes to an entire Web
site could be a daunting task With CSS you can set the style once for all H1 tags and put
that style definition in its own css file When the page is loaded the CSS style will be
applied to all H1 tags in the page in one sweeping change
Because the initial style of the content of a page is done with CSS, we’ll start there
The goal is to use CSS with the DOM and JavaScript (Chapter 15) together to
dynami-cally change the style of the page, often called Dynamic HTML (DHTML) For a
com-plete discussion of CSS (both CSS1 and CSS2), see http://www.w3org/Style/CSS If you
are a designer and already have a good CSS foundation, you can skip this chapter and
go directly to Chapter 15, “The W3C DOM and JavaScript.”
14.2 What Is a Style Sheet?
Webster’s Dictionary defines “style” as a manner of doing something very grandly;
ele-gant, fashionable Style sheets make HTML pages elegant by allowing the designer to
create definitions to describe the layout and appearance of the page This is done by
cre-ating a set of rules that define how an HTML element will look in the document For
example, if you want all H1 elements to produce text with a green color, set in an Arial
14-point font centered on the page, normally you would have to assign these attributes
Trang 2528 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript
to each H1 element as it occurs within the document, which could prove quite time
con-suming With style sheets you can create the style once and have that definition apply
to all H1 elements in the document If you don’t have a lot of time to learn how to create
style sheets, an excellent alternative is Macromedia’s Dreamweaver MX For more on
authoring tools, see http://www.w3.org/Style/CSS/#editors.
Style sheets are called cascading because the effects of a style can be inherited or
cas-caded down to other tags This gets back to the parent/child relationship we have talked
about since Chapter 1, the DOM If a style has been defined for a parent tag, any tags
defined within that style may inherit that style Suppose a style has been defined for a
<p> tag The text within these tags has been set to blue and the font is set to a sans serif
font If within the <p> tag, another set of tags is embedded, such as <b> or <em>, then
those tags will inherit the blue color and the “sans serif” font The style has cascaded
down from the parent to the child But this is a simplistic definition of cascading The
rules can be very complex and involve multiple style sheets coming from external
sources as well as internal sources And even though a browser might support style
sheets, it might render the CSS information differently For example, the DOCTYPE
dec-laration used at the start of the document might allow a document to be displayed with
nonstandard rendering rules (Quirks mode) or follow the W3C strict standard, and
older browsers may have a limited or a buggy implementation of the CSS standard For
more on this topic, see https://developer.mozilla.org/en/Common_CSS_Questions.
The good news is that all modern browsers support CSS
14.2.1 What Is a CSS-Enhanced Browser?
A CSS-enhanced browser supports CSS and will recognize the style tag <style> as a
con-tainer for a style sheet, and based on the definition of the style, will produce the
docu-ment accordingly Modern browsers, such as Internet Explorer, Mozilla Firefox,
Netscape, Opera, and Safari support CSS, and the majority of Web users are running a
CSS-enhanced browser However, just because a browser is CSS enhanced doesn’t mean
that it is flawless or without limitations And just because a browser is not CSS
enhanced, doesn’t mean that it can’t see the content of a page.1
Traditionally, browsers have silently ignored unknown tags, so if a browser does not
support CSS, when it encounters a <style> tag, its content will be treated simply as part
of the document To hide the <style> tag content, one method is to enclose it within
HTML comments as shown here:
<style
type="text/css"><! p.largetext/* */ { font-size: 200% ; }
></style>
Example from: http://www.thesitewizard.com/css/excludecss.shtml
Trang 3(See the section “CSS Program Structure” on page 530 for more on this.) If you are
contending with an older version of your browser, it might just be a good time to
upgrade to a newer model!
14.2.2 How Does a Style Sheet Work?
A style sheet consists of the style rules that tell your browser how to present a
docu-ment The rules consist of two parts: a selector—the HTML element you are trying to
stylize—and the declaration block—the properties and values that describe the style
for the selector
This rule sets the color of the H2 element to blue:
H2 { color: blue }
A rule, then, consists of two main parts: the selector (e.g., H2) and the declaration
block (e.g., color: blue) Example 14.1 demonstrates this simple rule.
F O RM A T
selector { property: value }
declaration block
E X A M P L E
H1 { color: blue }
E X A M P L E 1 4 1
<html>
<head><title>First Style Sheet</title>
1 <style type="text/css">
2 h1 { color: saddlebrown } /* rule */
h2 { color: darkblue }
</style>
</head>
<body bgcolor=silver>
3 <h1>Welcome to my Stylin' Page</h1>
4 <h2>What do you think?</h2>
</body>
</html>
Trang 4530 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript
14.3 CSS Program Structure
14.3.1 Comments
CSS comments, like C language comments, are enclosed in /* */ They are the textual
comments that are ignored by the CSS parser when your style is being interpreted, and
are used to clarify what you are trying to do They cannot be nested
H1 { color: blue } /* heading level 1 is blue */
E X P L A N A T I O N
1 The style sheet starts with the HTML <style> tag and specifies that the style sheet
consists of text and CSS The purpose of this style sheet is to customize HTML
tags, thus giving them a new style
2 A selector is one of any HTML elements, such as h1, h2, body, li, p, or ul In this
example, the h1 and h2 elements are selectors The declaration has two parts:
property (color) and value (saddlebrown) Every time an <h1> tag is used in the
document, it will be saddle brown, and every time an <h2> tag is used, it will be
blue (There are approximately 50 properties beyond the color property that are
defined in the CSS specification!)
3 The <h1> tag will be displayed in saddle brown, based on the rule in the style
sheet
4 The <h2> tag will be displayed in blue, based on the rule in the style sheet Output
is shown in Figure 14.1
Figure 14.1 Style sheet output in Firefox.
Trang 514.3.2 Grouping
Grouping is used to reduce the size of style sheets For example, you can group selectors
in comma-separated lists, if you want the same rule to apply to all of the elements:
H1, H2, H3 { font-family: arial; color: blue }
Now all three heading levels will contain blue text in an Arial font
You can also group a set of declarations to create the style for a selector(s) The
fol-lowing rule combines a number of declarations describing the font properties for an H1
element:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: verdana;
}
And you can group the values for a particular property as follows:
h2 {font: bold 24pt arial}
E X A M P L E 1 4 2
<html>
<head><title>Grouping Properties</title>
<style type="text/css">
1 h1,h2,h3 { color: blue } /* grouping selectors */
font-weight: bold;
font-size: 30pt;
font-family: verdana;
}
3 h2 { /* grouping a property's values */
font: bold 24pt arial }
</style>
</head>
<body bgcolor=silver>
4 <h1>Welcome to my Stylin' Page</h1>
5 <h2>What do you think?</h2>
6 <h3>Groovy!</h3>
</body>
</html>
Trang 6532 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript
14.4 Common Style Sheet Properties
In the previous examples, font-family and color are properties (also called attributes),
and assigning values to them defines the style of the document Listed in Table 14.1 are
some of the properties commonly used in style sheets Many of these properties are used
in the style sheets defined throughout this chapter and later as properties of the style
object used with JavaScript The Web Design Group provides a complete listing of this
information at http://www.htmlhelp.com/reference/css/properties.html.
E X P L A N A T I O N
1 Three selectors, h1, h2, and h3, are grouped together The declaration block
en-closed in curly braces sets the color property to blue Whenever any one of the h1,
h2, or h3 elements is used in the document, its text will be blue
2 The declaration block for the h1 selector consists of a group of properties and
val-ues to further define the font style for this heading
3 The font property, in this example, groups the font values as a list, rather than
cre-ating individual property/value pairs as done on line 2
4 Now the h1 tag is tested to see if the style was applied, and it is!
5 The style for the h2 tag is tested and it has been applied.
6 The only style set for the h3 tag is a blue font, and that’s all we get, as shown in
Figure 14.2
Figure 14.2 Grouping selectors and declarations for h1, h2, and h3 HTML elements.