O_Reilly - CSS_ The Missing Manual 2nd Edition (2009)02
O_Reilly - CSS_ The Missing Manual 2nd Edition (2009) 02
Writing HTML for
CSS
Figure 1-2:
Old School, New School. Before CSS,
designers had to resort to the
Urban Agrarian certain visual effects (top). You can
Lifestyle achieve the same look (and often a
better one) with a lot less HTML code
that follows the logical structure of the
page’s content.
A Revolution in Indoor Agriculture
Lorem ipsum dolor sit amet...
The Urban Agrarian Lifestyle
A Revolution in Indoor Agriculture
Lorem ipsum dolor sit amet...
GEM IN THE ROUGH
Simple HTML Is Search Engine Friendly
Once you take the mental leap of picturing HTML as the By contrast, simple, structured HTML is easy for a search
way to structure a document’s content, and CSS as the tool engine to read and index. Using an tag to indicate the
for making that content look good, you’ll discover addi- most important topic of the page (as opposed to just mak-
tional benefits to writing lean, mean HTML. For one thing, ing the text big and bold) is smart strategy: Search engines
you may boost your search-engine ranking as determined give greater weight to the contents inside that tag while
by sites like Google, Yahoo, and MSN. That’s because when indexing the page.
search engines crawl the Web, indexing the content on
To see Google’s suggestions for building search-friendly
websites, they must go through all the HTML on a page to
websites, visit www.google.com/webmasters/guidelines.
discover the actual content. The old HTML way of using
html.
special tags (like ) and lots of tables to design a page
gets in the way of a search engine’s job. In fact, some search For tips on writing HTML that can help your search-engine
engines stop reading a page’s HTML after a certain number rankings visit www.digital-web.com/articles/seo_and_
of characters. When you use a lot of HTML just for design, your_web_site/.
the search engine may miss important content on the page
or even fail to rank it at all.
Chapter 1: Rethinking HTML for CSS 21
Download at Boykma.Com
Writing HTML for
CSS
The tag and the tag are like empty vessels that you fill with content. A
div is a block, meaning it has a line break before it and after it, while a span appears
inline, as part of a paragraph. Otherwise, divs and spans have no inherent visual
properties, so you can use CSS to make them look any way you want. The (for
division) tag indicates any discrete block of content, much like a paragraph or a head-
line. But more often it’s used to group any number of other elements, so you can
insert a headline, a bunch of paragraphs, and a bulleted list inside a single
block. The tag is a great way to subdivide a page into logical areas, like a ban-
ner, footer, sidebar, and so on. Using CSS, you can later position each area to create
sophisticated page layouts (a topic that’s covered in Part 3 of this book).
The tag is used for inline elements; that is, words or phrases that appear
inside of a larger paragraph or heading. Treat it just like other inline HTML tags
such as the tag (for adding a link to some text in a paragraph) or the
tag (for emphasizing a word in a paragraph). For example, you could use a
tag to indicate the name of a company, and then use CSS to highlight the name
using a different font, color, and so on. Here’s an example of those tags in action,
complete with a sneak peek of a couple of attributes—id and class—frequently
used to attach styles to parts of a page.
Copyright 2006, CosmoFarmer.com
Call customer service at 555-555-5501 for more information
This brief introduction isn’t the last you’ll see of these tags. They’re used fre-
quently in CSS-heavy web pages, and in this book you’ll learn how to use them in
combination with CSS to gain creative control over your web pages (see the box on
page 54).
HTML to Forget
CSS lets you write simpler HTML for one big reason: You can stop using a bunch
of tags and attributes that only make a page better looking. The tag is the
most glaring example. Its sole purpose is to add a color, size and font to text. It
doesn’t do anything to make the structure of the page more understandable.
Here’s a list of tags and attributes you can easily replace with CSS:
• Ditch for controlling the display of text. CSS does a much better job
with text. (See Chapter 6 for text-formatting techniques.)
• Stop using and to make text bold and italic. CSS can make any tag
bold or italic, so you don’t need these formatting-specific tags. However, if you
want to really emphasize a word or phrase, then use the tag (browsers
display text as bold anyway). For slightly less emphasis, use the
tag (browsers italicize content inside this tag).
22 CSS: The Missing Manual
Download at Boykma.Com
Writing HTML for
CSS
Note: To italicize a publication’s title, the tag kills two birds with one stone. It puts the title in italics
and tags it as a cited work for search engines’ benefit. This one’s a keeper.
• Skip the tag for page layout. Use it only to display tabular information like
spreadsheets, schedules, and charts. As you’ll see in Part 3 of this book, you can do
all your layout with CSS for much less time and code than the table-tag tango.
• Eliminate the awkward tag attributes that enhance only the presenta-
tion of the content: background, bgcolor, text, link, alink, and vlink set colors
and images for the page, text, and links. CSS gets the job done better (see
Chapter 7 and Chapter 8 for CSS equivalents of these attributes). Also trash the
browser-specific attributes used to set margins for a page: leftmargin, topmar-
gin, marginwidth, marginheight. CSS handles page margins easily (see
Chapter 7).
• Don’t abuse the tag. If you grew up using the tag ( in
XHTML) to insert a line break without creating a new paragraph, then you’re in
for a treat. (Browsers automatically—and sometimes infuriatingly—insert a bit
of space between paragraphs, including between headers and tags. In the
past, designers used elaborate workarounds to avoid paragraph spacing they
didn’t want, like replacing a single tag with a bunch of line breaks and
using a tag to make the first line of the paragraph look like a headline.)
Using CSS’s margin controls you can easily set the amount of space you want to
see between paragraphs, headers, and other block-level elements.
Note: In the next chapter, you’ll learn about a technique called a “CSS Reset” which eliminates the gaps
browsers normally insert between paragraphs and other tags (see page 102).
As a general rule, adding attributes to tags that set colors, borders, background
images, or alignment—including attributes that let you format a table’s colors,
backgrounds, and borders—is pure old-school HTML. So is using alignment prop-
erties to position images and center text in paragraphs and table cells. Instead, look
to CSS to control text placement (see page 130), borders (page 160), backgrounds
(page 164), and image alignment (page 187).
Tips to Guide Your Way
It’s always good to have a map for getting the lay of the land. If you’re still not sure
how to use HTML to create well-structured web pages, then here are a few tips to
get you started:
• Use only one tag per page, and use it to identify the main topic of the
page. Think of it as a chapter title: You only put one title per chapter. Using
correctly has the added benefit of helping the page get properly indexed
by search engines (see the box on page 21).
Chapter 1: Rethinking HTML for CSS 23
Download at Boykma.Com
Writing HTML for
CSS
UP TO SPEED
Validate Your Web Pages
HTML follows certain rules: For example, the tag The W3C, or World Wide Web Consortium, is the organiza-
wraps around the other tags on a page, and the tag tion responsible for determining the standards for many of
needs to appear within the tag. XHTML provides an the technologies and languages of the Web, including
even more strict set of rules to follow. It’s easy to forget HTML, XHTML, and XML.
these rules or simply make a typo. Incorrect (or invalid, as
If the W3C validator finds any errors in your page, it tells
the geeks would say) HTML causes problems like making
you what those errors are. If you use Firefox, you can down-
your page look different in different web browsers. More
load an extension that lets you validate a web page directly
importantly, you can’t create valid CSS with invalid HTML.
in that browser, without having to visit the W3C site. It can
Fortunately, there are tools for checking whether the HTML
even attempt to fix any problems it encounters. You can get
in your web pages is correctly written.
the extension here: http://users.skynet.be/mgueury/
The easiest way to check—that is, validate—your pages is on mozilla/. A similar tool is available for the Safari browser as
the W3C’s website at http://validator.w3.org/ (see well: www.zappatic.net/safaritidy/.
Figure 1-3). Get the Web Developer extension for Firefox
(http://chrispederick.com/work/web-developer); it pro-
vides a quick way to test a page in the W3C validator.
Figure 1-3:
The W3C HTML validator located at
http://validator.w3.org lets you quickly
make sure the HTML in a page is sound.
You can point the validator to an already
existing page on the Web, upload an
HTML file from your computer, or just
type or paste the HTML of a web page
into a form box and then click the
Check button.
24 CSS: The Missing Manual
Download at Boykma.Com
Writing HTML for
CSS
• Use headings to indicate the relative importance of text. Again, think outline.
When two headings have equal importance in the topic of your page, use the
same level header on both. If one is less important or a subtopic of the other, then
use the next level header. For example, follow an with an tag (see
Figure 1-4). In general, it’s good to use headings in order and try not to skip head-
ing numbers. For example, don’t follow an tag with an tag.
Figure 1-4:
Use the headline tags (, , and so on) as you
would if you were outlining a school report: Put them in
order of importance, beginning with an tag, which
should shout “Listen up! This is what this whole page
is about.”
• Use the tag for paragraphs of text.
• Use unordered lists when you’ve got a list of several related items, such as navi-
gation links, headlines, or a set of tips like these.
• Use numbered lists to indicate steps in a process or define the order of a set of
items. The tutorials in this book (see page 143) are a good example, as is a list of
rankings like “Top 10 websites popular with monks.”
• To create a glossary of terms and their definitions or descriptions, use the
(definition list) tag in conjunction with the (definition term) and
(definition description) tags. (For an example of how to use this combo, visit
www.w3schools.com/tags/tryit.asp?filename=tryhtml_list_definition.)
• If you want to include a quotation like a snippet of text from another web-
site, a movie review, or just some wise saying of your grandfather’s, try the
tag for long passages or the tag for one-liners.
• Take advantage of obscure tags like the tag for referencing a book title,
newspaper article, or website, and the tag to identify and supply
contact information for the author of a page (great for a copyright notice).
Chapter 1: Rethinking HTML for CSS 25
Download at Boykma.Com
The Importance of
the Doctype
• As explained in full on page 22, steer clear of any tag or attribute aimed just at
changing the appearance of a text or image. CSS, as you’ll see, can do it all.
• When there just isn’t an HTML tag that fits the bill, but you want to identify an
element on a page or a bunch of elements on a page so you can apply a distinc-
tive look, use the and tags (see page 26). You’ll get more advice
on how to use these in later chapters (for example, page 312).
• Don’t overuse tags. Some web designers think all they need are
tags, ignoring tags that might be more appropriate. For example, to create a
navigation bar, you could add a tag to a page and fill it with a bunch of
links. A better approach would be to use a bulleted list ( tag). After all, a
navigation bar is really just a list of links.
• Remember to close tags. The opening tag needs its partner in crime (the
closing tag), as do all other tags, except the few self-closers like and
( and in XHTML).
• Validate your pages with the W3C validator (see Figure 1-3 and the box on page
24). Poorly written or typo-ridden HTML causes many weird browser errors.
The Importance of the Doctype
As discussed in the box on page 24, HTML follows certain rules—these rules are
contained in a Document Type Definition file, otherwise known as a DTD. A DTD
is an XML document that explains what tags, attributes, and values are valid for a
particular type of HTML. And for each version of HTML, there’s a corresponding
DTD. By now you may be asking, “But what’s all this got to do with CSS?”
Everything—if you want your web pages to appear correctly and consistently in web
browsers. You tell a web browser which version of HTML or XHTML you’re using
by including what’s called a doctype declaration at the beginning of a web page. This
doctype declaration is the first line in the HTML file, and not only defines what ver-
sion of HTML you’re using (such as HTML 4.01 Transitional) but also points to the
appropriate DTD file on the Web. When you mistype the doctype declaration, you
can throw most browsers into an altered state called quirks mode.
Quirks mode is browser manufacturers’ attempt to make their software behave like
browsers did circa 1999 (in the Netscape 4 and Internet Explorer 5 days). If a mod-
ern browser encounters a page that’s missing the correct doctype, then it thinks
“Gee, this page must have been written a long time ago, in an HTML editor far, far
away. I’ll pretend I’m a really old browser and display the page just as one of those
buggy old browsers would display it.” That’s why, without a correct doctype, your
lovingly CSS-styled web pages may not look as they should, according to current
standards. If you unwittingly view your web page in quirks mode when checking it
in a browser, you may end up trying to fix display problems that are related to an
incorrect doctype and not the incorrect use of HTML or CSS.
26 CSS: The Missing Manual
Download at Boykma.Com
The Importance of
the Doctype
Note: For more (read: technical) information on quirks mode, visit www.quirksmode.org/css/
quirksmode.html and http://hsivonen.iki.fi/doctype/.
Fortunately, it’s easy to get the doctype correct. All you need to know is what ver-
sion of HTML you’re using. In all likelihood, you’re already creating web pages
using HTML 4. You may even use XHTML for your websites (see page 5).
The most popular versions of HTML and XHTML these days are HTML 4.01
Transitional and XHTML 1.0 Transitional. These types of HTML still let you use
presentational tags like the tag, thereby providing a transition from older
HTML to the newer, stricter types of HTML and XHTML. Although it’s best not
to use these tags at all, they still work in the Transitional versions, so you can phase
out these older tags at your own pace. In the strict versions of HTML and XHTML,
some older tags don’t work at all.
Note: In general, the strict versions of both HTML and XHTML disallow tags and attributes aimed at mak-
ing a page look good, like the tag and a paragraph’s center attribute. They also disallow a number
of once-popular properties like a link’s target property, which lets you make a link open in a new window.
If you’re using HTML 4.01 Transitional, type the following doctype declaration at
the very beginning of every page you create:
The doctype declaration for XHTML 1.0 Transitional is similar, but it points to a
different DTD. It’s also necessary to add a little code to the opening tag
that’s used to identify the file’s XML type—in this case, it’s XHTML—like this:
Note: If you’re using frames for your web pages, then you need to use a doctype intended for framesets.
See the W3C site for a list of proper doctypes: www.w3.org/QA/2002/04/valid-dtd-list.html.
If this entire discussion is making your head ache and your eyes slowly shut, just
make sure you use the proper doctype listed above, and always make it the first line
of your HTML file (before even the opening tag). Also it’s easy to make a
typo in this long-winded bit of code, so always make sure you validate the page (see
the box on page 36) to make sure your doctype is correct. In fact, it’s a good idea to
have a blank HTML page with the proper doctype somewhere on your computer, so
you can make a copy of it whenever you need to create a new web page. In the tuto-
rial files available from www.sawmac.com/css2e, you’ll find four basic HTML files—
one for each of the four main doctypes in use on the Web today.
Chapter 1: Rethinking HTML for CSS 27
Download at Boykma.Com
Getting the Most
out of Internet
Explorer 8
Note: Most visual web page tools like Dreamweaver and Expression Web automatically add a doctype
declaration whenever you create a new web page, and many HTML-savvy text editors have shortcuts for
adding doctypes.
Getting the Most out of Internet Explorer 8
Thanks to Microsoft’s auto-update feature, the new Internet Explorer 8 has gained
a healthy share of the browser market. Fortunately for web designers, IE 8 is the
most standards-compliant version of the browser yet. It fixes the bugs that have
plagued IE 6 and even IE 7, and works almost perfectly with version 2.1 of CSS.
That means your carefully crafted web designs should look nearly the same in IE 8,
Firefox, Safari, and Opera with little or no tinkering. As you’ll read later in this
book (for example, pages 184 and 223), you can’t say the same about IE 6 or IE 7,
which require some browser-specific code to make many designs look right.
However, IE 8 is sort of like a chameleon: It can take on the appearance of a differ-
ent version. If you’re not careful, it may not display your web pages the way you
want it to. For example, and most importantly, you must include a proper doc-
type. As mentioned in the previous section, without a doctype, browsers switch
into quirks mode. Well, when IE 8 goes into quirks mode, it tries to replicate the
look of IE 5 (!?).
But wait—there’s more! IE 8 can also pretend to be IE 7. When someone viewing
your site in IE 8 clicks a “compatibility view” button, IE 8 goes into IE 7 mode, dis-
playing pages without IE 8’s full CSS 2.1 goodness. The same thing happens if
Microsoft puts your website onto its Compatibility View List—a list of sites that
Microsoft has determined look better in IE 7 than in IE 8. If you’re designing a site
using the guidelines in this book, you won’t want IE 8 to act like IE 7…ever.
Fortunately, there’s a way to tell IE 8 to stop all this nonsense and just be IE 8.
Adding a single META tag to a web page instructs IE 8 to ignore Compatibility
View and the Compatibility View List and always display the page using its most
standards-compliant mode:
Put this instruction in the page’s section (below the tag is a good
place). This tag will work for future versions of IE, too: The “IE=edge” part of the
tag will instruct versions of Internet Explorer that are released after IE 8 to also dis-
play web pages in their standard mode. Unfortunately, you must do this on every
page of your site.
Now that your HTML ship is steering in the right direction, it’s time to jump into
the fun stuff (and the reason you bought this book): Cascading Style Sheets.
28 CSS: The Missing Manual
Download at Boykma.Com
Getting the Most
out of Internet
Explorer 8
UP TO SPEED
Cross Browser Testing
There are a lot of web browsers out there. If you use Win- buy (or borrow) a Windows machine; second, if you have
dows, you automatically get Internet Explorer and can an Intel Mac you can install Windows using Apple’s Boot
install additional browsers like Firefox, Safari, Opera, or Camp software (www.apple.com/macosx/features/
Google’s Chrome. On a Mac, you can stick with the already- bootcamp.html); a third option is to install virtualization
installed Safari browser, or run Firefox 3 or Chrome 1. software like VMWare Fusion or Parallels Desktop on your
While the very latest browsers are mostly comparable when Mac. This software lets you run a virtual Windows machine,
displaying CSS-driven web pages, you can’t say the same side-by-side with the Mac OS. You can jump between Mac
for IE 6, which is still in widespread use. Even IE 7 has its and Windows to test in various browsers in both operating
share of peculiarities. systems. It’s the most efficient testing technique for Mac
users. Both Boot Camp and virtualization software require
To really make sure your sites work for the largest audience,
a copy of the Windows OS.
you need a way to test your designs in as wide a range of
browsers as possible. Here are a few techniques: Everyone. Another option that works for both Windows and
Macs and doesn’t require installing extra software is one of
Windows. Normally, Windows computers can only run
the many cross-browser testing services that let see what
one version of IE. In other words, you can’t test in IE 6, IE 7,
your pages look like in many different operating systems and
and IE 8 on the same computer. Well, normally you can’t,
browsers. Most of these are commercial services that cost
but thanks to a nifty little program named IETester, you can
money. Litmus (http://litmusapp.com/) takes screenshots of
actually see what a web page looks like in IE 5.5, IE 6, IE 7,
your pages in a ton of different browsers; CrossBrowserTest-
and IE 8, all running side-by-side at the same time. Down-
ing.com (www.crossbrowsertesting.com) lets you remotely
load this great program from www.my-debugbar.com/
view another computer—in other words, you can actually
wiki/IETester/HomePage.
interact with a Windows machine, running Internet Explorer
You should also install the other major browsers on your 8, 7, and 6, plus Firefox and Safari. This scheme not only lets
computer: Firefox, Safari, Opera, and Chrome. Fortunately, you test the visual design, but also lets you interact with the
you don’t necessarily need a Mac for testing, since Apple’s page and test how your JavaScript programming works in
browser—Safari—is also available for Windows. that browser. One of the original services, Browsercam
(www.browsercam.com), offers a wide range of services
Mac. Testing is a bit trickier for Mac people. You have to
including both screenshots (like Litmus) and remote access
test in Internet Explorer—it’s still the most used browser in
to real computers (like CrossBrowserTesting).
the world, and the display problems in IE 6 and IE 7 mean
that your painstakingly crafted design might look great for
you, but fall apart in IE. You have a few options: First, you can
Chapter 1: Rethinking HTML for CSS 29
Download at Boykma.Com
Download at Boykma.Com
