Chapter 3
their order is indicated by the order of the link elements in the document; rules in later linked style sheets
override rules in previously linked style sheets (assuming equal specificity). If more than one style sheet is
embedded in a document—each in its own style element—later embedded style sheets override
previous ones. Inline declarations in an element’s style attribute are applied last.
The style sheets web designers create are author style sheets, designing the web page as the author
intends. Additionally, every graphical web browser has its own built-in style sheet to define the default
presentation of various elements. When you view a web page without any of the author’s CSS applied,
you’re simply seeing it rendered with the browser style sheet, which comes first in the cascade order, so all
the author’s styles override those defaults. To complicate matters just a bit further, most web browsers
allow the end user to attach their own customized style sheets—known as a user style sheet—which
comes second in the cascade order, thus overriding the browser’s default styles but not the author’s.
To break it down, the cascade order for multiple style sources is:
- Browser style sheet
- User style sheet
- Author style sheets (in the order in which they’re linked or embedded)
- Inline author styles
And don’t forget, the cascade works within each style sheet as well. To remember how the cascade works,
follow this rule of thumb: the declaration closest to the content wins. Whichever value is declared last will
be the one in effect when the content is finally rendered.
Style with Color
Color plays a pivotal role in everyday life, and is even integral to human survival. Our ability to recognize
color allows us to coordinate our outfits, to safely cross busy streets, and to avoid eating poisonous
mushrooms. Color, being so much a part of the visual sensory experience, is also a vital component in
visual design. Artful application of color can draw the viewer’s attention, clarify communication, and invoke
powerful emotional responses.
CSS makes it easy to inject color into an otherwise drab web page. The color property declares a color
for an element’s text, and the background-color property declares a solid color that fills the entire
element’s area. Text and other content inside the element will overlap that background color. For example,
the following rule sets the text (foreground) color to black and the background color to white for the entire
body element, which covers the entire page and fills the browser window:
body {
color: black;
background-color: white;
}
The color property is inherited, passed down from a parent element to all its child elements. A child
element that inherits its text color from its parent will pass that color down to its own children, and so on
down the document tree until some other color is declared to override it. Because every other element on
