Saturday 13th of February 2016 07:37:53 AM

Book Home

monitors (and will be tough to read even on most printouts).

You're probably thinking to yourself, "Ha! How dumb do you have to be to shrink text in lists like that?" True, it's easy to spot this with lists. However, think about how most of your pages are structured (with nested tables) and then consider this rule:

BODY {font-size: 12pt;}
TD {font-size: 80%;}
Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: U

U element: 4.1.6. Text Decoration
UA (see user agent)
underlining: 4.1.6. Text Decoration
changing color of: Weird decorations
removing from hyperlinks: 4.1.6. Text Decoration
turned off by browsers: Weird decorations
Uniform Resource Identifier (URI): 3.5. CSS2 Units
Uniform Resource Locators (see URLs)
units: 11.1.3. Case 3: Putting a Magazine Article Online
(see also length units; CSS2 units)
for aural style sheets: 3.5. CSS2 Units
avoiding mixing: 11.1.3. Case 3: Putting a Magazine Article Online
color: 3.6. Summary
universal selector: Universal selector
unordered lists: 7.7.1. Types of Lists
unvisited anchors: 2.4.1. Pseudo-Class Selectors
uppercase text: 4.1.5. Text Transformation
upright text: 5.4.1. Fonts with Style
URI (Uniform Resource Identifier): 3.5. CSS2 Units
URLs (Uniform Resource Locators): 3.4. URLs
HREF attribute and: LINK attributes
referring to in style sheets: 3.4. URLs
specifying for images: 6.2.1. Background Images
user agent (UA): 2.2.2. Grouping Declarations
2.2.2. Grouping Declarations
(see also browsers)
users, selecting alternate style sheets: Alternate style sheets

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

REL stands for "relation," and in this case, the relation is "stylesheet." TYPE is always set to text/css. This value describes the type of data that is to be loaded using the LINK tag. That way, the web browser knows that the style sheet is a CSS style sheet, a fact that will determine how the browser deals with the data it imports. After all, there may be other style languages in the future, so it will be important to say which language you're using.simplest case for doing so:

H1 {margin-bottom: 0;}P {margin-top: 0;}

This is, after all, one correct way to eliminate the space betweensucceeding elements. Navigator 4.x, however, will display theelements with the usual blank line between them, as you can see inFigure 7-26. This is because it's adding thezero values to its own default margins.

shows the difference between tiling from the center of theBODY, and from its top left corner.

Figure 6-51

Figure 6-51. The difference between starting a repeat from top left (left) and centering it (right)

Note the differences along the edges of the browser window. When thebackground repeats from the center, the grid is centered within theviewport, resulting in consistent "clipping" along theedges. The variations may seem subtle, but the odds are thatyou'll have reason to use both approaches at some point in yourdesign career. hexadecimal and RGB values.

Figure 7-43 shows us varying shades of gray for borders. Thanks to the grayscale nature of this book, I've been sticking mostly to shades of gray, but any color could be used. If you wanted an H1 with a red, green, blue, and yellow border, it's this easy:

As previously discussed, if no colors are defined, then the default color is the foreground color of the element. Thus, the following set percentage values for the padding of an element. Percentages are computed in relation to the width of the parent element, so they can change if the parent element's width changes in some way. For example, assume the following, which is illustrated in Figure 7-59:

P {padding: 10%; background-color: silver;}
<DIV STYLE="width: 200px;">
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its padding will be 10% of the width of the paragraph's parent element.
Given the declared width of 200 pixels, the padding will be 20 pixels on