HTML and CSS Reference
In-Depth Information
Figure 3.21 shows how this HTML appears in a typical browser.
Figure 3.21: Showing how a list can be changed into a paragraph with the
display
property
Note that even though the list items have lost their bullets and are displayed
inline, the list itself still has its block properties, including the extra let mar-
gin that lists typically have. his is probably not exactly what you wanted. You
can ix it by adjusting the list's margin with another CSS statement like so:
ul.post-listing { margin-left: -2em; }
Sometimes the opposite action is necessary: changing a collection of inline
elements, such as anchor or span elements, into block elements so that they
display as paragraphs would. But perhaps the most important use of the
display
property is to make items appear and disappear in response to a user's
action. he HTML code and CSS in Example 3.22 cause the irst paragraph
to disappear when the mouse button is held down over the “missing” link. It
reappears when the button is released. No new page is loaded when this hap-
pens because the link's
href
attribute points to the currently loaded page.
Example 3.22: disappearing an element by using the
display
property
<!DOCTYPE html>
<html>
<head>
<title>Example 3.22</title>
<style type="text/css">
a:active + p { display: none; } /* the paragraph after the link */
</style>
continues
