HTML and CSS Reference
In-Depth Information
browser to honor that value above all others. This is a powerful and dangerous tool, and should be used
only as a last resort to resolve conflicting styles beyond your control (for example, if you're forced to work
with third-party markup that uses inline styles that you can't modify directly).
The
!important
directive must appear at the end of the value, before the semicolon, like so:
h1 { color: navy !important; }
A value declared as
!important
is applied to the rendered content regardless of where that value occurs
in the cascade or the specificity of its selector. That is unless another competing value is also declared
!important
; specificity and the cascade once again take over in those cases. There's one notable
exception to be aware of: users can create their own custom style sheets in their browsers to style
websites to their preference, and
!important
values in a user style sheet always take precedence, even
overriding
!important
values in author style sheets. This gives the ultimate power to the user, which is
only right; after all, it's their computer.
Formatting CSS
Like HTML, CSS is a plain text language. You're free to format your CSS however you like, just as long as
you follow the basic syntax. Extra spaces and carriage returns are ignored in CSS; the browser doesn't
care what the plain text looks like, just that it's technically well formed. When it comes to formatting CSS,
the most important factors are your own preferences. Individual rules can be written in two general
formats: extended or compacted.
Extended rules break the selector and declarations onto separate lines, which many authors find more
readable and easier to work with. It allows you to see at a glance where each new property begins and
ends, at the expense of a lot of scrolling when you're working with long and complex style sheets. Listing
2-2 shows a few simple rules in an extended format.
Listing 2-2.
CSS rules in extended format
h1, h2, h3 {
color: red;
margin-bottom: .5em;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 120%;
border-bottom: 1px solid gray;
}
