CSS Cookbook | O'Reilly Media

Content preview·Buy reprint rights for this chapter

Before Cascading Style Sheets (CSS) came along, web developers used font tags to set the color, size, and style of text on different parts of a web page:

<font face="Verdana, Arial" size="+1" color="blue">Hello, 
World!</font>

Although this method is effective for changing the appearance of type, using it to manipulate an entire web site containing multiple font tags results in time-consuming updates, adds to the overall file size of the web document, and increases the likelihood that errors will occur in the markup.

CSS helps to eliminate these design and maintenance problems. We can solve this problem in many ways, such as placing the content in a p element:

<p>Hello, World!</p>

Then use CSS to dictate the style of the document by placing this CSS block in the head of the document:

<style type="text/css" media="all">
 p {
  color: blue;
  font-size: small;
  font-family: Verdana, Arial, sans-serif;
 }
</style>

Now the document's structure and its visual presentation are separated. Because they are in separate areas, the process of editing and maintaining a web site's design including typography is simplified immensely.

It is important to be able to read the contents of a web page online, and CSS enables you to accomplish myriad tasks for controlling web page typography. In addition to setting the color, style, and size of fonts, this chapter also covers techniques for setting initial caps, creating visually compelling pullquotes, modifying leading, and more.

You want to set the typeface of text on a web page.

Use the font-family property:

p {
 font-family: Georgia, Times, "Times New Roman", serif;
}

You can specify the fonts you want the browser to render on a web page by writing a comma-delimited list for the value of the

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Before Cascading Style Sheets (CSS) came along, web developers used font tags to set the color, size, and style of text on different parts of a web page:

<font face="Verdana, Arial" size="+1" color="blue">Hello, 
World!</font>

Although this method is effective for changing the appearance of type, using it to manipulate an entire web site containing multiple font tags results in time-consuming updates, adds to the overall file size of the web document, and increases the likelihood that errors will occur in the markup.

CSS helps to eliminate these design and maintenance problems. We can solve this problem in many ways, such as placing the content in a p element:

<p>Hello, World!</p>

Then use CSS to dictate the style of the document by placing this CSS block in the head of the document:

<style type="text/css" media="all">
 p {
  color: blue;
  font-size: small;
  font-family: Verdana, Arial, sans-serif;
 }
</style>

Now the document's structure and its visual presentation are separated. Because they are in separate areas, the process of editing and maintaining a web site's design including typography is simplified immensely.

It is important to be able to read the contents of a web page online, and CSS enables you to accomplish myriad tasks for controlling web page typography. In addition to setting the color, style, and size of fonts, this chapter also covers techniques for setting initial caps, creating visually compelling pullquotes, modifying leading, and more.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to set the typeface of text on a web page.

Use the font-family property:

p {
 font-family: Georgia, Times, "Times New Roman", serif;
}

You can specify the fonts you want the browser to render on a web page by writing a comma-delimited list for the value of the font-family property. If the browser can't find the first font on the list, it tries to find the next font, and so on, until it finds a font.

If the font name contains spaces, enclose the name with single or double quotation marks. You can enclose all font names in quotes, regardless of whether they contain spaces, but if you do, browsers with poor CSS implementations might not render the fonts accurately.

At the end of the list of font choices, you should insert a generic font family. CSS offers five font family values to choose from, as shown in Table 1-1.

Table 1-1: Generic font family values and examples
Generic font family values	Font examples
serif	Georgia, Times, Times New Roman, Garamond, and Century Schoolbook
sans-serif	Verdana, Arial, Helvetica, Trebuchet, and Tahoma
monospace	Courier, MS Courier New, and Prestige

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to set the size of type used on a web page.

Set the values of fonts using the font-size property:

P {
 font-size: 0.9em;
}

Setting the size of the font with percentages causes the browser to calculate the size of the font based on the size of the parent element. For example, if the font size for the body is set to 12 pixels and the font size for p element is set to 125%, the font size for the text in paragraphs is 15 pixels.

You can use percentages, length units, and font-size keywords to set type size. Length units fall into two categories: absolute and relative. Absolute length units include the following:

Inches (in)
Centimeters (cm)
Millimeters (mm)
Points (pt)
Picas (pc)

A point, in terms of the CSS specification, is equal to 1/72nd of an inch and a pica is equal to 12 points.

Because browser displays vary due to different operating systems and video settings, setting type in a fixed (or absolute) value doesn't make much sense. In fact, it's best to avoid absolute measurements for web documents, unless you're styling documents for fixed output. For example, when you create a style sheet to print a web document, absolute length units are preferred. For more on creating style sheets for printing, see Chapter 9.

The CSS specification doesn't dictate how browser vendors should treat text when the font-size property is set to a value of zero. Therefore different browsers interpret the value unpredictably. For example, such text isn't visible in the Mozilla browser. In Internet Explorer for Macintosh and Safari, the text isn't hidden, but, rather, is displayed at the default value of the font size. The Opera browser displays the text at a smaller, but still legible, size. And Internet Explorer for Windows sets the type size to a small, illegible, but still visible line of text that appears to be equal to the size of 0.1em, as shown in Figure 1-4. If you want to make text invisible, use the CSS properties

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to override control over font sizes.

Use the !important rule to override a user's style sheet rules:

P {
 font-size: 12px !important;
}

The !important rule consists of an exclamation mark (!) followed immediately by the word important.

In some browsers, a user can have a style sheet set up for browsing the Web that enables him to set font sizes (and other CSS properties) to his liking. However, as a designer of a web document, you might want to make sure your designs render in the manner you planned. The !important rule gives you a little insurance that your designs remain intact. (However, the nature of the medium means that designs are never precise or "pixel-perfect" from one display to another.)

Although you as the designer write the !important CSS rules, the user also can write these rules in his own style sheet. And in the CSS 2 specification, !important rules the user writes override any !important rules the designer writes.

The CSS 2.1 specification on !important rules at http://www.w3.org/TR/CSS21/cascade.html#important-rules.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want a paragraph to begin with an initial cap.

Mark up the paragraph of content with a p element:

<p>Online, activity of exchanging ideas is sped up. The 
distribution of messages from the sellin of propaganda to the 
giving away of disinformation takes place at a blindingly fast 
pace thanks to the state of technology...</p>

Use the pseudo-element :first-letter to stylize the first letter of the paragraph, as shown in Figure 1-7:

p:first-letter {
 font-size: 1.2em;
 background-color: black;
 color: white;
}

Figure 1-7: A simple initial cap

The CSS specification offers an easy way to stylize the first letter in a paragraph as a traditional initial or drop cap: use the :first-letter pseudo-element (:first-letter isn't supported in most browsers, including Internet Explorer 4 and 5 for Windows, Netscape Navigator 4, and Internet Explorer 4.5 for Macintosh).

Wrap a span element with a class attribute around the first letter of the first sentence of the first paragraph:

<p><span class="initcap">O</span>nline, activity of exchanging ideas is sped 
up. The distribution of messages from the selling of propaganda 
to the giving away of disinformation takes place at a blindingly 
fast pace thanks to the state of technology...</p>

Then set the style for the initial cap:

p .initcap {
 font-size: 1.2em;
 background-color: black;
 color: white; 
}

Initial caps, also known as versals, traditionally are enlarged in print to anything from a few points to three lines of text.

The CSS 2.1 specification for the :first-letter pseudo-element at http://www.w3.org/TR/CSS21/selector.html#x52; for more information on initial caps in general, see

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to place a large initial cap in the center of a paragraph.

Wrap a span element with a class attribute around the first letter of the first sentence of the first paragraph:

<p><span class="initcap">O</span>nline, activity of exchanging ideas is sped 
up. The distribution of messages from the selling of propaganda 
to the giving away of disinformation takes place at a blindingly 
fast pace thanks to the state of technology...</p>

In conjunction with styling the initial letter through the span tag with a class selector, create the decoration that sets the text indent for the paragraph (see Figure 1-8):

p {
 text-indent: 37%;
 line-height: 1em;
}
p .initcap {
 font-size: 6em;
 line-height: 0.6em;
 font-weight: bold;
}

Figure 1-8: A larger, centered initial cap

This Solution works due to the interaction of three CSS properties. The first is the text-indent property, which moves the first line toward the middle of the paragraph. The value is set to 37%, which is a little bit more than one-third the distance from the left side of the paragraph, as shown in Figure 1-9, but not enough to "center" the initial cap.

Figure 1-9: The indented text

The next property that helps is the font-size property. Setting the size to 6em makes the font six times (or 600%) larger than the default size set for fonts in the browser, as shown in Figure 1-10.

Figure 1-10: The initial cap enlarged six times its normal height

Because the font size is six times as large as the rest of the type, the leading on the first line is now deeper than it is on the remaining lines. To help adjust that, set the line height for the

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to use an image for an initial cap.

Wrap a span element around the first letter of the first sentence of the first paragraph:

<p><span class="initcap">O</span>nline, activity of exchanging 
ideas is sped up. The distribution of messages from the selling of
propaganda to the giving away of disinformation takes place at a 
blindingly fast pace thanks to the state of technology...</p>

Set the contents inside the span to be hidden:

p.initcap {
 display: none;
}

Then set an image to be used as the initial cap in the background of the paragraph (see Figure 1-11):

p {
 line-height: 1em;
 background-image: url(initcap-o.gif);
 background-repeat: no-repeat;
 text-indent: 35px;
 padding-top: 45px;
}

Figure 1-11: An image used as an initial cap

The first step of this Solution is to create an image for use as the initial cap. Once you have created the image, make a note of its width and height. In this example, the image of the letter measures 55 by 58 pixels (see Figure 1-12).

Figure 1-12: The image of the initial cap

Next, hide the first letter of the HTML text by setting the display property to none. Then put the image in the background of the paragraph, making sure that the image doesn't repeat by setting the value of background-repeat to no-repeat:

background-image: url(initcap-o.gif);
background-repeat: no-repeat;

With the measurements already known, set the width of the image as the value for text-indent and the height of the image as the padding for the top of the paragraph (see Figure 1-13):

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to use CSS properties to design a heading that is different from the default. For example, you want to put the heading in Figure 1-14 into italics, as shown in Figure 1-15.

Figure 1-14: The default rendering of a heading

Figure 1-15: The stylized text of a heading

First, properly mark up the heading:

<h2>Designing Instant Gratification</h2>
<p>Online, activity of exchanging ideas is sped up. The 
distribution of messages from the selling of propaganda to the
 giving away of disinformation takes place at a blindingly fast
pace thanks to the state of technology...</p>

Then, use the font shorthand property to easily change the style of the heading:

h2 { 
 font: bold italic 2em  Georgia, Times, "Times New Roman", serif;
 margin: 0;
 padding: 0;
} 
p {
 margin: 0;
 padding: 0;
}

A shorthand property combines several properties into one. The font property is just one of these timesavers. One font property can represent the following values:

font-style
font-variant
font-weight
font-size/line-height
font-family

The first three values can be placed in any order, while the others need to be in the order shown.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to stylize the borders on the top and bottom of a heading, as shown in Figure 1-16.

Figure 1-16: A heading stylized with borders

Use the border-top and border-bottom properties when setting the style for the heading:

h2 {
 font: bold italic 2em Georgia, Times, "Times New Roman", serif;
 border-bottom: 2px dashed black;
 border-top: 10px solid black;
 margin: 0;
 padding: 0.5em 0 0.5em 0;
 font-size: 1em;
}
p {
 margin: 0;
 padding: 10px 0 0 0;
}

In addition to top and bottom borders, a block-level element also can have a border on the left and right sides via the border-left and border-right properties, respectively. The border-top, border-bottom, border-left, and border-right properties are shorthand properties that enable developers to set the width, style, and color of each side of a border.

Without the two shorthand border declarations in the Solution, the CSS rule for the heading would be expanded by four extra declarations:

h2 {
 font: bold italic 2em Georgia, Times, "Times New Roman", serif;
 border-bottom-width: 2px ;
 border-bottom-style: dashed;
 border-bottom-color: black;
 border-top-width: 10px;
 border-top-style: solid;
 border-top-color: black;
 margin: 0;
 padding: 0.5em 0 0.5em 0;
 font-size: 1em;
}

Also available is a shorthand property for the top, bottom, left, and right shorthand properties: border. The border property sets the same style for the width, style, and color of the border on each side of an element:

h2 {
 border: 3px dotted #33333;
}

When setting the borders, make sure to adjust the padding to put enough whitespace between the borders and the text of the heading. This aids in readability. Without enough whitespace on a heading element, the text of the heading can appear cramped.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to place a repeating image at the bottom of a heading, like the grass in Figure 1-17.

Figure 1-17: A background image used with a heading

Use the background-image, background-repeat, and background-position properties:

h2 { 
 font: bold italic 2em Georgia, Times, "Times New Roman", serif; 
 background-image: url(tall_grass.jpg);
 background-repeat: repeat-x;
 background-position: bottom;
 border-bottom: 10px solid #666;
 margin: 10px 0 0 0;
 padding: 0.5em 0 60px 0;
}

Make a note of the height of the image used for the background. In this example, the height of the image is 100 pixels (see Figure 1-18).

Figure 1-18: An image of tall grass

Set the background-repeat property to a value of repeat-x, which will cause the image to repeat horizontally:

background-image: url(tall_grass.jpg);
background-repeat: repeat-x;

Next, set the background-position property to bottom:

background-position: bottom;

The background-position can take up to two values corresponding to the horizontal and vertical axes. Values for background-position can be a length unit (such as pixels), a percentage, or a keyword. To position an element on the x axis, use the keyword values left, center, or right. For the y axis, use the keyword values top, center, or bottom.

When the location of the other axis isn't present, the image is placed in the center of that axis, as shown in Figure 1-19.

background-position: bottom;

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to stylize the text for a pull quote so that it is different from the default. Undifferentiated quotes aren't obviously from another writer (see Figure 1-20), whereas stylized quotes are (see Figure 1-21).

Figure 1-20: The default rendering of the text for a pull quote

Figure 1-21: The stylized pull quote

Use the blockquote element to indicate the pull quote semantically in the markup:

<blockquote>
 <p>Ma quande lingues coalesce, li grammatica del resultant
 lingue es plu simplic e regulari quam ti del coalescent 
lingues.</p>
 <div class="source">John Smith at the movies</div>
</blockquote>

With CSS, apply the margin, padding, and color values to the blockquote element:

blockquote {
 margin: 0;
 padding: 0;
 color: #555;
}

Next, set the style for the p and div elements nested in the blockquote element:

blockquote p {
 font: italic 1em Georgia, Times, "Times New Roman", serif; 
 font-size: 1em;
 margin: 1.5em 2em 0 1.5em;
 padding: 0;
}
blockquote .source {
 text-align: right;
 font-style: normal;
 margin-right: 2em;
}

A pull quote is used in design to grab a reader's attention so that he will stick around and read more. One easy way to create a pull quote is to change the color of a portion of the main text. Improve on this by adding contrast: change the generic font family of the pull quote so that it is different from that of the main text. For example, if the main text of a web document is set in sans-serif, set the pull quote text to a serif font.

Recipe 1.11 and Recipe 1.12 for more information on designing pullquotes with CSS.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to stylize a pull quote with borders on the top and bottom, as in Figure 1-22.

Figure 1-22: A stylized pull quote using borders

To put borders on the left and right, instead of the top and bottom, use the border-left and border-right properties:

border-left: 1em solid #999;
border-right: 1em solid #999;

Use the blockquote element to mark up the pull quote content:

<blockquote>
 <p>&laquo;Ma quande lingues coalesce, li 
grammatica del.&raquo;</p>
</blockquote>

Next, set the CSS rules for the border and text within the pull quote:

blockquote {
 float: left;
 width: 200px;
 margin: 0 0.7em 0 0;
 padding: 0.7em;
 color: #666;
 background-color: black;
 font-family: Georgia, Times, "Times New Roman", serif;
 font-size: 1.5em;
 font-style: italic;
 border-top: 1em solid #999;
 border-bottom: 1em solid #999;
}
blockquote p {
 margin: 0;
 padding: 0;
 text-align: left;
 line-height: 1.3em;
}

Set the float property as well as the width property for the blockquote element. These two CSS properties allow the main content to wrap around the pull quote:

float: left;
width: 200px;

Contrast the pull quote with the surrounding text by changing the quote's foreground and background colors:

color: #666;
background-color: black;

Use the border-top and border-bottom properties to match the color of the text in the pull quote:

border-top: 1em solid #999;
border-bottom: 1em solid #999;

Chapter 7 for several page-layout techniques that take advantage of the float property; Recipe Recipe 1.8 for styling headings with borders; Recipe 10.3 and Recipe 10.4 for more on designing with contrast.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to stylize a pull quote with images on either side, such as the curly braces in Figure 1-23.

Figure 1-23: A Pull quote with images

Use the blockquote element to mark up the pull quote content:

<blockquote>
 <p>Ma quande lingues coalesce, li grammatica del resultant 
lingue es plu simplic e regulari quam ti.</p>
</blockquote>

Then set the style for the pull quote, placing one image in the background of the blockquote element and another in the background of the p:

blockquote {
 background-image: url(bracket_left.gif);
 background-repeat: no-repeat;
 float: left;
 width: 175px;
 margin: 0 0.7em 0 0;
 padding: 10px 0 0 27px;
 font-family: Georgia, Times, "Times New Roman", serif;
 font-size: 1.2em;
 font-style: italic;
 color: black;
}
blockquote p {
 margin: 0;
 padding: 0 22px 10px 0;
 width:150px;
 text-align: justify;
 line-height: 1.3em;
 background-image: url(bracket_right.gif);
 background-repeat: no-repeat;
 background-position: bottom right;
}

For this Solution, the bracket images for the pull quote come in a pair, with one at the upper left corner and the other at the bottom right corner. Through CSS, you can assign only one background image per block-level element.

The workaround is to give these images the proper placement; put one image in the background of the blockquote element and the other in the p element that is a child of the blockquote element:

blockquote {
 background-image: url(bracket_left.gif);
 background-repeat: no-repeat;
 float: left;
 width: 175px;
}
blockquote p {
 background-image: url(bracket_right.gif);
 background-repeat: no-repeat;
 background-position: bottom right;
}

Then adjust the padding, margin, and width of the blockquote and p elements so that you have an unobstructed view of the images:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to place an indent in the first line of each paragraph, turning the paragraphs shown in Figure 1-25 to the paragraphs shown in Figure 1-26.

Figure 1-25: The default rendering of the paragraphs

Figure 1-26: The paragraphs with first lines indented

Use the text-indent property to create the indent:

p {
 text-indent: 2.5em;
 margin: 0 0 0.5em 0;
 padding: 0;
}

The text-indent property can take absolute and relative length units as well as percentages. If you use percentages, the percentage refers to the element's width and not the total width of the page. In other words, if the indent is set to 35% of a paragraph that is set to a width of 200 pixels, the width of the indent is 70 pixels.

The CSS 2.1 specification for more on the text-indent property at http://www.w3.org/TR/CSS21/text.html#propdef-text-indent.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to indent entire paragraphs, turning Figure 1-27 into Figure 1-28.

Figure 1-27: The paragraphs as the browser usually renders them

Figure 1-28: Indented paragraphs

To achieve the desired effect, use class selectors:

p.normal {
 padding: 0;
 margin-left: 0;
 margin-right: 0;
}
p.large {
 margin-left: 33%;
 margin-right: 5%;
}
p.medium {
 margin-left: 15%;
 margin-right: 33%;
}

Then place the appropriate attribute in the markup:

<p class="normal">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit,  sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna al iquam erat volutpat.</p>
<p class="large">Epsum factorial non deposit quid pro quo hic 
escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
Souvlaki ignitus carborundum e pluribus unum.</p>
<p class="medium ">Li Europan lingues es membres del sam 
familie. Lor separat existentie es un myth. Por scientie, musica,
sport etc., li tot Europa usa li sam vocabularium</p>

Class selectors pick any HTML element that uses the class attribute. The difference between class and type selectors is that selectors pick out every instance of the HTML element. In the following two CSS rules, the first selector is a type selector that signifies all content marked as h2 be displayed as red while the following CSS rule, a class selector, sets the padding of an element to 33%:

h2 {
  color: red;
}
.largeIndent {
  padding-left: 33%;
}

Combining both type and class selectors on one element gains greater specificity over the styling of elements. In the following markup, the third element is set to red and also has a padding on the left set to 33%:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to align text to be justified on both the left and right sides, as in Figure 1-29.

Figure 1-29: The paragraph justified on both sides

Use the text-align property:

P {
 width: 600px;
 text-align: justify;
}

How well does text justification work? According to the CSS 2.1 specification, it depends on the algorithms developed by the engineers who made the browser being used to view the web page. Because there isn't an agreed-upon algorithm for justifying text, the look of the text varies from browser to browser, even though the browser vendor technically supports justification.

Browser support for the property is good in Internet Explorer 4+ for Windows, Internet Explorer 5 for Macintosh, Safari, and Opera 3+. In those browsers, justified text looks pleasing to the eye. In other browsers, justified text may look bad; for example, it might have large whitespace between words.

The CSS 2.1 specification about the text-align property at http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to set the first line of a paragraph in boldface, as in Figure 1-30.

Figure 1-30: The first line set to bold

Use the :first-line pseudo-element to set the style of the first line:

p:first-line {
 font-weight: bold;
}

Just like a class selector, a pseudo-element enables you to manipulate the style of parts of a web document. Unlike a class selector, however, resizing a browser window or changing the size of the font can change the area marked by a pseudo-element. In this Solution, the amount of text in the first line can change if the browser is resized, as shown in Figure 1-31.

Figure 1-31: The amount of text changing when the browser is resized

The CSS 2.1 specification for the :first-line pseudo-element at http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to stylize the first line of a paragraph and include an image; for example, see Figure 1-32.

Figure 1-32: The first line with a background image

Use the background-image property within the :first-line pseudo-element:

p:first-line {
 font-size: 2em;
 background-image: url(background.gif);
}

Through the :first-line selectors styles can only be applied to the first line of text of an element and not the width of the element itself.

In addition to the background-image property, the :first-line pseudo-element also supports the following properties allowing for greater design control:

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-shadow
line-height
clear

The CSS 2.1 specification for the :first-line pseudo-element at http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to highlight a portion of the text in a paragraph, as in Figure 1-33.

Figure 1-33: Highlighted text

Use the strong element to mark up the portions of text you want to highlight:

<p>The distribution of messages from the selling of propaganda 
to the giving away of disinformation takes place at a blindingly 
fast pace thanks to the state of technology... <strong>This 
change in how fast information flows revolutionizes the 
culture.</strong></p>

Then set the CSS rule to set the highlighted:

strong {
 font-weight: normal;
 background-color: yellow;
}

Although the strong element is used in this Solution, you also can use the em element instead of the strong element to mark highlighted text. The HTML 4.01 specification states that em should be used for marking emphasized text, while strong "indicates stronger emphasis."

Once the text has been marked, set the highlighter color with the background-color property. Because some browsers apply a bold weight to text marked as strong, set the font-weight to normal. When using the em element, be sure to set the font-style to normal as this keeps browsers from setting the type in italic, as shown in the next code listing.

em { 
 font-style: normal;
 background-color: #ff00ff;
}

The HTML specification for strong and em at http://www.w3.org/TR/html401/struct/text.html#edef-STRONG.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to leave more or less space between lines. Figure 1-34 shows the browser default, and Figure 1-35 shows paragraphs with half as much space again.

Figure 1-34: The default leading of a paragraph

Figure 1-35: Increased leading between the lines of text

Use the line-height:

P {
 line-height: 1.5em;
}

As the line-height value increases, the distance between the lines of text grows. As the value decreases, the distance between the lines of text shrinks and eventually the lines overlap each other. Designers refer to the line height as the leading .

A line-height value can be a number and a unit such as points, just a number, or a number and a percentage symbol. If the line-height value is just a number, that value is used as percentage or a scale unit for the element itself as well as for child elements. Negative values aren't allowed for line-height.

The following example effectively sets the font-size to 12px and the line-height to 14.4px ((10px * 1.2) * 1.2px = 14.4px):

body {
 font-size: 10px;
}
p {
 font-size: 1.2em;
 line-height: 1.2;
}

You also can set the line-height property with the shorthand font property when paired with a font-size value. The following line transforms any text in a p element to have a font size of 1em, to have a line-height of 1.5em, and to display in a sans-serif typeface:

p {
 font: 1em/1.5em sans-serif;
}

The CSS 2.1 specification on the line-height property at http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height; Recipe 1.6 for more information on the

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

From the most obvious design elements, such as the font and leading used in paragraphs and headings, to those that are often overlooked, such as the size of the margins, every element you place in the layout of a web page adds to the intended message of the content being displayed.

This chapter covers the page elements that comprise a web page. Page elements are items that affect the appearance of a web page, but aren't necessarily a part of the page. For example, a border around the viewport, the area of a web page that is seen by the user in the web browser, is a page element.

By manipulating elements such as the margins and borders surrounding a web page, you effectively frame the content of the page without actually styling the content. Such simple changes can affect the page's overall design in a profound way, or they can add that final, subtle detail that completes the design.

You want to get rid of the whitespace around the edges of a web page and between the browser chrome and the contents of the page, as shown in Figure 2-1.

Figure 2-1: Page margins visible as the whitespace around the edges of a web page

Set the value of the margin and padding properties for the html and body elements to 0:

html, body {
 margin: 0;
 padding: 0;
 position: absolute;
 top: 0;
 left: 0;
}

Setting the margin and padding properties of the body element to 0 helps create a full-bleed effect—in other words, it eliminates the whitespace around a web page (the units in this case don't matter). And setting the position to absolute and the values for top and left to 0 helps remove the body margins in Netscape Navigator 4.

However, depending on the content of the web page, the margin and padding

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

From the most obvious design elements, such as the font and leading used in paragraphs and headings, to those that are often overlooked, such as the size of the margins, every element you place in the layout of a web page adds to the intended message of the content being displayed.

This chapter covers the page elements that comprise a web page. Page elements are items that affect the appearance of a web page, but aren't necessarily a part of the page. For example, a border around the viewport, the area of a web page that is seen by the user in the web browser, is a page element.

By manipulating elements such as the margins and borders surrounding a web page, you effectively frame the content of the page without actually styling the content. Such simple changes can affect the page's overall design in a profound way, or they can add that final, subtle detail that completes the design.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to get rid of the whitespace around the edges of a web page and between the browser chrome and the contents of the page, as shown in Figure 2-1.

Figure 2-1: Page margins visible as the whitespace around the edges of a web page

Set the value of the margin and padding properties for the html and body elements to 0:

html, body {
 margin: 0;
 padding: 0;
 position: absolute;
 top: 0;
 left: 0;
}

Setting the margin and padding properties of the body element to 0 helps create a full-bleed effect—in other words, it eliminates the whitespace around a web page (the units in this case don't matter). And setting the position to absolute and the values for top and left to 0 helps remove the body margins in Netscape Navigator 4.

However, depending on the content of the web page, the margin and padding properties might not be all you need to change to get a full-bleed effect. Default properties on other elements can have unexpected side effects when attempting to change the page margin For example, if h1 is the

body
element

's first child element, some unintended whitespace will appear above the headline and below the top of the browser's viewport. Figure 2-2 shows this undesired effect; the background color of the headings and paragraphs is gray so that you can more clearly see the effect.

Figure 2-2: Whitespace above the heading and below the top of the browser's viewport

To ensure the full-bleed effect in this situation you should set the margin and padding of the offending element (in this case, h1, h2, h3) to 0 as well as the body. This sets all the sides of the element's padding to 0. If that setup isn't possible (for example, you need to have a value at the bottom padding or margin), set the

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to adjust the color of the scrollbar on a browser's viewport, or the window on the browser.

Use the properties that manipulate scrollbar colors in browsers that support it:

body,html {
 scrollbar-face-color: #99ccff;
 scrollbar-shadow-color: #ccccff;
 scrollbar-highlight-color: #ccccff;
 scrollbar-3dlight-color: #99ccff;
 scrollbar-darkshadow-color: #ccccff;
 scrollbar-track-color: #ccccff;
 scrollbar-arrow-color: #000033;
}

Because these properties aren't part of the W3C recommendations for CSS, browser vendors don't have to put in support for these properties. This Solution works only on the KDE Konqueror browser and on Internet Explorer 5.5+ for Windows. Other browsers will skip over the rules as though they weren't there. These rules won't be validated by services such as http://jigsaw.w3.org/css-validator/validator-uri.html.

Although you might think of a scrollbar as a simple tool, it's actually composed of several widgets that create a controllable 3D object. Figure 2-4 spotlights the different properties of a scrollbar. As you can see, to create a truly different color scheme for the scrollbar, you must alter the value of seven properties.

Figure 2-4: The parts of a scrollbar that can be affected by proprietary CSS for Internet Explorer for Windows

In addition to adjusting the scrollbar of the browser viewport, you also can adjust the colors of the scrollbar in the textarea for a web form, framesets, iframes, and generally anything with a scrollbar:

.highlight {
 scrollbar-face-color: #99ccff;
 scrollbar-shadow-color: #ccccff;
 scrollbar-highlight-color: #ccccff;
 scrollbar-3dlight-color: #99ccff;
 scrollbar-darkshadow-color: #ccccff;
 scrollbar-track-color: #ccccff;
 scrollbar-arrow-color: #000033;
}

<form>
 <textarea class="highlight"></textarea>
</form>

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You want to center parts of a web page, as in Figure 2-5.

Figure 2-5: The headline text centered

To center text in a block-level element, use the text-align property:

h1, h2, h3 {
 text-align:center;
}

By using text-align, you can center text inside block-level elements. However, in this example, the heading takes up the entire width of the body element, and if you don't apply a background color to the element, you probably won't even notice this is happening. The gray background color in Figure 2-6 shows the actual width of the centered elements.

Figure 2-6: The actual width of the elements shown by the gray background color

An alternative approach is to use margins to center text within its container:

h1, h2, h3 {
 margin-left: auto;
 margin-right: auto;
}

When you set the margin-left and margin-right properties to auto, you center the element inside its parent element. However, older but still popular browsers won't render the presentation correctly. So, workarounds are needed for individual situations.

Section 2.3.3.1: Tables

To center a table, place the table as the child of a div element:

<div class="center">
 <table width="50%" border="1" cellpadding="30">
  <tr>
   <td>This is the first cell</td>
   <td>This is the second cell</td>
  </tr>
  <tr>
   <td>This is the third cell, it's under the first cell</td>
   <td>This is the fourth cell, it's under the second cell.</td>
  </tr>
 </table>
</div>

Then write the following CSS rule:

.center {
  text-align: center;
}
.center table {
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get

Table of Contents

Section 2.3.3.1: Tables