Chapter 3: Styling with
Cascading Style Sheets
In This Chapter
Getting familiar with the CSS syntax
Creating inline, internal, and external CSS
Understanding CSS selectors
n earlier chapters of this book, you discover that Cascading Style Sheets
are really the way to go when it comes to styling the content on your
pages. Yet until now, I haven’t gotten into the nuts and bolts of how to
create and apply CSS to your HTML. That’s what this chapter is all about.
To make the task of finding out about styling pages with CSS flow as
smoothly as possible, this chapter breaks CSS down into several easily
digestible parts. First, you read about the anatomy of the CSS style syntax.
Then you discover the difference between inline, internal, and external style
sheets and find out how to link an external CSS to an HTML file. After that,
you find out the basics of creating custom styles, redefining default tag
styles, setting up ID styles, and using compound CSS styles to style sev-
eral tags at once. Plus you find out how to create custom link
styles for various sections within your Web page.
Understanding CSS Basics
Back in the late 1990s, a tool called Cascading Style
Sheets was developed as an enhancement to tradi-
tional HTML markup that enabled designers to
place the styling information for an entire Web site
into a single, centralized external document,
thereby decreasing the file size of all the HTML
pages while at the same time reducing the amount of
code required for styling in every page of a Web site.
In addition to keeping the HTML code less cluttered than it
used to be when coding with the old
<font> and other HTML tags
for text formatting, the use of CSS provides several other benefits, including
the following:
16_417966-bk03ch03.qxp 3/25/09 10:36 PM Page 271
Understanding CSS Basics
Faster page download times: Both the HTML files and the CSS file
will load quicker when all the page-styling information is contained in
the CSS.
Improved site access for visitors with disabilities: Screen readers and
other assistive devices can disable or otherwise ignore CSS, providing
easier access to the content on a Web site.
Improved management of visual presentation: A single external CSS
file means that you can quickly make style modifications to an entire
site by modifying the CSS, which is much faster than it would be if you
were using the old
<font> and other formatting tags.
To illustrate, consider that you were using old HTML tags for styling,
which means you’d have to specify the font face, size, and color each
time a new paragraph required a different font appearance:
<p><font color=”#FF6666” size=”2” face=
“Georgia,Times,serif”><a href=”casestudies.html”>
<b>Read our Case Studies</b></a></font></p>
Now compare that to working with CSS. When all the font attributes are
transferred to the default styling for paragraphs (the
<p> tag) in an
external Cascading Style Sheet, the HTML code becomes much cleaner:
<p><a href=”casestudies.html”><strong>Read our Case
Easier site maintenance after the site is published: With the old
<font> and other HTML style tags and attributes, any time the site’s
look needed changing, each file would have to be individually modified,
and then all the changed files would need to be uploaded to the server
before those changes would take effect for site visitors. With CSS, only
the updated CSS file needs to be uploaded to the remote server before
everyone can see the style changes. Simple!
Using CSS as a Web standard
You find countless benefits of working with CSS, the most striking of which
is that when you place all your styling information in a single external CSS
file, rather than embedding it within the HTML markup of your individual
Web pages, you get the maximum amount of control over the look of your
entire site. This is especially desirable during the design phase as you are
constructing the pages for your site, and again later during the maintenance
phase when it becomes time to make site-wide style changes.
The World Wide Web Consortium (W3C) strongly recommends CSS for
styling Web pages because it gives designers and programmers the highest
degree of control over how Web content is presented in a browser window.
Much like a word processor or page-layout program’s style sheets, CSS for
the Web enables you to set default formatting options so that all the text
and other content, such as graphics, forms, animations, and videos, follow
16_417966-bk03ch03.qxp 3/25/09 10:36 PM Page 272

Get Web Design All-in-One for Dummies® now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.