HTML and CSS Reference
In-Depth Information
FIGURE 8.9
Inline list items.
Setting the
display
property to
none
removes the selected elements from the page
entirely. Hiding elements with this property is useful if you want to use JavaScript to
dynamically hide and show items on the page. Using JavaScript to modify page styles is
discussed starting in Lesson 14, “Introducing JavaScript.”
There are two properties for controlling the size of a block:
width
and
height
. They
enable you to set the size of the box using any of the units of measurement mentioned
previously. If you use a percentage for the height or width, that percentage is applied to
the size of the containing element.
To make the header of your page 100 pixels high and half the width of the browser, you
could use the following rule:
#header { width: 50%; height: 100px; }
The following paragraph will appear to be very narrow, but the box in which it resides
will be as wide as the browser window unless you specify a width.
<p>
one.
<br />
two.
<br />
three.
<br /></p>
It's possible to set maximum and minimum heights and widths for elements to
account for differences in the size of users' browser windows. The properties
that enable you to do so are max-width, min-width, max-height, and min-height.
Let's say you've created a page design that only looks right if it's at least
600 pixels wide. You could use the following style:#container { min-width: 600px
}
The element with the ID
container
will expand to fit the size of the browser window as
long as it's at least 600 pixels wide. If the browser is smaller than 600 pixels wide, the
contents of the element will scroll off the screen. Likewise, you may want to constrain
the maximum size of an element so that lines of text do not become so long that they're
difficult to read. To do so, use the following style:
#container { max-width: 800px }
