Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 30th of September 2014 05:48:48 PM

10.9. Summary

CSS2 obviously covers a lot of ground, and exploring it in detail would probably have added at least four more chapters to this book, not to mention dramatically bulking up some of the chapters that already exist. However, since so little of CSS2 has actually been implemented at this writing, we felt it was better to provide an overview that was light on details. After all, the specification may change as implementations reveal flaws, and we'd rather stick shows the difference between tiling from the center of the BODY, 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 the background repeats from the center, the grid is centered within the viewport, resulting in consistent "clipping" along the edges. The variations may seem subtle, but the odds are that you'll have reason to use both approaches at some point in your design career. to describing things that are fairly reliable.

For quick reference purposes, Table 10-1 gives a quick summary of everything new in CSS2.

Table 10-1. New Properties in CSS2

New Properties in CSS2

text-shadow
font-size-
adjust
font-stretch
unicode-bidi
cursor
outline
outline-color
outline-style
outline-width
content
quotes
counter-reset
counter-increment
marker-offset
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
position
direction
top
right
bottom
left
z-index
min-width
max-width
min-height
max-height
overflow
clip
visibility
page-break-before
page-break-after
page-break-inside
orphans
widows
size
marks
border-collapse
border-spacing
table-layout
border-spacing
empty-cells
caption-side
speak-header-cell
volume
speak
pause-before
pause-after
pause
cue-before
cue-after
cue
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-rate
speak-numeral
speak-time

New Pseudo-Classes and Pseudo-Elements in CSS2

:hover
:left
:right
:first
:before
:after

New @-rules in CSS2

@media
@font-face
@page

Table 10-2. New Values in CSS2

All Properties

inherit

The display Property

run-in
compact
marker
table
inline-table
table-row-group
table-column-group
table-header-group
table-footer-group
table-row
table-cell
table-caption 

The font Property

caption
icon
menu
message-box
small-caption
status-bar

The list-style-type Property

decimal-leading-zero
hebrew
georgian
armenian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
lower-greek

The color values

active-border
active-caption
app-workspace
background
button-face
button-highlight
button-text
caption-text
gray-text
highlight
highlight-text
inactive-border
inactive-caption
info-background
info-text
menu
menu-text
scrollbar
three-d-dark-shadow
three-d-face
three-d-highlight
three-d-lightshadow
three-d-shadow
window
window-frame
window-text

The vertical-align Property

length 


Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

the defaults for the relevant properties are filled in automatically. Thus, the following two are equivalent:

BODY {background: white url(yinyang.gif;}
BODY {background: white url(yinyang.gif) top left repeat scroll;}

What's even better, there are no required values for background -- as long as you have at least one value present, you can omit all the rest. Therefore, it's possible to set just the background color using the shorthand property, which is a very common practice:A, using styles like these:

DIV {position: relative;}
P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;
margin-left: auto;}
P.B {position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;
margin-top: auto;}

This is an important point to always keep in mind: only positioned elements establish containing blocks for their descendant elements. I know this has come up before, but it's so fundamental that it

P {margin: 10%;}<DIV STYLE="width: 200px;"><P>This paragraph is contained within a DIV which has a width of 200 pixels,so its margin will be 10% of the width of the paragraph's parent (the DIV).Given the declared width of 200 pixels, the margin will be 20 pixels onall sides.</P></DIV><DIV STYLE="width: 100px;"><P>This paragraph is contained within a DIV with a width of 100 pixels,
VGA colors, and
browsers are supposed to generate colors that at least come close to
matching those original 16. They may be a fairly motley collection of
colors, but they're what we have.

So let's say we want all first-level headings to be maroon. The best declaration would be:

H1 {color: maroon;}

Simple, straightforward, and difficult to forget. It doesn'telement is contained within it, even though this results in a greatdeal of extra blank space within the parent element.

A related topic is the subject of backgrounds and their relationshipto floated elements that occur earlier in thedocument, which was also discussed in the previous chapter, as hasbeen illustrated in Figure 8-41.

Figure 8-41

Figure 8-41. Backgrounds "slide under" floated elements