Deitel & Associates, Inc. Logo

Back to
digg.png delicious.png blinkit.png furl.png
Internet & World Wide Web How to Program, 3/e
Internet & World Wide Web How to Program, 3/e

© 2004
pages: 1420

Amazon logo

Our prior CSS tutorial introduced CSS, inline CSS styles and embedded style sheets. In this tutorial, you'll learn how conflicts are resolved when multiple styles collide. We'll then demonstrate how to place your CSS styles in a separate file and link them to a Web page--a commonly used technique for sharing styles to provide a consistent look-and-feel throughout your Web site. This tutorial is intended for people who are familiar with basic HTML and have read our prior CSS tutorial.
Download the Code Examples
[Note: This tutorial is an excerpt (Sections 6.4 and 6.5) of Chapter 6, Cascading Style Sheets, from our textbook Internet & World Wide Web How to Program, 3/e. This tutorial may refer to other chapters or sections of the book that are not included here. Permission Information: Deitel, Harvey M. and Paul J., INTERNET & WORLD WIDE WEB HOW TO PROGRAM, 3/E, 2004, pp.145-151. Electronically reproduced by permission of Pearson Education, Inc., Upper Saddle River, New Jersey.]
6.4   Conflicting Styles (Continued)
Line 14 applies property text-decoration to all a elements whose class attribute is set to nodec. The text-decoration property applies decorations to text within an element. By default, browsers underline the text of an a (anchor) element. Here, we set the text-decoration property to none to indicate that the browser should not underline hyperlinks. Other possible values for text-decoration include overline, line-through, underline and blink. [Note: blink is not supported by Internet Explorer.] The .nodec appended to a is an extension of class styles; this style will apply only to a elements that specify nodec in their class attribute.
Portability Tip 6.1
To ensure that your style sheets work in various Web browsers, test them on all the client Web browsers that will render documents using your styles.
Lines 16-18 specify a style for hover, which is a pseudoclass. Pseudoclasses give the author access to content not specifically declared in the document. The hover pseudoclass is activated dynamically when the user moves the mouse cursor over an element. Note that pseudoclasses are separated by a colon (with no surrounding spaces) from the name of the element to which they are applied.
Common Programming Error 6.1
Including a space before or after the colon separating a pseudoclass from the name of the element to which it is applied is an error that prevents the pseudoclass from being applied properly.
Lines 20-21 declare a style for all em elements that are children of li elements. In the screen output of Fig. 6.3, note that Monday (which line 33 contains in an em element) does not appear in bold red, because the em element is not in an li element. However, the em element containing with mushrooms (line 46) is nested in an li element; therefore, it is formatted in bold red.
The syntax for applying rules to multiple elements is similar. For example, to apply the rule in lines 20-21 to all li and em elements, you would separate the elements with commas, as follows:
li, em { color: red; font-weight: bold }
Lines 25-26 specify that all nested lists (ul elements that are descendants of ul elements) are to be underlined and have a left-hand margin of 15 pixels. A pixel is a relative-length measurement-it varies in size, based on screen resolution. Other relative lengths are em (the so-called M-height of the font, which is usually set to the height of an uppercase M), ex (the so-called x-height of the font, which is usually set to the height of a lowercase x) and percentages (e.g., margin-left: 10%). To set an element to display text at 150% of its default text size, the author could use the syntax
font-size: 1.5em
Other units of measurement available in CSS are absolute-length measurements-i.e., units that do not vary in size based on the system. These units are in (inches), cm (centimeters), mm (millimeters), pt (points; 1 pt=1/72 in) and pc (picas-1 pc = 12 pt).
Good Programming Practice 6.1
Whenever possible, use relative-length measurements. If you use absolute-length measurements, your document may not be readable on some client browsers (e.g., wireless phones).
In Fig. 6.3, the entire list is indented because of the 75-pixel left-hand margin for top-level ul elements. However, the nested list is indented only 15 pixels more (not another 75 pixels) because the child ul element's margin-left property (in the ul ul rule in line 25) overrides the parent ul element's margin-left property.
Page 1 | 2 | 3 | 4

Check Out Our Other CSS Tutorials
Introduction to Cascading Style Sheets (CSS)

Return to Tutorial Index