.
1. Create the fade-in animation with the @keyframes rule:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Chapter 10: CSS Transforms, Transitions, and Animations
359
Tip
Animations
If you’re only animating a single property, it can be easier to read to if you put the keyframes on a
single line:
from
{ opacity: 0; }
However, if you’re animating many properties, it’s easier to read (and type) if you spread that code over
several lines:
from {
opacity: 0;
color: red;
width: 50%;
}
2. Apply that animation to the style for the
tag:
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
}
The animation-name property simply tells the browser which animation to use.
It’s the same name you provided when you created the animation in Step 1. The
animation-duration property sets the time the animation takes from start to
finish. In this example, these are the only two animation properties listed, but
you can (and probably will) put other non-animation properties in the style as
well. For example, in the real world, you’d probably add properties such as width,
background-color, border, and so on to this .announcement style.
Note
Putting the animation’s name inside of quotes—'fadeIn'—isn’t technically required, and it’s not
done in this example, but doing so can prevent any conflicts that might arise if you use a CSS keyword for an
animation name.
As with the @keyframes rule, each of the animation properties require vendor-specific
prefixes, so the above .announcement style would need to be written like the following to work in as many browsers as possible:
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-moz-animation-name: fadeIn;
-moz-animation-duration: 1s;
-o-animation-name: fadeIn;
-o-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
}
360
CSS3: The Missing Manual
It may seem a bit of a pain to define the animation in one place with the @keyframes
rule and then apply it in another (the style); however, once you’ve defined the
animation, you’re free to use it any number of times in any number of styles. For
example, you can create a generic fade-in type of animation and apply it to different elements. What’s more, you can control the animation independently for each
style—for example, make the header fade in over the course of half a second, but
make another page element fade in for five seconds.
Animations
In addition, you can apply more than one animation to an element. Say you create
one animation named fadeIn to make an element fade in and another animation
named blink to make the background color blink wildly. To apply both animations
to the element, you provide a comma-separated list of names like this:
animation-name: fadeIn, blink;
To give the animations separate timings, provide a list of comma-separated times:
animation-name: fadeIn, blink;
animation-duration: 1s, 3s;
The order in which you place the times applies to the animation name in the same
order. For example, the first animation gets the first time listed. In the above example,
fadeIn takes one second to complete, while blink takes three seconds.
You can apply several other useful animation properties as well. Read on.
Timing the Animation
You’ve already seen that the animation-duration property lets you control an animation’s length. As with transitions, you can use milliseconds (750ms, for example)
or seconds (.75s, for example) to specify the duration.
As with transitions, you can also set a specific type of timing function to control the
rate of the animation throughout that duration. For example, you can start the animation slowly and end it quickly, using a cubic-Bezier curve (page 349) or using one of
the built-in keyword methods: linear, ease, ease-in, ease-out, ease-in-out. These
work the same as the transition-timing-function property discussed on page 348.
You can use the animation-timing-function to control the entire animation or
just specific keyframes. For example, to apply the ease-out timing function for the
fadeIn animation presented earlier (Step 1 on page 359), add the timing function
to the .announcement style (Step 2 on page 360):
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-out;
}
However, you can also control the timing function for the animation between keyframes. For example, say you create an animation that has three keyframes with
three different background colors. The web browser will animate from one color
Chapter 10: CSS Transforms, Transitions, and Animations
361
Animations
to another and then to a third. Perhaps you want it to slowly move from the first to
the second color using a cubic Bezier curve, and then move in a uniform time from
the middle to the end. You can do that by adding two timing functions, one to the
first keyframe (which controls the animation from keyframe 1 to 2), and one at the
second keyframe to control the animation from keyframe 2 to 3:
@keyframes growAndGlow {
from {
background-color: yellow;
animation-timing-function: cubic-bezier(1, .03, 1, .115);
}
50% {
transform: scale(1.5);
background-color: blue;
animation-timing-function: linear;
}
to {
transform: scale(3);
background-color: red;
}
}
You can also delay the beginning of the animation using the property. It works the
same as the transition-delay property for transitions (page 351), and simply waits a
specific number of milliseconds or seconds before the animation begins. For example,
if you want to wait one second before the “announcement” div fades into view, you
can rewrite that .announcement class like this:
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 1s;
}
Adding a delay to an animation is a great way to catch people’s attention and add
surprise to a page.
Note
The animation-timing-function and animation-delay properties require vendor
prefixes, so make sure you add the appropriate -webkit-animation-timing-function, -mozanimation-timing-function, and so on to your animated styles.
362
CSS3: The Missing Manual
Finishing the Animation
With CSS, you can control a few additional aspects of an animation, including
whether to repeat an animation, which direction the animation runs if it’s animated
more than once, and also how the browser should format the element when the
animation is complete.
Animations
Transitions are animations that only run once—mouse over a button and the button
grows, for example. Animations, however, can run once, twice, or continuously, thanks
to the animation-iteration-count property. If you want an animation to run 10
times (fade in and out 10 times, perhaps), add this code to the style you’re animating:
animation-iteration-count: 10;
Normally a browser only plays the animation once, and if that’s all you’re after, then
leave off this iteration count property. If you want the animation to play continuously, the animation-iteration-count property accepts one keyword: infinite.
So to run the fadeIn animation an infinite number of times on the announcement
div, you can create this style:
.announcement {
animation-name: fadeIn;
animation-duration: .25s;
animation-iteration-count: infinite;
}
That, however, would annoy your visitors to no end, so please don’t do it. However,
you could use a style like this for a simple “pulsing” effect where a “sign up today”
button gently glows (by animating the box-shadow property discussed on page 210).
Normally, when an animation runs more than once, a web browser literally starts
the animation over from the beginning. So if you animated a background color from
yellow to blue and repeated it twice, the browser would show a yellow box turning
blue, and then suddenly the yellow box would return and then animate to blue once
again. This effect can be pretty jarring. In this case, it would look better if, for the
second time through the animation, the browser simply reversed the effect. That’s
how transitions work: for example, when you mouse over an element, the browser
animates the transition from the regular state to the rollover state. When you move
the mouse off the element, the browser simply reverses the animation to return to
the regular state. To make an animation move forward on odd runs and backward
on even runs, use the animation-direction property and the alternate keyword.
For example, to make an element fade out and then back in again, you can create
an animation called fadeOut, like this:
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
Chapter 10: CSS Transforms, Transitions, and Animations
363
Animations
Then, play that animation twice, reversing its direction on the second time:
.fade {
animation-name: fadeOut;
animation-duration: 2s;
animation-iteration-count: 2;
animation-direction: alternate;
}
This code tells the web browser to run the fadeOut animation on any element with
the class of fade. The animation should run for two seconds and then repeat. Because of the alternate value for animation-direction, the animation will fade out
the first time (go from totally opaque—an opacity of 1—to invisible—an opacity of
0), but will run backwards the second time (from 0 to 1 opacity), which makes it
fade back into view.
Tip To have an animation run a number of times but end up back at the beginning state, use an even number
of iterations and set the animation-direction property to alternate.
No matter how many times you have a web browser run an animation, once the
animation is completed, the browser displays the animated element in its original,
pre-animation state. For example, say you animate an image so it slowly grows to
twice its size. Once the animation is completed, the web browser snaps the image
back down to its original size, creating a jarring visual effect. Fortunately, you can
tell the browser to keep the animated element formatted the same as when the
animation ended by setting the animation-fill-mode property to forwards.
animation-fill-mode: forwards;
Apply this property to the element you’re animating, along with the animation-name,
animation-duration, and other animation properties.
Animation Shorthand
As you can see, there are a lot of animation properties, and writing all of them out in
addition to all of the vendor-prefixed versions is a recipe for carpal tunnel syndrome.
While you still need vendor-prefixed versions, you can simplify things by using
the animation shorthand property. This single property combines animation-name,
animation-duration, animation-timing-function, animation-iteration-count,
animation-direction, animation-delay, and animation-fill-mode into a single
property. For example, you can take this code:
.fade {
animation-name: fadeOut;
animation-duration: 2s;
animation-timing-function: ease-in-out;
364
CSS3: The Missing Manual
animation-iteration-count: 2;
animation-direction: alternate;
animation-delay: 5s;
animation-fill-mode: forwards;
Animations
}
And rewrite it like this:
.fade {
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards;
}
That’s one line of code instead of seven! You should list the property values in the
order used above: name, duration, timing function, count, direction, delay, and fillmode. In addition, make sure each value is separated by a space. Only the name
and duration are actually required. The other values are optional.
If you want to apply more than one animation to an element, simply use commaseparated lists of animation properties. For example, to apply two animations (say
fadeOut and glow) to the .fade style, write this:
.fade {
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
}
Of course, in real usage you’d need to use vendor prefixes as well:
.fade {
-webkit-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
-moz-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
-o-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
}
In general, you should opt to use the animation shorthand—it’s much more concise
and gentler on your fingers and the keyboard.
Pausing an Animation
CSS3 includes another animation property—animation-play-state—to control an
animation’s playback. It accepts only one of two keywords: running or paused. To
pause an animation, simply apply this declaration to a style:
animation-play-state: paused;
Chapter 10: CSS Transforms, Transitions, and Animations
365
Tutorial
There’s only one way to really apply that using CSS, however—a pseudo-class. As
with transitions, you need some kind of trigger to pause an animation. One way to
do this is to pause any animation when a visitor mouses over the animation. Here’s
an example using the .fade class style:
.fade {
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
}
This code runs two animations—fadeOut and glow—on any element with the fade
class applied to it. Say you want to let visitors pause this animation simply by mousing over it. You’d only need to add one more style:
.fade:hover {
animation-play-state: paused;
}
Of course, you’ll need all the vendor prefixed versions as well. A more powerful way
to pause an animation would be to dynamically apply the animation-play-state
property to the element using JavaScript. In this way, you can create a complex
animation and add a Pause button that pauses the animation when clicked. See the
box on page 351 for more on JavaScript and CSS animations.
Animating on Hover
So far, the animations you’ve seen here would all run when the page loads. You have
a few other options, including several pseudo-classes and using JavaScript, to trigger
a CSS animation. The most common pseudo-class for animation is :hover. With it,
you can run an animation when a visitor mouses over any element; for example, you
can make a logo do fancy gymnastics, move off the page, and then move back again.
To animate an element when a visitor’s mouse hovers over it, start by creating an
animation with the @keyframes rule (Step 1 on page 359). Then, create a :hover
pseudo-class for whatever element you wish to animate. In that style, you simply
add the animation properties (Step 2 on page 360). Now the animation runs only
when the visitor hovers over the element.
Tutorial
In this exercise, you’ll add transformations, animation, and transitions to a banner.
To get started, download the tutorial files from this book’s companion website at
www.sawmac.com/css3. Click the tutorial link and download the files. All the files
are enclosed in a zip archive, so you need to unzip them first. (You’ll find detailed instructions on the website.) The files for this tutorial are contained inside the 10 folder.
366
CSS3: The Missing Manual
1. In a text editor, open 10 →banner.html.
The page includes a banner with a logo graphic, headline, and set of navigation buttons (see Figure 10-9). First, you’ll add a transformation so that when
a visitor mouses over a button it scales up in size.
Tutorial
Figure 10-9
A normal, static banner
just waiting to come to life
with animation, transformations, and transitions.
2. Locate the opening and closing
This targets IE 7 in particular and won’t apply to any earlier version. However, you
sometimes want to include other versions. For example, you might create a style
sheet that applies to Internet Explorer 6, 7, and 8. In this case, you can use lte, which
stands for “less than or equal to,” so lte IE 8 means “if this browser is version 8
or earlier of Internet Explorer”:
Add any conditional comments after any other linked style sheets. Most IE hacks
tend to redefine styles already present in the style sheet—styles that work for other
browsers. And due to the nature of the cascade, rules defined later in a page can
override earlier defined styles. To make sure your redefined IE-only styles successfully take hold in Internet Explorer, they should appear after any other style sheets
attached to the page.
Here’s the code you might use to link: a style sheet for all browsers, a style sheet
just for IE 8, and a style sheet for IE 7 and earlier:
Note
For more information on Internet Explorer’s conditional comments, visit the source: http://msdn.
microsoft.com/en-us/library/ms537512(VS.85).aspx.
560
CSS3: The Missing Manual
Part
Appendixes
Appendix A:
CSS Property Reference
Appendix B:
CSS Resources
5
Appendix
A
CSS Property Reference
M
astering Cascading Style Sheets involves knowing how to use a large number
of CSS properties that control the appearance of text, images, tables, and
forms. To help you in your quest, this appendix gives you a summary of common properties and values you’ll use to create your own styles. This list covers nearly
all of the CSS 2.1 standard properties—the ones that most web browsers support—as
well as a handful of the most useful and commonly supported CSS3 properties.
Note The latest CSS specification is really quite large. In fact, to better manage the growth of CSS, the W3C
split CSS into many modules—each module describes a particular property or set of related properties. For full
details straight from the horse’s mouth, visit the latest CSS specifications from the World Wide Web Consortium
at www.w3.org/Style/CSS/current-work.
CSS Values
Every CSS property has a corresponding value. The color property, which formats
font color, requires a color value to specify which color you want to use. The property
color: #FFFFFF; creates white text. Different properties require different types of
values, but they come in four basic categories: colors, lengths and sizes, keywords,
and URLs.
Colors
You can assign colors to many different properties, including those for font, background, and borders. CSS provides several different ways to specify color.
563
CSS Values
Keywords
A web color keyword is simply the name of the color, like white or black. There
are currently 17 recognized web color keywords: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Some browsers accept more keywords, and CSS3 promises to offer many more
in the future: for one example, RGBA color, see page 155. You can read a lot more
about CSS3 at www.w3.org/TR/css3-color.
RGB values
Computer monitors create colors using a mixture of red, green, and blue light. These
RGB values can create (nearly) the full spectrum of color. Almost every design, illustration, and graphics program lets you specify colors, using RGB, so it’s easy to
transfer a color from one of those programs to a CSS property. CSS represents RGB
values in several ways:
• Hex values. The method most commonly used on the Web for identifying color,
hex color values consist of three two-character numbers in the hexadecimal
(that is, base 16) system. #FF0033 represents an RGB value composed of red
(FF, which equals 255 in normal, base 10 numbers), green (00), and blue (33).
The # tells CSS to expect hex numbers ahead, and it’s required. If you leave off
the #, a web browser won’t display the correct color.
Tip
If all three two-digit values are repeated pairs of digits, you can shorten the hex value by using just the
first number of each pair. For example, #361 means the same thing as #336611.
• RGB percentages. You can also specify a color using percentage values, like this:
rgb(100%, 0%, 33%). You can get these numbers from image-editing and design
programs that can define colors by using percentages (which is most of them).
• Integer values. Finally, you can use integer RGB values to specify a color. The
format is similar to the percentage option, but you use a number from 0 to 255
to indicate each color: rgb(255, 0, 33).
• RGBA. RGBA adds transparency to the mix. That is, you can make the color
see-through so underlying background colors, images, or text show through.
You add a value of 0 (completely invisible) to 1 (totally opaque) to the end of an
RGB color. You can use either the percentage or decimal values for the colors,
but only use decimal values for the transparency. For example, both of these
creates a middle gray color that’s 50 percent transparent:
rgba(50%,50%,50%,.5)
rgba(122,122,122,.5)
564
CSS3: The Missing Manual
• HSL stands for hue, saturation, and lightness (also sometimes labeled luminance). It’s yet another way to specify color. It’s not supported by Internet
Explorer 8 or earlier, but works in all other browsers. If you’re used to RGB or
Hex colors, you may find the HSL syntax is a bit unusual. Here’s an example of
a bright red color:
CSS Values
hsl(0, 100%, 50%);
The first number (hue) is a degree value from 0 to 360 representing the spectrum of colors in a color wheel, with 0 and 360 both representing red and 180
representing green. The second number is saturation, or how pure the color is,
specified in a percentage from 0% (dull grey) to 100% (vibrant). The last value
is lightness and it’s also specified as a percentage from 0% (completely black)
to 100% (completely white). As with RGB color, there is a version of HSL that
supports transparency, called HSLA: hsla(0, 100%, 50%, .5).
It doesn’t matter which method you use—they all work. For consistency, you may
want to pick one way of specifying RGB values and stick with it. However, using
keywords like white and black can be quick and convenient. The Windows and Mac
operating systems both have color pickers that let you find the perfect color from
a palette of millions, and then show you the RGB value. Alternatively, you can use
this free online color picker: www.ficml.org/jemimap/style/color/wheel.html. Or for
more advanced color picking (including the ability to create and save a palette of
colors), check out http://kuler.adobe.com.
Lengths and Sizes
CSS provides many different ways to measure the size of type, the width of a box,
or the thickness of a borderline. To indicate type size, you can use inches, picas,
points, centimeters, millimeters, em-heights, ex-heights, pixels, and percentages.
However, even though there are a lot of options, most don’t apply to the world of
onscreen display, for reasons discussed on page 155. You really need to think about
these three only—pixels, ems, and percentages.
Pixels
A pixel is a single dot on a computer screen. Pixels give you a consistent method
of identifying lengths and font sizes from computer to computer: 72 pixels on one
monitor is 72 pixels on another monitor. That doesn’t mean the actual, real-world
length is the same for everyone, though. Since people set their monitors to different resolutions—800 x 600, 1024 x 768, 1600 x 1200, or whatever—72 pixels may
take up 1 inch on one monitor, but only half an inch for someone else. Nevertheless,
pixels give you the most consistent control over presentation.
Note
There’s just one drawback to using pixels: Folks using Internet Explorer 6 or earlier can’t resize any
type that’s sized using pixels. If your text is too small for someone’s eyes, the visitor won’t be able to enlarge it
to make it more readable. (See page 158 for more on pixel measurements.)
Appendix A: CSS Property Reference
565
CSS Values
Ems
Originally from the typographic world, an em is a unit that represents the height of
the capital letter M for a particular font. In web pages, 1em is the height of the web
browser’s base text size, which is usually 16 pixels. However, anyone can change that
base size setting, so 1em may be 16 pixels for one person, but 24 pixels in someone
else’s browser. In other words, ems are a relative unit of measurement.
In addition to the browser’s initial font-size setting, ems can inherit size information
from containing tags. A type size of .9em would make text about 14 pixels tall on
most browsers with a 16 pixel base size. But if you have a
tag with a font size of
.9ems, and then a tag with a font size of .9ems inside that tag, that
tag’s em size isn’t 14 pixels—it’s 12 pixels (16 x .9 x .9). So keep inheritance
in mind when you use em values.
Percentages
CSS uses percentages for many different purposes, like sizing text, determining
the width or height of an element, and specifying the placement of an image in the
background of a style, to name a few. Now, what you’re taking a percentage of varies from property to property. For font sizes, the percentage is calculated based on
the text’s inherited value. Say the general font size for a paragraph is 16 pixels tall.
If you created a style for one special paragraph and set its font size to 200%, that
text is displayed at 32 pixels tall. When applied to width, however, percentages are
calculated based on the width of the page or on the width of the nearest parent element. You specify a percentage with a number followed by the percent sign: 100%.
Keywords
Instead of color or size, many properties have their own specific values that affect how
the properties display and are represented by keywords. The text-align property,
which aligns text on screen, can take one of four keywords: right, left, center, and
justify. Since keywords vary from property to property, read the property descriptions that follow to learn the keyword appropriate to each property.
One keyword, however, is shared by all properties—inherit. This keyword lets
you force a style to inherit a value from a parent element. You can use the inherit
keyword on any property. This keyword gives you the power to make styles inherit
properties that aren’t normally inherited from parent tags. For instance, say you use
the border property to add a border around a paragraph. Other tags, such as
and , inside the tag don’t inherit this value, but you can force them to
do so with the inherit keyword:
em, strong {
border: inherit;
}
That way, the and tags display the same border value as their parent
tag. So the and elements of the paragraph each get their own
borders, as does the entire paragraph, so you’d end up with boxes within boxes (a
good reason why that property isn’t inherited normally). If you change the tag’s
566
CSS3: The Missing Manual
border value to a different color or thickness, the and tags inherit
that value and display the same type of border, too.
Text
Properties
Note The border property isn’t a very useful example, mainly because inherit isn’t a very useful
value. But this wouldn’t be a Missing Manual if it didn’t give you all the facts.
URLs
URL values let you point to another file on the Web. For example, the backgroundimage property accepts a URL—the path to the file on the Web—as its value, which
lets you assign a graphic file as a background for a page element. This technique
is handy for adding a tiling image in the background of a page or using your own
graphic for bulleted lists (see page 176).
In CSS, you specify n URL like this: url(images/tile.gif). A style that adds an image called tile.gif to the background of the page would look like this:
body { background-image: url(images/tile.gif); }
Unlike in HTML, in CSS, quotes around the URL are optional, so url("images/tile.
gif"), url('images/tile.gif'), and url(images/tile.gif) are equivalent.
Note The URL itself is just like the HTML href attribute used for links, meaning you can use an absolute URL
like http://www.missingmanuals.com/images/tile.gif, a root-relative path like /images/tile.gif, or a documentrelative URL like ../../images/tile.gif. See page 244 for the full story on these kinds of paths.
Text Properties
The following properties affect how text is formatted on a web page. Since most
of the properties in this category are inherited, you don’t necessarily have to apply
them to tags specifically intended for text (like the tag). You can apply these
properties to the
tag, so that other tags inherit and use the same settings.
This technique is a quick way to define an overall font, color, and so on for a page
or section.
color (inherited)
Sets the color of text. Since it’s inherited, if you set the color of the tag to
red, for example, all text inside of the body—and all other tags inside the
tag—is red, too.
• Values: any valid color value
• Example: color: #FFFF33;
Note
The preset link colors for the tag override color inheritance. In the above example, any links
inside the tag would still be standard hyperlink blue. See page 115 for ways to change preset link colors.
Appendix A: CSS Property Reference
567
Text
Properties
font (inherited)
This is a shortcut method for cramming the following text properties into a single
style declaration: font-style, font-variant, font-weight, font-size, line-height,
and font-family. (Read on for the individual descriptions.)
You must separate each value by a space and include at least font-size and fontfamily, and those two properties must be the last two items in the declaration. The
others are optional. If you don’t set a property, the browser uses its own preset
value, potentially overriding inherited properties.
• Values: Any value that’s valid for the specific font property. When including a
line height, add a slash followed by the line height after the font size like this:
1.25em/150%.
• Example: font: italic small-caps bold 1.25em/150% Arial, Helvetica,
sans-serif;
font-family (inherited)
Specifies the font the browser should use to display text. Fonts are usually specified
as a series of three to four options to accommodate the fact that a particular font
may not be installed on a visitor’s computer. See page 129.
• Values: A comma-separated list of font names. When a font has a space in its
name, surround that font name with quotes. The last font listed is usually a generic font type instructing browsers to choose a suitable font if the other listed
fonts aren’t available: serif, sans-serif, monotype, fantasy, or cursive.
• Example: font-family: "Lucida Grande", Arial, sans-serif;
Note
All browsers let you specify additional fonts that you either keep on your web server or your visitors’
browsers download from a web font service. See page 132 for a detailed description of using web fonts.
font-size (inherited)
Sets the size of text. This property is inherited, which can lead to some weird behaviors when using relative length measurements like percentages and ems.
• Values: Any valid CSS measurement unit (page 158), plus the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large, larger, and
smaller. Medium represents the web browser’s normal, preset font size, and
the other sizes are multiples of medium.
Each of the other options decreases or increases the size by a different factor.
While each size change is supposed to be a consistent increase or decrease
from the previous size, it isn’t. Basically, xx-small is the equivalent of 9 pixels
(assuming you haven’t adjusted the base font size in your browser); x-small is 10
pixels; small is 13 pixels; large is 18 pixels; x-large is 24 pixels; and xx-large is
32 pixels. Due to the uncertainty of how each browser handles these keywords,
many designers use pixels, ems, or percentages instead.
568
CSS3: The Missing Manual
Text
Properties
• Example: font-size: 1.25em;
font-style (inherited)
Makes text italic. Applied to italic text, it turns it back to plain text. The options
italic and oblique are functionally the same.
• Values: italic, oblique, normal
• Example: font-style: italic;
font-variant (inherited)
Makes text appear in small caps, like this: Special Presentation. The value normal
removes small caps from text already formatted that way.
• Values: small-caps, normal
• Example: font-variant: small-caps;
font-weight (inherited)
Makes text bold or removes bolding from text already formatted that way.
• Values: CSS actually provides 14 different font-weight keywords, but only a
couple actually work with today’s browsers and computer systems—bold and
normal.
• Example: font-weight: bold;
letter-spacing (inherited)
Adjusts the space between letters to spread out letters (adding spacing between
each) or cram letters together (removing space).
• Values: Any valid CSS measurement unit, though ems and pixels are most
common. For this property, percentages don’t work in most browsers. Use a
positive value to increase the space between letters and a negative value
to remove space (scrunch letters together). The value normal resets letterspacing to its regular browser value of 0.
• Examples: letter-spacing: -1px; letter-spacing: 2em;
line-height (inherited)
Adjusts space between lines of text in a paragraph (often called line spacing in
word-processing programs). The normal line height is 120 percent of the size of the
text (page 167).
• Values: Most valid CSS lengths (page 158), though ems and pixels and percentages are most common.
• Example: line-height: 200%;
Appendix A: CSS Property Reference
569
Text
Properties
text-align (inherited)
Positions a block of text to the left, right, or center of the page or container element.
• Values: left, center, right, justify (the justify option often makes text
difficult to read on monitors).
• Example: text-align: center;
text-decoration (inherited)
Adds lines above, under, and/or through text. Underlining is common with links, so
it’s usually a good idea not to underline text that isn’t a link. The color of the underline, overline, or strike-through line is the same as the font color of the tag being
styled. The property also supports a blink value that makes text flash off and on
obnoxiously (but most browsers ignore blink anyway).
• Values: underline, overline, line-through, blink, none. The none value turns
off all decoration. Use this to hide the underline that normally appears under
links. You can also add multiple decorations by listing the name of each type
(except none) separated by a space.
• Example: text-decoration: underline overline line-through;
text-indent (inherited)
Sets the indent size of the first line of a block of text. The first line can be indented
(as in many printed books) or outdented, so that the first line hangs off and over
the left edge of the rest of the text.
• Values: Any valid CSS measurement unit. Ems and pixels are most common;
percentages behave differently than with the font-size property. Here, percentages are based on the width of the box containing the text, which can be
the width of the entire browser window. So 50% would indent the first line half
of the way across the window. To outdent (hang the first line off the left edge),
use a negative value. This technique works well in conjunction with a positive
margin-left property, which indents the left side of the other lines of text a
set amount.
• Example: text-indent: 3em;
text-shadow (inherited)
Lets you add a drop shadow to any text.
• Values: Two measurement values (ems or pixels) for horizontal and vertical
offset, a value for the amount of blur applies to the text, and a color value. For
the horizontal offset, a negative number places the shadow to the left of the
text, a positive value to the right. For vertical offset, a negative number moves
the shadow above the text, and positive value places it below. Each value is
separated from the next by a space. You can also add multiple shadows by
adding additional shadow values separated by a comma.
570
CSS3: The Missing Manual
Text
Properties
• Examples:
text-shadow: -4px 4px 3px #999999;
text-shadow: -4px 4px 3px #999999
2px 3px 10px #000;
text-transform (inherited)
Changes the capitalization of text, so text appears in all uppercase letters, all lowercase, or only the first letter of each word capitalized.
• Values: uppercase, lowercase, capitalize, none. The none option returns the
text to whatever case is in the actual HTML code. If aBCDefg are the actual
letters typed in HTML, then none removes any other inherited case set by an
ancestor tag and displays aBCDefg onscreen.
• Example: text-transform: uppercase;
vertical-align
Sets the baseline of an inline element relative to the baseline of the surrounding contents. With it, you can make a character appear slightly above or below surrounding
text. Use this to create superscript characters like ™, ®, or ©. When applied to a table
cell, the values top, middle, bottom, and baseline control the vertical placement of
content inside the cell.
• Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, a
percentage value, or an absolute value (like pixels or ems). Percentages are
calculated based on the element’s line-height value.
• Examples:
vertical-align: top;
vertical-align: -5px;
vertical-align: 75%;
white-space
Controls how the browser displays space characters in the HTML code. Normally, if
you include more than one space between words—“Hello Dave”—a web browser
displays only one space—“Hello Dave.” You can preserve any white space exactly
as is in the HTML by using the pre value, which does the same as the HTML
tag. In addition, web browsers will split a line of text at a space, if the line won’t fit
within the window’s width. To prevent text from wrapping, use the nowrap value.
But the nowrap value makes all the paragraph’s text stay on one line, so don’t use
it with long paragraphs (unless you like the idea of making your visitors scroll endlessly to the right).
• Values: nowrap, pre, normal. Two other values—pre-line and pre-wrap—don’t
work in many browsers.
• Example: white-space: pre;
Appendix A: CSS Property Reference
571
List
Properties
word-spacing (inherited)
Works like the letter-spacing property (page 569), but instead of letters, it adjusts
space between words.
• Values: Any valid CSS measurement unit, though ems and pixels are most common; percentages don’t work in most browsers. Use a positive value to increase
the space between words and a negative value to remove space (scrunch words
together). The value normal resets word spacing to its regular browser value of 0.
• Examples: word-spacing: -1px; word-spacing: 2em;
List Properties
The following properties affect the formatting of bulleted lists ( ) and numbered
lists (). (See page 173 for more on using CSS with lists.)
list-style (inherited)
This property is a shorthand method of specifying the three properties listed next.
You can include a value for one or more of those properties, separating each by a
space. You can even use this property as a shortcut for writing a single property
and save a couple of keystrokes: list-style: outside, instead of list-styleposition: outside. If you specify both a type and an image, a web browser will
display the bullet type (disc, square, and so on) only if it can’t find the image. This
way, if the path to your custom bullet image doesn’t work, you don’t end up with a
bulletless bulleted list.
• Values: Any valid value for list-style-type, list-style-image, and/or liststyle-position.
• Example: list-style: disc url(images/bullet.gif) inside;
list-style-image (inherited)
Specifies an image to use for a bullet in a bulleted list.
• Values: A URL value or none.
• Example: list-style-image: url(images/bullet.gif);
Note
The background-image property does the custom bullet job just as well and offers more control
(see page 240).
list-style-position (inherited)
Positions the bullets or numbers in a list. These markers can appear outside of the
text, hanging off to the left, or inside the text (exactly where the first letter of the
first line normally begins). The outside position is how web browsers normally
display bullets and numbers.
572
CSS3: The Missing Manual
Padding,
Borders, and
Margins
• Values: inside, outside
• Example: list-style: inside;
list-style-type (inherited)
Sets the type of bullet for a list—round, square, roman numeral, and so on. You can
even turn an unordered (bulleted) list into an ordered (numbered) list by changing
the list-style-type property. Use the none option to completely remove bullets
or numbers from the list.
• Values: disc, circle, square, decimal, decimal-leading-zero, upper-alpha,
lower-alpha, upper-roman, lower-roman, lower-greek, none
• Example: list-style-type: square;
Padding, Borders, and Margins
The following properties control the space around an element, and let you add
border lines to a style.
box-shadow Adds a shadow around a box element.
• Values: An optional value—inset—adds a drop shadow inside an element, followed by four measurement values and a color. The first two measurement values
(ems or pixels) are for horizontal and vertical offset; the third value specifies
the amount of blur applied to the box; the fourth value, which is optional, adds
a “spread” to the shadow, making the shadow wider. For the horizontal offset,
a negative number places the shadow to the left of the box, a positive value to
the right. For vertical offset, a negative number moves the shadow above the
box, and positive value places it below. Each value is separated from the next
by a space. You can also add multiple shadows by adding additional shadows
values separated by a comma.
• Example:
box-shadow: -4px 4px 3px #999999;
box-shadow: inset 4px 4px 3px 5px #999999;
box-shadow: inset 4px 4px 3px 5px #999999
2px 2px 5px black;
border
Draws a line around the four edges of an element.
• Values: The width (thickness) of the border line in any valid CSS measurement
unit (except percentages).
You can also specify a style for the line: solid, dotted, dashed, double, groove,
ridge, inset, outset, none, and hidden. (See Figure 7-7 on page 203 for an
illustration of the different styles.) The none and hidden values do the same
thing—remove any border.
Appendix A: CSS Property Reference
573
Padding,
Borders, and
Margins
Finally, you can specify a color by using any valid CSS color type (a keyword
like green or a hex number like #33fc44).
• Example: border: 2px solid #f33;
border-radius
Rounds the corners of an element. Only has a visual effect if the element has a
border, background color, or image.
• Values: One, two, three, or four values (px, em, or %) that indicate the size of a
radius of a circle drawn at the corners of an element’s box. If you supply only
one value, it applies the same size rounded corner to all four corners; with two
values, the first specifies the top-left and bottom-right corners, while the second
indicates the top-right and bottom-left corner radii. If you use three values, the
first specifies the top-left corner; the second, both the top-right and bottom-left;
and the third, the bottom-right corner. With four values, each value applies in
order to the top-left, top-right, bottom-right, and bottom-left corner. You can
add a / followed by a second value to create an elliptical corner rather than a
perfectly circular one.
• Examples:
border-radius: .5em;
border-radius: 15px 10px 25px 5px;
border-radius: 15px / 5px;
border-top, border-right, border-bottom, border-left
Adds a border to a single edge. For example, border-top adds a border to the top
of the element.
• Values: same as for border.
• Example: border-left: 1em dashed red;
border-color
Defines the color used for all four borders.
• Values: Any valid CSS color type (a keyword like green or a hex number like
#33fc44).
• Example: border-color: rgb(255,34,100);
This property also supports a shorthand method, which lets you assign different
colors to each of the four borders.
• Values: Any valid CSS color type for each border: top, right, bottom, left. If you
include just two colors then the first color applies to the top and bottom, and
the second color to the left and right.
• Example: border-color: #000 #F33 #030 #438F3C;
574
CSS3: The Missing Manual
border-top-color, border-right-color, border-bottom-color,
border-left-color
Padding,
Borders, and
Margins
Functions just like the border-color property but sets color for only one edge. Use
these properties to override the color set by the border property. In this way, you
can customize the color for an individual edge while using a more generic border
style to define the basic size and style of all four edges.
• Values: See border-color.
• Example: border-left-color: #333;
border-style
Defines the style used for all four borders.
• Values: One of these keywords: solid, dotted, dashed, double, groove, ridge,
inset, outset, none, and hidden. See Figure 7-7 on page 203 for an illustration
of the different styles. The none and hidden values act identically—they remove
any border.
• Example: border-style: inset;
This property also supports a shorthand method, which lets you assign different
styles to each of the four borders.
• Values: One of the keywords (mentioned previously) for each border: top, right,
bottom, left. If you include just two keywords, then the first style applies to the
top and bottom and the second style to the left and right.
• Example: border-style: solid dotted dashed double;
border-top-style, border-right-style, border-bottom-style,
border-left-style
Functions just like the border-style property, but applies only to one edge.
• Values: See border-style.
• Example: border-top-style: none;
border-width
Defines the width or thickness of the line used to draw all four borders.
• Values: Any valid CSS measurement unit except percentages. The most common are ems and pixels.
• Example: border-width: 1px;
This property also supports a shorthand method, which lets you assign different
widths to each of the four borders.
Appendix A: CSS Property Reference
575
Padding,
Borders, and
Margins
• Values: Any valid CSS measurement unit (except percentages) for each border:
top, right, bottom, left. If you include just two values, then the first value sets
the width for the top and bottom border and the second value the width for
the left and right borders.
• Example: border-width: 3em 1em 2em 3.5em;
border-top-width, border-right-width, border-bottomwidth, border-left-width
Functions just like the border-width property but applies only to one edge.
• Values: See border-width.
• Example: border-bottom-width: 3em;
box-sizing
Dictates how a browser measures an element’s height and width. Normally, browsers combine the border, padding, and width properties to determine the amount
of screen space an element takes up. This system can be confusing, since you can
specify an element’s width to be 300 pixels, but if the element also has padding
and borders, the browser displays that element wider than 300 pixels onscreen.
• Values: content-box, padding-box, or border-box. The content-box option is the
normal way browsers do it. Padding-box tells a browser to include the padding
with the width and height values; border-box also includes the border width
and height in its calculations. For example, if you have a tag that you set
to 300 pixels width, with 20 pixels of padding and a 2-pixel border, a browser
will normally display that div in 344 pixels of screen space (300 + 20 + 20 + 2
+2); however, if you set the box-sizing property to padding-box, the browser
would display that div in 304 pixels of space (300 + 2 +2) because the padding
is considered part of that 300 pixels; the border-box setting would tell a browser
to simply make the div 300 pixels wide. The border-box option is commonly
used to make it easier to keep track of element widths. Unfortunately, Internet
Explorer 7 and earlier don’t understand it.
• Example: box-sizing: border-box;
outline
This property is a shorthand way to combine outline-color, outline-style, and
outline-width (listed next). An outline works just like a border, except the outline
takes up no space (that is, it doesn’t add to the width or height of an element), and
it applies to all four edges. It’s intended more as a way of highlighting something
on a page than as a design detail. Outline works in Firefox, Safari, Chrome, Opera,
and only version 8 or later of Internet Explorer.
• Values: The same as for border with one exception—see outline-color.
• Example: outline: 3px solid #F33;
576
CSS3: The Missing Manual
outline-color
Specifies the color for an outline (see outline).
Padding,
Borders, and
Margins
• Values: Any valid CSS color, plus the value invert, which merely reverses the
color the outline is sitting on. If the outline is drawn on a white background, the
invert value makes the outline black. Works just like border-color (page 574).
• Example: outline-color: invert;
outline-style
Specifies the type of line for the outline—dotted, solid, dashed, and so on.
• Values: Same as border-style (page 575).
• Example: outline-style: dashed;
outline-width
Specifies the thickness of the outline. Works just like border-width.
• Values: Any valid CSS measurement unit except percentages. The most common are ems and pixels.
• Example: outline-width: 3px;
padding
Sets the amount of space between the content, border, and edge of the background.
Use it to add empty space around text, images, or other content. (See Figure 7-1 on
page 194 for an illustration.)
• Values: Any valid CSS measurement unit, like pixels or ems. Percentage values
are based on the width of the containing element. A headline that’s a child of
the tag uses the width of the browser window to calculate a percentage
value, so a padding of 20 percent adds 20 percent of the window’s width. If the
visitor resizes his browser, the padding size changes proportionately. You can
specify the padding for all four edges by using a single value or set individual
padding sizes per edge using this order: top, right, bottom, left.
• Examples: padding: 20px; padding: 2em 3em 2.5em 0;
padding-top
Works just like the padding property, but sets padding for top edge only.
• Example: padding-top: 20px;
padding-right
Works just like the padding property, but sets padding for right edge only.
• Example: padding-right: 20px;
Appendix A: CSS Property Reference
577
Padding,
Borders, and
Margins
padding-bottom
Works just like the padding property, but sets padding for bottom edge only.
• Example: padding-bottom: 20px;
padding-left
Works just like the padding property, but sets padding for left edge only.
• Example: padding-left: 20px;
margin
Sets the amount of space between an element’s border and the margin of other
elements (see Figure 7-1 on page 194). It lets you add white space between two
elements—between one picture and another picture, or between a sidebar and the
main content area of a page.
Note
Vertical margins between elements can collapse. That is, browsers use only the top or bottom
margin and ignore the other, creating a smaller gap than expected (see page 198).
• Values: Any valid CSS measurement unit like pixels or ems. Percentage values
are based on the width of the containing element. A headline that’s a child of
the tag uses the width of the browser window to calculate a percentage
value, so a margin of 10% adds 10 percent of the window’s width to the edges
of the headline. If the visitor resizes his browser, the margin size changes. As
with padding, you specify the margin for all four edges using a single value, or
set individual margins in this order: top, right, bottom, left.
• Examples: margin: 20px; margin: 2em 3em 2.5em 0;
margin-top
Works just like the margin property, but sets margin for top edge only.
• Example: margin-top: 20px;
margin-right
Works just like the margin property, but sets margin for right edge only.
• Example: margin-right: 20px;
margin-bottom
Works just like the margin property, but sets margin for bottom edge only.
• Example: margin-bottom: 20px;
margin-left
Works just like the margin property, but sets margin for left edge only.
• Example: margin-left: 20px;
578
CSS3: The Missing Manual
Backgrounds
Backgrounds
CSS provides several properties for controlling the background of an element, including coloring the background, placing an image behind an element, and controlling
how that background image is positioned.
background
Provides a shorthand method of specifying properties that appear in the background
of an element, like a color, an image, and the placement of that image. It combines
the five background properties (described next) into one compact line, so you can
get the same effect with much less typing. However, if you don’t set one of the
properties, browsers use that property’s normal value instead. For example, if you
don’t specify how a background image should repeat, browsers will tile that image
from left to right and top to bottom.
• Values: The same values used for the background properties listed next. The
order of the properties isn’t important (except for positioning, as described
below), but usually follow the order of background-color, background-image,
background-repeat, background-attachment, background-position.
• Example: background: #333 url(images/logo.gif) no-repeat fixed left
top;
background-attachment
Specifies how a background image reacts when your visitor scrolls the page. The
image either scrolls along with the rest of the content or remains in place. You can
add a logo to the upper-left corner of a very long web page, using the backgroundattachment property’s fixed value, and make that image stay in the upper-left corner
even when the page is scrolled. (In Internet Explorer 6 and earlier, this property
works only for the tag.)
• Values: scroll or fixed. Scroll is the normal behavior: An image will scroll off
the screen along with text. Fixed locks the image in place.
• Example: background-attachment: fixed;
background-clip
This property limits the area in which a background image appears. Normally a
background image fills the entire area of an element including its borders, padding,
and content. However, you may want a background image to only appear behind the
padding area and exclude the borders—useful when you have a dotted or dashed
border, to keep the image from appearing in the gaps of the border. Likewise, you
might want to exclude the padding area so a tiled background appears only in the
content area, and a solid color in the padding area. This property is not supported
by Internet Explorer 8 or earlier.
Appendix A: CSS Property Reference
579
Backgrounds
• Values: border-box, padding-box, or content-box. The border-box option is the
normal method—placing an image behind the border, paddings, and content.
Padding-box keeps a background image in the padding area only, so it won’t
appear behind the border. Content-box places a background image in the
content area only, so it won’t appear in the padding area or behind the border.
• Examples:
background-clip: content-box;
background-clip: padding-box;
background-color
Adds a color to the background of a style. The background sits underneath the
border and underneath a background image, a fact to keep in mind if you use one
of the nonsolid border styles like dashed or dotted. In these cases, the background
color shows through the gaps between the dashes or dots.
• Values: Any valid color value (page 155).
• Example: background-color: #FFF;
background-image
Places an image into the background of a style. Other page elements sit on top of
the background image, so make sure that text is legible where it overlaps the image.
You can always use padding to move content away from the image, too. The image
tiles from left to right and top to bottom, unless you set the background-repeat
property as well. CSS3 lets you apply multiple background images (page 257).
• Values: The URL of an image. Can also include a browser-generated linear- or
radial-gradient (see page 260).
• Examples:
background-image: url(images/photo.jpg);
background-image: url(http://www.example.org/photo.jpg);
background-origin
Tells a browser where to place a background image in relationship to the border,
padding, and content of an element. This is most useful for a nonrepeating image,
since this property lets you better control the image’s position. This property is not
supported by Internet Explorer 8 or earlier.
• Values: border-box, padding-box, or content-box. The border-box option
is the normal method—placing an image in the top-left corner of the border.
Padding-box starts a background image in the padding area only, so it won’t
appear behind the border. Content-box places a background image in the
content area only, so it won’t appear in the padding area or behind the border.
However, if the image is tiled, you’ll still see the image behind the borders and
padding regardless, since this property only controls where the image starts.
580
CSS3: The Missing Manual
Use the background-clip property (page 252) to keep a tiled image from appearing behind borders or padding.
Backgrounds
• Example: background-origin: content-box;
background-position
Controls the placement of an image in the background of a page element. Unless
you specify otherwise, an image begins in the element’s top-left corner. If the image tiles, background-position controls the image’s start point (see backgroundrepeat). If you position an image in the center of an element, the browser puts the
image there and then tiles the image up and to the left and down and to the right.
In many cases, the exact placement of an image doesn’t cause a visible difference
in the background tiling, but it lets you make subtle changes to the positioning of
a pattern in the background.
• Values: Any valid CSS measurement unit, like pixels or ems, as well as keywords
or percentages. The values come in pairs, with the first being the horizontal
position, and the second being vertical. Keywords include left, center, and
right for horizontal positioning and top, center, and bottom for vertical. Pixel
and em values are calculated from the top-left corner of the element, so to
place a graphic 5 pixels from the left edge and 10 pixels from the top, you’d
use a value of 5px 10px.
Percentage values map one point on the image to one point in the background
of the element, calculated by the specified percentage from the left and top
edges of the image and the specified percentage from the left and top edges of
the element. 50% 50% places the point that’s 50 percent across and 50 percent
down the image on top of the point that’s 50 percent across and 50 percent
down the element. In other words, it puts the image directly in the middle of the
element. You can mix and match these values: If you want, use a pixel value for
horizontal placement and a percentage value for vertical placement.
• Examples: background-position: left top; background-position: 1em 3em;
background-position: 10px 50%;
background-repeat
Controls whether or how a background image repeats. Normally, background images
tile from the top-left to the bottom-right, filling the element’s entire background.
• Values: repeat, no-repeat, repeat-x, repeat-y. The repeat option is the normal
method—tiling left to right, top to bottom. No-repeat places the image a single
time in the background with no tiling. Repeat-y tiles the image top to bottom
only—perfect for adding a graphical sidebar. Repeat-x tiles the image from left to
right only, so you can add a graphical bar to an element’s top, middle, or bottom.
• Example: background-repeat: no-repeat;
Appendix A: CSS Property Reference
581
Page Layout
Properties
background-size
Lets you resize a background image scaling it up, down, or even distorting its
proportions.
• Values: You can use specific values in pixels, ems, or percentages or one of two
keywords: contain or cover. Contain forces the image to resize to completely
fit the entire element while still maintaining its aspect ratio. Cover forces the
width of the image to fit the width of the element and the height of the image
to fit the height of the element, which usually distorts the image by stretching
it or squishing it to fit within the element.
• Example:
background-size: 200px 400px;
background-size: contain;
Page Layout Properties
The following properties control the placement and size of elements on a web page.
bottom
This property is used with absolute, relative, and fixed positioning (see page 488).
When used with absolute or fixed positioning, bottom determines the position of
the bottom edge of the style relative to the bottom edge of its closest positioned
ancestor. If the styled element isn’t inside of any positioned tags, then the placement
is relative to the bottom edge of the browser window. You can use this property
to place a footnote at the bottom of the browser window. When used with relative
positioning, the placement is calculated from the element’s bottom edge (prior to
positioning).
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages. Percentages are calculated based on the width of the containing element.
• Example: bottom: 5em;
clear
Prevents an element from wrapping around a floated element. Instead, the cleared
element drops below the bottom of the floated element.
• Values: left, right, both, none. The left option means the element can’t wrap
around left-floated elements. Similarly, right drops the element below any
right-floated items. The both value prevents an element from wrapping around
either left- or right-floated elements. None turns the property off, so you use it
to override a previously set clear property. This trick comes in handy when a
particular tag has a style that drops below a floated element but you want the
tag to wrap in just one case. Create a more specific style to override the float
for that one tag.
582
CSS3: The Missing Manual
Page Layout
Properties
• Example: clear: both;
clip
Creates a rectangular window that reveals part of an element. If you had a picture
of your high-school graduating class, and the class bully was standing on the far
right edge of the photo, you could create a display area that crops out the image of
your tormentor. The full image is still intact, but the clipping area only displays the
bully free portion of it. The clip property is most effective when used with Java
Script programming to animate the clip. You can start with a small clipping area and
expand it until the full photo is revealed.
• Values: Coordinates of a rectangular box. Enclose the coordinates in parentheses
and precede them by the keyword rect, like so: rect(5px,110px,40px,10px);.
Here’s how the order of these coordinates works: The first number indicates the
top offset—the top edge of the clipping window. In this example, the offset is
5px, so everything in the first four rows of pixels is hidden. The last number is
the left offset—the left edge of the clipping window. In this example, the offset
is 10px, so everything to the left (the first 9 pixels of the element) is hidden.
The second number is the width of the clipping window plus the last number;
if the left edge of the clip is 10 pixels and you want the visible area to be 100
pixels, the second number would be 110px. The third number is the height of
the clipping region plus the top offset (the first number). So, in this example,
the clipping box is 35 pixels tall (35px + 5px = 40px).
• Example: clip: rect(5px,110px,40px,10px);
Note
Since the order of the coordinates is a little strange, most designers like to start with the first and
last numbers, and then compute the two other numbers from them.
display
Determines the kind of box used to display a web page element—block-level or inline
(page 44). Use it to override how a browser usually displays a particular element.
You can make a paragraph (block-level element) display without line breaks above
and below it—exactly like, say, a link (inline element).
• Values: block, inline, none. The display property accepts 17 values, most of
which have no effect in the browsers available today. Block, inline, and none,
however, work in almost all browsers. Block forces a line break above and below
an element, just like other block-level elements (like paragraphs and headers).
Inline causes an element to display on the same line as surrounding elements
(just as text within a
tag appears right on the same line as other text).
None makes the element completely disappear from the page. Then you can
make the element reappear with some JavaScript programming or the :hover
pseudo-class (see page 294). Some of the other properties work in a handful
of browsers (the most notable exceptions being Internet Explorer 7 and 6). You
Appendix A: CSS Property Reference
583
Page Layout
Properties
can use the table display properties to create some interesting page layouts,
as mentioned on page 387.
• Example: display: block;
float
Moves an element to the left or right edge of the browser window, or, if the floated
element is inside another element, to the left or right edge of that containing element.
Elements that appear after the floated element move up to fill the space to the right
(for left floats) or left (for right floats) and then wrap around the floated element.
Use floats for simple effects—like moving an image to one side of the page—or for
very complex layouts—like those described in Chapter 12.
• Values: left, right, none. To turn off floating entirely, use none: This comes in
handy when a particular tag has a style with a left or right float applied to it and
you want to create a more specific style to override the float for that one tag.
• Example: float: left;
height
Sets the height of the content area—the area of an element’s box that contains
content like text, images, or other tags. The element’s actual onscreen height is the
total of height, top, and bottom margins, top and bottom padding, and top and
bottom borders.
• Values: Any valid CSS measurement unit, such as pixels, ems, or percentages.
Percentages are calculated based on the height of the containing element.
• Example: height: 50%;
Note Sometimes, your content ends up taller than the set height—if you type a lot of text, for instance, or
your visitor increases text size in her browser. Browsers handle this situation differently: IE 6 (and earlier) simply
makes the box bigger, while other browsers make the content extend outside of the box.
left
When used with absolute or fixed positioning (page 410), this property determines
the position of the left edge of the style relative to the left edge of its closest
positioned ancestor. If the styled element isn’t inside of any positioned tags, then
the placement is relative to the left edge of the browser window. You can use this
property to place an image 20 pixels from the left edge of the browser window.
When used with relative positioning, the placement is calculated from the element’s
left edge (prior to positioning).
• Values: Any valid CSS measurement unit, such as pixels, ems, or percentages.
• Example: left: 5em;
584
CSS3: The Missing Manual
max-height
Sets the maximum height for an element. That is, the element’s box may be shorter
than this setting, but it can’t be any taller. If the element’s contents are taller than
the max-height setting, they overflow the box. You can control what happens to
the excess by using the overflow property. Internet Explorer 6 (and earlier) doesn’t
understand the max-height property.
Page Layout
Properties
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages.
Browsers calculate percentages based on the height of the containing element.
• Example: max-height: 100px;
max-width
Sets the maximum width for an element. The element’s box can be narrower than
this setting, but not wider. If the element’s contents are wider than the max-width
setting, they overflow the box, which you can control with the overflow property.
You mostly use max-width in liquid layouts (page 406) to make sure a page design
doesn’t become unreadably wide on very large monitors. This property doesn’t work
in Internet Explorer 6 (or earlier).
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages. Percentages are calculated based on the width of the containing element.
• Example: max-width: 950px;
min-height
Sets the minimum height for an element. The element’s box may be taller than
this setting, but it can’t be shorter. If the element’s contents aren’t as tall as the
min-height setting, the box’s height shrinks to meet the min-height value. Internet
Explorer 6 (and earlier) doesn’t recognize this property.
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages.
Percentages are based on the containing element’s height.
• Example: min-height: 20em;
min-width
Sets the minimum width for an element. The element’s box may be wider than this
setting, but it can’t be narrower. If the element’s contents aren’t as wide as the minwidth value, the box simply gets as thin as the min-width setting. You can also use
min-width in liquid layouts, so that the design doesn’t disintegrate at smaller window
widths. When the browser window is thinner than min-width, it adds horizontal scroll
bars. Internet Explorer 6 (and earlier) doesn’t understand this property.
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages.
Percentages are based on the containing element’s width.
• Example: min-width: 760px;
Appendix A: CSS Property Reference
585
Page Layout
Properties
Note
You usually use the max-width and min-width properties in conjunction when creating liquid
layouts. See Chapter 12.
overflow
Dictates what should happen to text that overflows its content area, like a photo
that’s wider than the value set for the width property.
• Values: visible, hidden, scroll, auto. Visible makes the overflowing content
extend outside the box—potentially overlapping borders and other web page
elements on the page. IE 6 (and earlier) simply enlarges the box (borders and
all) to accommodate the larger content. Hidden hides any content outside of
the content area. Scroll adds scroll bars to the element so a visitor can scroll
to read any content outside the content area—sort of like a mini-frame. Auto
adds scrollbars only when they’re necessary to reveal more content.
• Example: overflow: hidden;
position
Determines what type of positioning method a browser uses when placing an element on the page.
• Values: static, relative, absolute, fixed. Static is the normal browser mode—
one block-level item stacked on top of the next with content flowing from the
top to the bottom of the screen. Relative positions an element in relation to
where the element currently appears on the page—in other words, it can offset
the element from its current position. Absolute takes an element completely
out of the page flow. Other items don’t see the absolute element and may appear underneath it. It’s used to position an element in an exact place on the
page or to place an element in an exact position relative to a parent element
that’s positioned with absolute, relative, or fixed positioning. Fixed locks
an element on the page, so that when the page is scrolled, the fixed element
remains on the screen—much like HTML frames. Internet Explorer 6 (and earlier)
ignores the fixed option.
• Example: position: absolute;
Tip
You usually use relative, absolute, and fixed in conjunction with left, right, top, and
bottom. See Chapter 13 for the full details on positioning.
right
When used with absolute or fixed positioning, this property determines the position of the right edge of the style relative to the right edge of its closest positioned
ancestor. If the styled element isn’t inside of any positioned tags, then the placement
is relative to the right edge of the browser window. You can use this property to
place a sidebar a set amount from the right edge of the browser window. When
586
CSS3: The Missing Manual
used with relative positioning, the placement is calculated from the element’s right
edge (prior to positioning).
Page Layout
Properties
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages.
• Example: left: 5em;
Warning Internet Explorer 6 (and earlier) can have problems when positioning an element, using the
right property. See the box on page 440 for details.
top
Does the opposite of what the bottom property does (page 582). In other words,
when used with absolute or fixed positioning, this property determines the position
of the top edge of the style relative to the top edge of its closest positioned ancestor. If the styled element isn’t inside of any positioned tags, then the placement is
relative to the top edge of the browser window. You can use this property to place
a logo a set amount from the top edge of the browser window. When used with
relative positioning, the placement is calculated from the element’s top edge (prior
to positioning).
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages.
• Example: top: 5em;
visibility
Determines whether a web browser displays the element. Use this property to hide
part of the content of the page, such as a paragraph, headline, or tag. Unlike the
display property’s none value—which hides an element and removes it from the flow
of the page—the visibility property’s hidden option doesn’t remove the element from
the page flow. Instead, it just leaves an empty hole where the element would have
been. For this reason, you most often use the visibility property with absolutely
positioned elements, which have already been removed from the flow of the page.
Hiding an element doesn’t do you much good unless you can show it again. JavaScript programming is the most common way to toggle the visibility property to
show and hide items on a page. You can also use the :hover pseudo-class (page
294) to change an element’s visibility property when a visitor hovers over some
part of the page.
• Values: visible, hidden. You can use the collapse value to hide a row or
column in a table as well.
• Example: visibility: hidden;
Appendix A: CSS Property Reference
587
Animation,
Transform,
and
Transition
Properties
width
Sets the width of the content area (the area of an element’s box that contains text,
images, or other tags). The amount of onscreen space actually dedicated to the
element may be much wider, since it includes the width of the left and right margin,
left and right padding, and left and right borders. IE 6 (and earlier) handles overflow
situations differently than other browsers.
• Values: Any valid CSS measurement unit, like pixels, ems, or percentages.
Percentages are based on the containing element’s width.
• Example: width: 250px;
z-index
Controls the layering of positioned elements. Only applies to elements with a position property set to absolute, relative, or fixed (page 488). It determines where
on the z axis an element appears. If two absolutely positioned elements overlap,
the one with the higher z-index appears to be on top.
• Values: An integer value, like 1, 2, or 10. You can also use negative values, but
different browsers handle them differently. The larger the number, the more
“on top” the element appears. An element with a z-index of 20 appears below
an element with a z-index of 100 (if the two overlap). However, when the element is inside another positioned element, it’s “positioning context” changes
and it may not appear above another element—no matter what its z-index
value. See Figure 13-6.
• Example: z-index: 12;
Note The values don’t need to be in exact integer order. If element A has a z-index of 1, you don’t
have to set element B’s z-index to 2 to put it on top. You can use 5, 10, and so on to get the same effect, as
long as it’s a bigger number. So, to make sure an element always appears above other elements, simply give
it a very large value, like 10000. However, Firefox can only handle a maximum value of 2147483647, so don’t set
your z-index above that number.
Animation, Transform, and Transition
Properties
CSS3 added some spiffy properties to transform elements by scaling, rotating,
skewing, and moving them, as well as the ability to animate changes from one CSS
property to another.
@keyframes
The heart of CSS animations is the @keyframes rule. It lets you name an animation,
which you can then apply to any element on a page, and create a set of keyframes.
(Keyframes, as described on page 355, are places within the animation where CSS
588
CSS3: The Missing Manual
properties change.) For example, to fade the background of an element from black
to white, you’d need two keyframes: The first keyframe sets the CSS backgroundcolor property to black, and the second keyframe sets it to white. You can have
any number of keyframes in a variety of CSS properties.
Animation,
Transform,
and
Transition
Properties
At the time of this writing, you need to use vendor prefixes for an @keyframe rule,
and animations don’t work at all in Internet Explorer 9 and earlier.
• Values: The @keyframes rule isn’t like any other CSS property—in fact, it’s not
a property at all. It’s called an at rule, and it’s more complex than a regular
property. You need to supply a name (which you’ll use later when you apply
the animation to an element on the page) and then a set of braces: { }. Inside
the braces are the keyframes, which can be as simple as the two keywords from
and to to mark the first and last keyframes. Each keyframe has its own set of
braces, in which you put CSS properties that you’d like to animate: backgroundcolor, font-size, position on the page, and so on. For detailed information on
how animations work, turn to page 354.
• Example:
@keyframes myAnimation {
from {
background-color: black;
}
to {
background-color: white;
}
animation
This is the shorthand method of applying an animation to an element. It’s a compact way to include the following properties into one: animation-name, animationduration, animation-timing-function, animation-iteration-count, animationdirection, animation-delay, and animation-fill-mode, all of which are explained
in the following pages. As this is a CSS3 property, it requires vendor prefixes for
most browsers and doesn’t work in IE 9 and earlier.
• Values: A space separated list of values that includes the animation properties
listed in the previous paragraph. For the exact type of values you need to supply
for each, read the following entries (animation-name, animation-duration) and
so on. Only two values are required—animation-name and animation-duration.
Animation requires vendor-prefixes (page 209). You can apply multiple named
animations to the same element by providing a comma-separated list of animation values.
Appendix A: CSS Property Reference
589
Animation,
Transform,
and
Transition
Properties
• Examples:
animation: myAnimation 2s;
animation: myAnimation 2s ease-in 2 alternate 5s forwards;
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
animation-name
Use this property to assign an animation that you’ve created with the @keyframes
rule. You add this property as part of a CSS selector that applies to one or more page
elements. For example, adding this property to a h1 tag style, will tell a browser to
run the specified animation on all
tags when the page loads. You also need
to assign the animation-duration property for this to work. This property requires
vendor prefixes and doesn’t work in IE 9 or earlier (page 209).
• Values: A name from an @keyframes rule.
• Example: animation-name: myAnimation;
animation-duration
Specifies how long an animation specified by the animation-name property takes
to complete.
• Values: A value in seconds—1s—or milliseconds—1000ms.
• Example: animation-duration: 2s;
animation-timing-function
Dictates the speed of an animation within the allotted animation duration. For example, while you may set the duration of an animation to 5 seconds, you can also
control how the animation plays back within that 5 seconds, such as starting slowly
and finishing quickly. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
• Values: One of five keywords linear, ease, ease-in, ease-out, and ease-in-out.
Can also supply a cubic Bezier value for a custom timing function (page 349).
• Examples:
animation-timing-function: ease-out;
animation-timing-function: cubic-bezier(.20, .96, .74, .07);
animation-delay
Specifies a time in seconds or milliseconds that an animation should wait before
beginning to play. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
• Values: A value in seconds—1s—or milliseconds—1000ms.
• Example: animation-delay: 1.5s;
590
CSS3: The Missing Manual
animation-iteration-count
Specifies how many times an animation runs. Normally, an animation runs once and
then stops, but you can make an animation run 4, 5, 100, or an infinite number of
times. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
Animation,
Transform,
and
Transition
Properties
• Values: A positive integer or the keyword infinite.
• Examples:
animation-iteration-count: 5;
animation-iteration-count: infinite;
animation-direction
When an animation runs more than once, this property specifies the starting point for
each subsequent animation. Normally, a browser simply replays an animation from
its original starting point, over and over. However, you can also make the animation
forwards then backwards then forwards again. For example, if you have an animation that makes an element’s background color progress from white to black, you
may want to give it a pulsing quality by having it run many times and animate from
white to black, then black back to white, then white to black, then black to white,
and so on. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
• Values: The keyword normal or alternate. Normal is the way a browser already
plays back animations, so you only need to use this property if you want to use
the alternate keyword.
• Example: animation-direction: alternate;
animation-fill-mode
Dictates how an animated element should be styled at the beginning and/or end of
an animation. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
• Values: One of three keywords: backwards, forwards, or both. Forwards is the
most common as it leaves the element styled in the same way as the end of the
animation instead of reverting back to the styling before the animation began.
• Example: animation-fill-mode: backwards;
animation-play-state
Controls whether an animation is playing or not. You can use this property on a
:hover pseudo-class to pause an animation when a visitor hovers over the element.
Requires vendor prefixes and doesn’t work in IE 9 or earlier.
• Values: One of two keywords: pause or running. Paused stops the animation,
while running makes it go. The default value is running.
• Example: animation-play-state: paused;
Appendix A: CSS Property Reference
591
Animation,
Transform,
and
Transition
Properties
transform
Changes an element in one or more ways including scaling, rotating, skewing, or
moving the element. Requires vendor prefixes and doesn’t work in IE 8 or earlier.
• Values: Keywords rotate(), translate(), skew(), or scale(). Each keyword
takes its own kind of value. For example rotate requires a degree value—180deg;
translate requires a measurement like percentage, ems, or pixels; skew takes
two degree values; and scale takes a positive or negative number. You can
apply more than one type of transformation to an element.
• Examples:
transform: rotate(45deg);
transform: scale(1.5);
transform: skew(45deg 0) rotate(200deg) translate(100px, 0)
scale(.5);
transform-origin
Controls the point at which a transformation is applied. For example, normally when
you rotate an element, you spin it around its center. However, you can also rotate
it around one of its four corners. Requires vendor prefixes and doesn’t work in IE
8 or earlier.
• Values: Two values, one for the horizontal origin, the other for the vertical
origin. You use the same keywords and values as for the background-position
property (page 581).
• Examples:
transform-origin: left top;
transform-origin: 0% 100%;
transform-origin: 10px -100px;
transition
A shorthand method to specify the transition-property, transition-duration,
transition-timing-function, and transition-delay properties (discussed next).
Transitions tell a browser to animate changes in CSS properties on an element. For
example, you can animate the change of a navigation button’s background color
from red to green as a visitor mouses over that button. Requires vendor prefixes
and doesn’t work in IE 9 or earlier.
• Values: A space separated list of properties, which include the transitionproperty (optional, defaults to all), transition-duration (required),
transition-timing-function (optional, defaults to ease), transition-delay
(optional, defaults to 0).
• Example: transition: background-color 1.5s ease-in-out 500ms;
592
CSS3: The Missing Manual
transition-property
Specifies the specific CSS properties that should be animated when an element’s
CSS properties change. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
Table
Properties
• Values: An animatable CSS property (see page 346), or the keyword all.
• Example: transition-property: width, left, background-color;
transition-property: all;
transition-duration
Specifies how long a transition animation takes to complete.
• Values: A value in seconds—1s—or milliseconds—1000ms.
• Example: animation-duration: 2s;
transition-timing-function
Dictates the speed of a transition animation within the specified duration. For
example, while you may set the duration of a transition to 5 seconds, you can also
control how the transition plays back within that 5 seconds, such as starting slowly
and finishing quickly. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
• Values: One of five keywords linear, ease, ease-in, ease-out, and ease-in-out.
Can also supply a cubic Bezier value for a custom timing function (page 349).
• Examples:
transition-timing-function: ease-out;
transition-timing-function: cubic-bezier(.20, .96, .74, .07);
transition-delay
Specifies a time in seconds or milliseconds that the transition animation should wait
before beginning to play. Requires vendor prefixes and doesn’t work in IE 9 or earlier.
• Values: A value in seconds—1s—or milliseconds—1000ms.
• Example: transition-delay: 1.5s;
Table Properties
There are a handful of CSS properties that relate solely to HTML tables. Chapter 10
has complete instructions on using CSS with tables.
border-collapse
Determines whether the borders around the cells of a table are separated or collapsed. When they’re separated, browsers put a space of a couple of pixels between
each cell. Even if you eliminate this space by setting the cellspacing attribute for
Appendix A: CSS Property Reference
593
Table
Properties
the HTML tag to 0, browsers still display double borders. That is, the bottom
border of one cell will appear above the top border of the cell below, causing a doubling of border lines. Setting the border-collapse property to collapse eliminates
both the space between cells and this doubling up of borderlines (page 381). This
property works only when applied to a tag.
• Values: collapse, separate
• Example: border-collapse: collapse;
border-spacing
Sets the amount of space between cells in a table. It replaces the tag’s
cellspacing HTML attribute. However, Internet Explorer 7 and earlier doesn’t understand the border-spacing property, so it’s best to continue to use the cellspacing
attribute in your tags to guarantee space between cells in all browsers.
Note
If you want to eliminate the space browsers normally insert between cells, just set the bordercollapse property to collapse.
• Values: Two CSS length values. The first sets the horizontal separation (the
space on either side of each cell), and the second sets the vertical separation
(the space separating the bottom of one cell from the top of the one below it).
• Example: border-spacing: 0 10px;
caption-side
When applied to a table caption, this property determines whether the caption
appears at the top or bottom of the table. (Since, according to HTML rules, the
tag must immediately follow the opening tag, a caption would
normally appear at the top of the table.)
• Values: top, bottom
• Example: caption-side: bottom;
Note
Unfortunately, this property has no effect in Internet Explorer 6 or 7 (it works in IE 8), so it’s safest
to stick with the HTML equivalent: or .
empty-cells
Determines how a browser should display a table cell that’s completely empty, which
in HTML would look like this: tag.
594
CSS3: The Missing Manual
Miscellaneous
Properties
• Values: show, hide
• Example: empty-cells: show;
Note
The empty-cells property has no effect in Internet Explorer 7 and earlier.
table-layout
Controls how a web browser draws a table and can slightly affect the speed at
which the browser displays it. The fixed setting forces the browser to render all
columns the same width as the columns in the first row, which (for complicated
technical reasons) draws tables faster. The auto value is the normal “browser just
do your thing” value, so if you’re happy with how quickly your tables appear on a
page, don’t bother with this property. If you use it, apply table-layout to a style
formatting the tag.
• Values: auto, fixed
• Example: table-layout: fixed;
Miscellaneous Properties
CSS 2.1 offers a few additional—and sometimes interesting—properties. They let
you enhance your web pages with special content and cursors, offer more control
over how a page prints, and so on. (Unfortunately, browser understanding of these
properties is spotty at best.)
content
Specifies text that appears either before or after an element. Use this property with
the :after or :before pseudo-elements. You can add an opening quotation mark in
front of quoted material and a closing quotation after the quote. Internet Explorer
6 and 7 don’t understand this property, so its use is limited.
• Values: Text inside of quotes "like this", the keywords normal, open-quote,
close-quote, no-open-quote, no-close-quote. You can also use the value of
an HTML attribute.
• Examples: p.advert:before { content: "And now a word from our sponsor…"; }
a:after { content: " (" attr(href) ") "; }
Note Adding text in this way (like the opening and closing quote example) is called generated content.
Read a simple explanation of the generated content phenomenon at www.westciv.com/style_master/academy/
css_tutorial/advanced/generated_content.html. For a deeper explanation, visit www.w3.org/TR/CSS21/generate.
html.
Appendix A: CSS Property Reference
595
Miscellaneous
Properties
cursor
Lets you change the look of the mouse pointer when it moves over a particular
element. You can make a question mark appear next to the cursor when someone mouses over a link that provides more information on a subject (like a word
definition).
• Values: auto, default, crosshair, pointer, move, e-resize, ne-resize, nwresize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait,
help, progress. You can also use a URL value to use your own graphic as a
cursor (see the Note below). The look of a cursor when mousing over a link is
pointer, so if you want to make some element on the page display the “click
me” icon, you can add the declaration cursor: pointer to the style.
• Example: cursor: help; cursor: url(images/cursor.cur);
Note
Not all browsers recognize URL cursor values. For more information, visit www.quirksmode.org/css/
cursor.html.
opacity
Lets you control the transparency of any element and all of its descendents. In this
way, you can have underlying colors, images, and content show through an element.
Note that if you apply opacity to a div, all of the items inside that div—headlines, images, paragraphs, and other divs—will share the same opacity level. In other words,
if you set a tag to .5 opacity (50% transparent), an image inside that div will
also be 50 percent transparent—even explicitly setting the opacity of that image to
1 won’t override the 50 percent transparency.
• Values: A decimal value from 0 to 1. 0 is invisible, 1 is completely opaque.
• Example: opacity: .5;
orphans
Specifies the minimum number of lines of text that can be left at the bottom of a
printed page. Suppose you’re printing your web page on a laser printer, and a fiveline paragraph is split between two pages with just one line at the bottom of page
one, and the four remaining lines at the top of page two. Because a single line all by
itself looks odd (sort of like a lost orphan—get it?), you can tell the browser to break
a paragraph only if at least, say, three lines are left on the bottom of the page. (At
this writing, only the Opera browser understands this property.)
• Values: A number like 1, 2, 3, or 5.
• Example: orphans: 3;
596
CSS3: The Missing Manual
page-break-after
Determines whether a page break (in printing) occurs after a particular element.
With it, you can make sure that a particular paragraph is always the last item to
appear on a printed page.
Miscellaneous
Properties
• Values: auto, always, avoid, left, right. Auto represents the normal value
and lets the browser determine when and how to break content across printed
pages. Always forces the element that follows to appear at the top of a separate
printed page, and it’s the only value that works consistently across browsers.
Avoid prevents a page break after an element; it’s a great way to keep a headline with the paragraph that follows it, but unfortunately, most browsers don’t
understand it. Left and right determine whether the element following appears
on a left- or right-handed page, which may force the browser to print an extra
empty page. But since no browsers understand these values, don’t worry about
wasting paper. Browsers treat left and right the same as always.
• Example: page-break-after: always;
page-break-before
Works like page-break-after, except the page break appears before the styled
element, placing it at the top of the next printed page. You can use this property
to make sure headlines for different sections of a long web page each appear at
the top of a page.
• Values: Same as page-break-after.
• Example: page-break-before: always;
page-break-inside
Prevents an element from being split across two printed pages. If you want to keep
a photo and its caption together on a single page, wrap the photo and caption text
in a
tag, and then apply a style with page-break-inside to that
. (At
this writing, only Opera understands this property.)
• Values: avoid
• Example: page-break-inside: avoid;
widows
The opposite of orphans, it specifies the minimum number of lines that must appear
at the top of a printed page. Say the printer can manage to fit four out of five lines
of a paragraph at the bottom of a page and has to move the last line to the top of
the next page. Since that line might look weird all by itself, use widows to make the
browser move at least two or three (or whatever number of) lines together to the
top of a printed page. (Only Opera understands this property, so it’s of limited use.)
• Values: A number like 1, 2, 3 or 5.
• Example: widows: 3;
Appendix A: CSS Property Reference
597
Appendix
B
CSS Resources
N
o one book—not even this one—can answer all of your CSS questions. Luckily, CSS resources abound for both beginning and expert web designers. In
this appendix, you’ll find resources to help you with general CSS concepts as
well as specific CSS tasks, like building a navigation bar or laying out a web page.
References
References that cover CSS properties range from the official to the obscure. There
are websites and online tutorials, of course, but you don’t have to be on the Web to
learn about CSS. Some of these guides come on good old-fashioned paper.
World Wide Web Consortium (W3C)
• CSS Current Work (www.w3.org/Style/CSS/current-work). Here you’ll find all
of the CSS specifications, including the newest additions. The different specifications are organized by status, like Completed, Revising, or Abandoned. You
can click any specification to dig into the nitty gritty details, but just because
a specification is listed as “completed” doesn’t necessarily mean it’s been fully
implemented in all web browsers. However, this site does provide the final
(sometimes overly complex and hard-to-understand) word on CSS.
Books
• Cascading Style Sheets: The Definitive Guide by Eric Meyer (O’Reilly). For
comprehensive technical (yet readable) coverage of CSS, check out this guide.
599
CSS Help
Other Online References
• CSS Reference at the Mozilla Developer Network (https//developer.mozilla.
org/en-US/docs/CSS/CSS_Reference). The Mozilla Developer Network (MDN)
provides one of the most comprehensive references to CSS (as well as HTML5,
JavaScript, and other web technologies).
• The Sitepoint CSS Reference (http://reference.sitepoint.com/css) provides a
clear, designer-oriented reference to CSS properties and concepts. It’s a good
place to turn if the W3C or MDN docs cause your eyes to glaze over.
• Can I use... (http://caniuse.com). This frequently updated site provides detailed
information on CSS and browser compatibility. Here, you’ll be able to determine
whether a particular CSS property works in Internet Explorer 9, for example.
• CSS3 Files (http://www.css3files.com/) provides very good instruction and
even better demonstrations of popular CSS3 properties like animation, shadows,
gradients, and more.
CSS Help
Even with the best references (like this book), sometimes you need to ask an expert.
You can join a discussion list, where CSS-heads answer questions by email, or peruse
a wealth of information in an online forum.
Discussion Boards
• CSSCreator Forum (www.csscreator.com/css-forum). A very active online forum
offering help and advice for everything from basic CSS to advanced layout.
• SitePoint.com’s CSS Forum (http://www.sitepoint.com/forums/forumdisplay.
php?53-CSS-amp-Page-Layout). Another helpful group of CSS addicts.
• CSS-Tricks.com Forum (http://css-tricks.com/forums). A relative newcomer,
this small forum holds some good information. (If you like PHP and JavaScript,
there’s some good discussion on those topics here as well.)
CSS Tips, Tricks, and Advice
The Web makes it easy for anyone to become a publisher. That’s the good news. The
bad news is, when everyone’s a publisher, it’s harder to sort through all the chaff to
find the golden wheat of clear, concise, and accurate information. There’s plenty of
good CSS information on the Web—and a lot that’s not good. Here are a few of the
best destinations for CSS information:
• CSS-Tricks.com (http://css-tricks.com). This one-man blog is full of great CSS
tips. You’ll find frequently updated tips and tricks as well as comprehensive
video tutorials.
600
CSS3: The Missing Manual
• Sitepoint (www.sitepoint.com/tags/css). Lots of articles and tutorials on CSS
techniques. You’ll often find the latest news and information about CSS here, too.
CSS
Navigation
• Smashing Magazine (www.smashingmagazine.com/tag/css). Smashing Magazine gathers some of the best resources on the Web, and in the CSS category,
you’ll find a nearly endless number of links highlighting some of the most creative
thinking on CSS and web design.
• NetMagazine (http://www.netmagazine.com/tag/css?ct=tutorial). NetMagazine
often has interesting and useful CSS tutorials.
CSS Navigation
Chapter 9 shows you how to create navigation buttons for your website from scratch.
But online tutorials are a great way to solidify your knowledge. Also, once you understand the process in detail, you don’t have to do it yourself every single time. On
the Web, you can find examples of navigation features for inspiration.
Tutorials
• Listutorial (http://css.maxdesign.com.au/listutorial). Step-by-step tutorials on
building navigation systems from unordered lists.
• 40 Premium CSS Menu and Navigation Solutions (www.tripwiremagazine.
com/2012/06/css-menu-and-navigation.html). More tutorials than you can
shake a stick at.
• The Apple.com navigation menu created using only CSS3 (www.marcofolio.
net/css/the_apple.com_navigation_menu_created_using_only_css3.html). If
you like the simple, clean appearance of Apple.com, you might be interested in
how to create their menu with CSS.
Online Examples
• CSS Navigation Bar Code Generator (http://lab.mattvarone.com/navbar).
Feeling lazy? Let this online tool create all the code you need to use the CSS
sprite method described on page 314.
• CSS Menu Maker (http://cssmenumaker.com). Choose from a selection of fancy
CSS3-rich navigation bars. You can customize them to fit your site, and then
download the code.
• CSS Showcase (www.alvit.de/css-showcase). A gallery of navigation menus,
tabs, and CSS navigation techniques.
• Listamatic (http://css.maxdesign.com.au/listamatic). Showcase of CSS-based
navigation systems. Also lots of links to related websites.
• Listamatic2 (http://css.maxdesign.com.au/listamatic2). More CSS menus,
including nested lists with submenus.
Appendix B: CSS Resources
601
CSS Layout
• CSS Menu Builder (www.cssmenubuilder.com/). Lots of cool menus, many
useful techniques. A must see.
• Responsive CSS Navigation Menu (http://pixelsdaily.com/resources/html-css/
responsive-css-navigation-menu/). A responsive menu that changes from a
horizontal bar, to a two-row bar, to a two-column stack of buttons.
CSS Layout
CSS layout is so flexible, you could spend a lifetime exploring the possibilities. And
some people seem to be doing just that. You can gain from their labors by reading
articles, checking out online examples, and experimenting with tools that can do
some of the CSS work for you.
Box Model Information
• Interactive CSS Box Model (www.redmelon.net/tstme/box_model). Fun,
interactive tool for visualizing the box model.
• Paul Irish’s * { box-sizing: border-box } FTW blog post (http://paulirish.
com/2012/box-sizing-border-box-ftw/). An influential blog post that champions
abandoning the old CSS box model and using the box-sizing property as a
more sane way to keep track of element heights and widths.
Layout Examples
• PageBlox (www.pageblox.com). Provides an online tool for generating a CSSbased responsive design. It takes care of browser bugs and generates the media
queries for large and small screens.
• CSS Layout Generator (www.pagecolumn.com). Pick the number of columns,
tweak a few knobs, and this website generates all the HTML and CSS required.
With a site like this, who needs a book? (Just kidding!)
• Even More Layout Generators (www.webdesignbooth.com/15-extremelyuseful-css-grid-layout-generator-for-web-designers). If you can’t get enough
of websites that automatically create your CSS and HTML, you’ll find a list of
15 different online tools.
• 960 Grid System (http://960.gs). One of the better CSS frameworks that
provides a set of basic styles and a technique for using divs and class names
to create complex, multicolumn, fixed-width layouts. (You can find a detailed
video introduction to this system at http://nettuts.com/videos/screencasts/adetailed-look-at-the-960-css-framework/). There’s even an online tool to help
you generate your own grid based on the 960 grid system: http://grids.heroku.
com.
602
CSS3: The Missing Manual
• YUI Grids CSS (http://yuilibrary.com/yui/docs/cssgrids/). Yahoo’s very own
CSS-layout system. It’s a bit techy, but like the 960 Grid System, provides a
basic framework for building complicated multicolumn layouts.
Showcase
Sites
• Twitter Bootstrap (http://twitter.github.com/bootstrap/). A complete website
toolkit, this site includes HTML, CSS, and JavaScript components that make
it easy to build a complete, responsive, grid-based page, with some fancy
JavaScript thrown in.
• Foundation (http://foundation.zurb.com). Another take on the complete website toolkit. Very much like Twitter bootstrap, Foundation includes HTML, CSS,
and JavaScript. It has excellent documentation and is relatively easy to learn.
Miscellaneous Layout Resources
• Adaptive CSS Layouts (www.smashingmagazine.com/2009/06/09/smartfixes-for-fluid-layouts). Provides many resources for building flexible layouts
that adapt to the full width of the browser window.
• One clean HTML markup, many layouts ( http://tjkdesign.com/articles/
one_html_markup_many_css_layouts.asp). Great blog post that takes a single
HTML page and demonstrates eight different ways to lay it out with just CSS.
• Variable fixed width layout (www.clagnut.com/blog/1663). Short blog post
about a technique for adjusting the number of columns on a page, based on
the width of the browser window.
• 3-Column Layout Index ( http://css-discuss.incutio.com/?page=Three
ColumnLayouts). A nearly exhaustive (or at least exhausting) list of different
three-column layouts.
Showcase Sites
Knowing the CSS standard inside out is no help when your imagination is running
dry. A great source of inspiration is the creative work of others. There are more CSS
showcase sites than you can shake a search engine at, so here’s a handful of sites
where you can appreciate and study beautiful CSS designs.
• CSS ZenGarden (www.csszengarden.com). The mother of all CSS showcase
sites: many different designs for the exact same HTML.
• CSS Beauty (www.cssbeauty.com). A wonderful gallery of inspirational CSS
designs.
• CSS Elite (www.csselite.com). “Showcasing the best in CSS web design”…of
course they all say that.
• CSS Mania (http://cssmania.com). Yet another showcase site, whose ungrammatical claim to fame is “Since March 2004, the most updated CSS showcase
all over the globe.”
Appendix B: CSS Resources
603
CSS Books
• CSS Winner (www.csswinner.com). Highlights a new “winner” everyday. It’s
unclear if the judges are really just teenagers surfing the Web from their bedrooms, but the site does highlight some very nicely designed sites.
CSS Books
Hey, not even this book can tell you everything there is to know about CSS!
• Handcrafted CSS: More Bulletproof Web Design by Dan Cederholm (New Riders). A bit dated, but this book has some great design and very good thinking
about how to craft HTML for formatting with CSS.
• Bulletproof Web Design by Dan Cederholm (New Riders). A classic, updated
for HTML5 and CSS3, covers how best to create CSS styles that can withstand
the pressure of visitors changing text sizes, resizing their browser windows,
and the general instability of the browser environment. Great tips on building
layouts, navigation bars, and more.
• Head First HTML with CSS & XHTML by Elisabeth Freeman and Eric Freeman
(O’Reilly). A lively, highly illustrated introduction to websites integrating HTML
and CSS.
• Stunning CSS3: A Project-Based Guide to the Latest in CSS by Zoe Mickley
Gillenwater (New Riders). Provides many good tips and techniques for using
CSS3 to create attractive and flexible web pages.
CSS Software
There are lots of different ways to create Cascading Style Sheets. Keeping it simple,
you can stick with the free text editors that come with Windows and Mac OS, like
Notepad or TextEdit. There are also CSS-only editors and full-fledged web page–
development programs like Dreamweaver that include CSS creation tools.
Windows and Mac
• Style Master (www.westciv.com/style_master/product_info). This powerful CSS
editor with a long history includes many tools, including simple wizards to get
you started, sample templates, tutorials, and a complete CSS guide.
• Dreamweaver (www.adobe.com/dreamweaver). Definitely not just for CSS,
this premium web-development tool includes everything you need to build
complete websites. Visual editing tools make it easier to see the effect of CSS
on your web pages as you work.
• Sublime Text (http://www.sublimetext.com). This powerful code editor is useful
for creating a wide variety of text documents. While not specifically a CSS tool,
it’s a popular tool among web developers.
604
CSS3: The Missing Manual
Windows Only
• Top Style (www.topstyle4.com). The venerable CSS editor that also lets you
edit your HTML documents—a one-stop shop for web page building. Includes
many tools to increase your productivity. There’s also a free “lite” version.
CSS Software
• Microsoft Expression Web (www.microsoft.com/expression/products/Web_
Overview.aspx). A complete website-construction tool that works very well
with CSS.
Mac Only
• Espresso (http://www.macrabbit.com/espresso/). This all-in-one web design
tool includes a code editor, an FTP program, and CSSEdit 3, a powerful, yet
simple CSS editor.
• Code (http://panic.com/coda/ ). Another all-in-one web-building tool with
built-in CSS-editing tools.
Appendix B: CSS Resources
605
Index
Symbols
3D transforms, 345
40 Premium CSS Menu and Navigation
Solutions, 601
960 Grid System, 602
2011 BeerCamp website, 345
$= (“ends in”) selector, 317
$= (“ends with”) selector, 74
/* and */, for comments, 539
> (angle bracket), for child
relationship, 74
– (“begins with”) selector, 73, 316
and :not() selector, 81
{ } (braces), 37
for internal style, 46
*= (contains) attribute selector, 81
statement, 559
/ (forward slash), for closing tags, 4
# (hash symbol), for hex
numbers, 564
Navigation menu
Versions of this User Manual:
.