Note
Safari Books Online (www.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the worlds leading authors in technology and business.
Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.
Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like OReilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.
How to Contact Us
Please address comments and questions concerning this book to the publisher:
OReilly Media, Inc. |
1005 Gravenstein Highway North |
Sebastopol, CA 95472 |
800-998-9938 (in the United States or Canada) |
707-829-0515 (international or local) |
707-829-0104 (fax) |
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/values-units-colors.
To comment or ask technical questions about this book, send email to .
For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
Chapter 1. Values, Units, and Colors
In this book, well tackle features that are the basis for almost everything you can do with CSS: the units that affect the colors, distances, and sizes of a whole host of properties, as well as the units that help to define those values. Without units, you couldnt declare that an image should have 10 pixels of blank space around it, or that a headings text should be a certain size. By understanding the concepts put forth here, youll be able to learn and use the rest of CSS much more quickly.
Keywords, Strings, and Other Text Values
Of course, everything in a style sheet is text, but there are certain value types that directly represent strings of text as opposed to, say, numbers or colors. Included in this category are URLs and, interestingly enough, images.
Keywords
For those times when a value needs to be described with a word of some kind, there are keywords . A very common example is the keyword none
, which is distinct from 0
(zero). Thus, to remove the underline from links in an HTML document, you would write:
a:link, a:visited {text-decoration: none;}
Similarly, if you want to force underlines on the links, then you would use the keyword underline
.
If a property accepts keywords, then its keywords will be defined only for the scope of that property. If two properties use the same word as a keyword, the behavior of the keyword for one property will not necessarily be shared with the other. As an example, normal
, as defined for letter-spacing
, means something very different than the normal
defined for font-style
.
CSS3 defines two global keywords, one of which has fairly widespread support: inherit
and initial
.
inherit
The keyword inherit
makes the value of a property on an element the same as the value of that property on its parent element. In other words, it forces inheritance to occur even in situations where it would not normally operate. In many cases, you dont need to specify inheritance, since many properties inherit naturally. Nevertheless, inherit
can still be very useful.
For example, consider the following styles and markup:
#toolbar {background: blue; color: white;}
The div
itself will have a blue background and a white foreground, but the links will be styled according to the browsers preference settings. Theyll most likely end up as blue text on a blue background, with white vertical bars between them.
You could write a rule that explicitly sets the links in the toolbar to be white, but you can make things a little more robust by using inherit
. You simply add the following rule to the style sheet:
#toolbar a {color: inherit;}
This will cause the links to use the inherited value of color
in place of the user agents default styles. Ordinarily, directly assigned styles override inherited styles, but inherit
can undo that behavior.
Similarly, you can pull a property value down from a parent even if it wouldnt happen normally. Take