Book Home Thursday 30th of June 2016 05:07:55 AM Cascading Style Sheets: The Definitive GuideSearch this book

Full Text Search

If you are having difficulty searching, or if you have not used this search utility before, please read this.

italic and oblique text. For that, it's easiest to turn to Figure 5-24, which illustrates the differences very clearly.

Figure 5-24

Figure 5-24. Italic and oblique text in detail

Basically, italic text is in some way its own font, with small changes made to the structure of each letter to account for the altered appearance. This is especially true of serif fonts, where in addition to the fact that the text characters "lean," the serifs may be altered in an italic face. Oblique text, on the other alt="Library Navigation Links" >

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

If the overflow is set to scroll, the element's content is clipped -- that is, cannot be seen -- but some way is provided to make the extra content available to the user. In a web browser, this would mean a scrollbar (or set of them) or another method of accessing the content without altering the shape of the element itself. One possibility is depicted in Figure 9-9, which could result from the following styles:

DIV#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em;
Figure 6-39

Figure 6-39. Centering the background image using percentages

In order to understand this concept, let's examine this process in closer detail. When you center a background image in an element, the point in the image which can be described as 50% 50% is lined up with the point in the element that can be described the same way. This is shown in Figure 6-40.

Figure 6-40

Figure 6-40. Lining up the center of the image with the center of the browser window

Thus, if you want to place a single background image a third of thecolor to be applied to all H2 elements that are subsection headings. It would be much better to pick a class name like subsec or even sub-section. Both of these names have the advantage of actually meaning something -- and, furthermore, of being independent of any presentational concepts. After all, you might decide later to make all subsection titles dark red instead of dark blue, and the statement H2.dkblue {color: maroon;} is a little silly.

Figure 6-20

Figure 6-20. The results of a more sophisticated style sheet

This is but the tiniest beginning of what's possible, ofcourse. By all means, try some examples of your own!

6.1.4. Good Practices

Youmay have noticed that in almost every circumstance, where we set aforeground color, we also set a background color. In general, this isso margin-left is forced to beauto, not margin-right. This isnot so much an issue under CSS1 as it is in CSS2, which introducesproperties related to writing direction.

If both margins are set explicitly, and width isauto, then the value of widthwill be set to be whatever is needed to reach the required total(that is, the content width of the parent element). The following