HTML and CSS Reference
In-Depth Information
To get around this difference, ingenious Web developers developed a technique to force
the browser parser in some cases to explode predictably. For example, given
#boxexample {border: 20px solid;
padding: 30px;
width: 300px;}
we first modify it, as shown next, to set the box width to its correct measurement of
400px
for browsers that misinterpret the calculation. Next, we add rules that these older browsers
will have problems with, thus killing the rest of the line. Finally, we add a rule for those
browsers that don't have issues to reset the
width
property back to the correctly interpreted
value of
300px
.
#boxexample {width: 400px;
voice-family: "\"}\"";
voice-family: inherit;
width: 300px;}
What this hack does is to act as a simple
if
statement, choosing one
width
value in one
case and a different one in another. If the solution seems messy and inappropriate to you,
know you aren't alone. However, recognize that when faced with browser adversity, Web
developers, who are a wily group, will solve almost any problem using only the tools they
know, whether the method is appropriate or not.
You'll certainly see more hacks and inelegant solutions as you explore the use of CSS.
The point here is not only to show that understanding the rules of CSS and browser activity
can be used purposefully, but also to illustrate the Web development truism that, while
we always aim for standards compliance, the need for hacking and addressing browser
incompatibility, just like in the old days of presentational markup, stubbornly lives on.
Regardless of this necessity, let's move on to explore all the details of how style is applied
to markup.
Applying Style to a Document
Style information can be included in an (X)HTML document using one of three methods:
1. Use an external style sheet, either by importing it or by linking to it.
2. Directly embed a document-wide style in the
head
element of the document.
3. Set an inline style rule using the
style
attribute directly on an element.
Each of these style sheet approaches has its own pros and cons, as listed in Table 4-4.
Linking to a Style Sheet
An external style sheet is simply a plain text file containing CSS style rules. The common
file extension
.css
indicates that the document provides style sheet information. As an
