When a document displays on a user's screen, what shows up is not the underlying HTML code. Instead, it is the browser's interpretation of that code. In the absence of any explicit instructions to the contrary, the browser displays the document using a set of default parameters. In HTML, for example, the browser puts P elements in separate blocks of text and LI elements in blocks with a label on the side, but it does not create a separate block for EM elements. You can affect the basic shape of elements onscreen by using the display property. With this property, you can specify that each element be displayed onscreen as one of the following:
In this chapter, we show you how to use the display property to influence the form of elements onscreen. You may think that a heading will always be displayed in its own block or that a list item will always be part of a stepped-out list, with list item on top of list item, but this is not the case. By changing the display property, you can create entirely different effects. We give you some examples of how this is done. In this chapter, we also discuss two related properties:
This chapter also explains how to insert extra text before and after elements. This is useful if the standard list bullets and numbers are not sufficient, but it can do much more. |