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

This tutorial focuses on the presentation of Web-page elements using a technology called Cascading Style Sheets (CSS). CSS allows Web-page authors to specify the presentation (e.g., fonts, spacing, margins, etc.) separately from the Web page's structure (e.g., section head-ers, body text, links, etc.). Separating structure from presentation simplifies maintaining and modifying a Web page's layout. The first part of this tutorial demonstrates inline CSS styles in which styles are placed directly in the Web page elements. We then place these styles into an embedded style sheet, to separate the style definitions from the content. In a subsequent tutorial, you'll learn how to place the styles in a separate file and link them to a Web page. This technique allows you to easily use the same styles in many different pages to provide a uniform look-and-feel across a Web site. This tutorial is intended for people who are familiar with basic HTML.
Download the Code Examples
[Note: This tutorial is an excerpt (Sections 6.2 and 6.3) 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.141-145. Electronically reproduced by permission of Pearson Education, Inc., Upper Saddle River, New Jersey.]
6.3   Embedded Style Sheets (Continued)
The style element (lines 13-24) defines the embedded style sheet. Styles placed in the head apply to matching elements wherever they appear in the entire document. The style element's type attribute specifies the Multipurpose Internet Mail Extensions (MIME) type that describes a file's content. CSS documents use the MIME type text/css. Other MIME types include image/gif (for GIF images) and text/javascript (for the JavaScript scripting language, which we discuss in Chapters 7-12).
The body of the style sheet (lines 15-22) declares the CSS rules for the style sheet. We declare rules for em (lines 15-16), h1 (line 18) and p (line 20) elements. When the browser renders this document, it applies the properties defined in these rules to every element to which the rule applies. For example, the rule in lines 15-16 will be applied to all em elements (in this example, there is one in line 43). The body of each rule is enclosed in curly braces ({ and }).
Line 22 declares a style class named special. Style classes define styles that can be applied to any type of element. In this example, we declare class special, which sets color to blue. We can apply this style to elements of any type, whereas the other rules in this style sheet apply only to specific element types (i.e., em, h1 or p). Style class declarations are preceded by a period. We will discuss how to apply a style class momentarily.
CSS rules in embedded style sheets use the same syntax as inline styles; the property name is followed by a colon (:) and the value of the property. Multiple properties are separated by semicolons (;). In the rule for em elements, the color property specifies the color of the text, and property background-color specifies the background color of the element.
The font-family property (line 18) specifies the name of the font to use. In this case, we use the arial font. The second value, sans-serif, is a generic font family. Not all users have the same fonts installed on their computers, so Web-page authors often specify a comma-separated list of fonts to use for a particular style. The browser attempts to use the fonts in the order they appear in the list. Many Web-page authors end a font list with a generic font family name in case the other fonts are not installed on the user's computer. In this example, if the arial font is not found on the system, the browser instead will display a generic sans-serif font, such as helvetica or verdana. Other generic font families include serif (e.g., times new roman, Georgia), cursive (e.g., script), fantasy (e.g., critter) and monospace (e.g., courier, fixedsys).
The font-size property (line 20) specifies a 14-point font. Other possible measurements in addition to pt (point) are introduced later in the chapter. Relative values- xx-small, x-small, small, smaller, medium, large, larger, x-large and xx-large-also can be used. Generally, relative values for font-size are preferred over point sizes because an author does not know the specific measurements of the display for each client. Relative font-size values permit more flexible viewing of Web pages. For example, a user may wish to view a Web page on a handheld device with a small screen. Specifying an 18-point font size in a style sheet will prevent such a user from seeing more than one or two characters at a time. However, if a relative font size is specified, such as large or larger, the actual size is determined by the browser that displays the font. Using relative sizes also makes pages more accessible to users with disabilities. Users with impaired vision, for example, may configure their browser to use a larger default font, upon which all relative sizes are based. Text that the author specifies to be smaller than the main text still displays in a smaller size font, yet it is clearly visible to each user.
Line 30 uses attribute class in an h1 element to apply a style class-in this case class special (declared as .special in the style sheet). When the browser renders the h1 element, note that the text appears on screen with the properties of both an h1 element (arial or sans-serif font defined in line 18) and the .special style class applied (the color blue defined in line 22).
The formatting for the p element and the .special class are applied to the text in lines 42-49. All the styles applied to an element (the parent or ancestor element) also apply to the element's nested elements (child or descendant elements). The em element nested in the p element in line 43 inherits the style from the p element (namely, the 14-point font size in line 20), but retains its italic style. The em element has its own color property, so it overrides the color property of the special class. We discuss the rules for resolving these conflicts in the next section.
Page 1 | 2 | 3
Return to Tutorial Index