HTML and CSS Reference
In-Depth Information
textual content of the header element out of the visible area of the browser window by using
an extremely large negative text-indent value, like so:
h1#replaced {
height: 55px; /* height of the replacement image */
text-indent: -20000em;
background-image: url("replacement_image.jpg");
background-repeat: no-repeat;
}
The text is technically still there, but it's shifted so far to the left that it will not be seen in
any imaginable browser window. But since it is still there, search engine crawlers and screen
readers will still read it.
Complete Example
To demonstrate several of the techniques discussed in this chapter, we've put together a simple
page containing headers, paragraphs, and a block quotation. Using three colors (red, almost-
black, and a lighter gray), two font groupings (one serif, one sans), a bit of CSS, and absolutely
no graphics, we crafted an elegantly styled page very quickly. It goes to show that the art of
typography is alive and well on the Web.
The code for the example page follows, starting with the markup. For brevity, we have left all
the text content out. For the full markup, see the web_typography.html file in the code download
for this chapter.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Web Typography Example</title>
<link rel="stylesheet" media="screen" type="text/css" href="typography.css" />
</head>
<body>
<div id="content">
<h1>Lorem ipsum</h1>
<p class="intro">
...content goes here...
</p>
<h2>dolor sit amet</h2>
<p>
...content goes here...
</p>
<blockquote>
<p>
...content goes here...
</p>
</blockquote>
Search WWH ::




Custom Search