HTML and CSS Reference
In-Depth Information
Figure 4-4
The CSS box model
element content
The size and appearance of these four sections control how an element is displayed
by browsers and play an important role in determining page layout. Each browser's
internal style sheet sets the size of the margin, border, and padding spaces, and those
sizes differ between one page element and another. You already may have noticed that
major headings, such as h1 headings, often are offset from their surrounding content by a
large external margin. As you'll learn later, CSS supports styles for modifying the margin,
border, and padding space, allowing you to override the browser defaults.
Creating a Reset Style Sheet
Because the internal style sheets of various browsers have small—and sometimes
not-so-small—differences, many designers create a reset style sheet to defi ne their own
default styles. Resetting the styles allows the designer to start from a known baseline,
confi dent that no unwanted styles will creep in from any browser's internal style sheet.
You'll create a reset style sheet for the Cycle Pathology Web site. You'll start by adding
a style rule that defi nes all HTML5 structural elements as block elements. This is neces-
sary because currently Internet Explorer, unlike the other major browsers, does not defi ne
structural elements as block elements. Without a rule setting the display properties of
all these elements to block , your choices for formatting those elements under Internet
Explorer would be more limited.
To create the reset style sheet:
1. Use your text editor to open the cp_resettxt.css file from the tutorial.04/tutorial
folder. Enter your name and the date in the comment section of the file and then
save it as cp_reset.css .
2. Below the comment section, add the following comment and style rule:
/* Display HTML5 structural elements as blocks */
article, aside, figure, figcaption, footer, hgroup, header,
section, nav {
display: block;
3. Save your changes to the file.
Search WWH ::

Custom Search