CHAPTER 10
APPLYING CSS
WEB STANDARDS SOLUTIONS
150
While the focus throughout Part One had been primarily markup examples, we also
explored how CSS can be applied to that markup for design and style details. To begin Part
Two, in this chapter we’ll talk about the different methods used to apply CSS to a particu-
lar document, site, or even single element. In addition, we’ll discuss how we can hide CSS
from older browsers, enabling us to use advanced techniques without harming the markup
structure that all browsers and devices can read.
Later, in the “Extra credit” section at the end of the chapter, we’ll introduce alternate style
sheets that can produce multiple themes, font sizes, and colors without the need for
server- side scripting.
How do I apply CSS to a document?
We’re going to look at four ways to apply CSS to a document, each with its own advan-
tages and disadvantages. Depending on the situation, any one of these methods would be
appropriate. Each method presented uses a valid and typical XHTML 1.0 Transitional frame-
work for its document type, <html> element, and <head> setup.
Let’s begin with Method A.
Method A: The <style> element
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content- type" content="text/html; charset=utf- 8" />
<title>Applying CSS</title>
<style type="text/css">
<![CDATA[
... CSS declarations here ...
]]>
</style>
</head>
This method, also known as an embedded style sheet, allows you to write all of your CSS
declarations right in the actual XHTML document. The <style> element sits inside the
<head> section of a page and can contain any number of CSS rules you desire.
The type attribute with the text/css value ensures that the browser understands what
type of style language we’re presenting and is required. We’re also using CDATA comment
syntax that is recommended by the W3C to hide the style rules from older browsers that
can’t understand them (www.w3.org/TR/xhtml1/#h- 4.8).
Partial understanding
One important downside to using Method A is that some older browsers will do their best
to render CSS that is contained in <style> elements. This can be a bit of a problem if you
APPLYING CSS
151
10
have any advanced CSS rules that only modern browsers will understand for layout and
positioning. If complicated CSS is kept within <style> elements, it’s possible that users of
older browsers may receive a jumbled, unusable mess.
Uncached
Another downside to embedded style sheets is that since they are on the page, they are
required to be downloaded each time that page is loaded. Conversely, the method that
follows requires the styles to be downloaded once, and then cached by the browser.
Multiple changes
Along with the fact that embedded style sheets appear on the XHTML page, including an
embedded style sheet also means duplicating these styles if you want them to be applied
to multiple pages within a site. If you need to change these styles, you must make the
changes on each page that includes the style sheet. Lots of changes. Lots of work.
Good for development
On the upside, I find that when I’m initially building and testing CSS, it’s very convenient to
write all of the rules on the page I’m testing using Method A. It allows me to work on a
single document for both markup and style when making frequent changes. After testing
is complete, I’ll apply CSS to the public version using a different method. Let’s take a look
at a few more.
Method B: External style sheets
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content- type" content="text/html; charset=utf- 8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
Method B demonstrates how we can link to external style sheets—where all of the CSS
declarations are kept in a separate file, and then referenced in the head section of the
XHTML of the document with the <link> element.
The href attribute points to the location of the file. The value can be a relative path (as in
the case of Method B), or an absolute path, using the full http:// location of the docu-
ment. Also note that <link> is a single element, or empty element, and is required to have
the self- closing / at the end.
Separate file = easy maintenance
Having all your CSS rules in a file separate from your markup has an obvious advantage—
any style changes for an entire site can be made on that one file, rather than repeating CSS
declarations on every page, as you would need to do if using Method A.
Get Web Standards Solutions: The Markup and Style Handbook, Special Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
