Lesson 3: Working with CSS properties CHAPTER 4 193
Centering content in the browser window
Creating a page layout that looks great in any browser and continues to look good as the
browser window is resized can be a daunting task. A common approach to solving this
problem is to create a <div> element that contains your content and set the <div> to a fixed
width, such as 800 pixels.
If you set the width to a fixed size, you’ll probably want to center the <div> element in
the browser window. You can do that by setting the left and right margins of the <div> ele-
ment to auto. When both margins are set to auto and the width is set, the browser divides
the excess margin space equally. The result is a centered <div> element. For example, if your
content is in a <div> element whose id is set to “container”, you can add the following style
rule to center the container’s contents.
#container {
width: 600px;
margin-left: auto;
margin-right: auto;
}The width must be set, or the centering will not work.Lesson summary
■■CSS colors can be set using color names; hexadecimal notation; or the rgb, rgba, and
hsl functions.
■■Use the opacity property to set the transparency.
■■To format text, set the font-family property and then set the font properties.
■■Font families that have curls at the top and bottom of characters belong to the serif
font family group. Font families that don’t have curls belong to the sans serif font fam-
ily group. Font families whose characters are all the same width belong to the mono-
spaced font family group. Font families that imitate handwriting belong to the cursive
font family group. Font families that are decorative belong to the fantasy font family
group.
■■The CSS box model defines element content as surrounded by padding, which is then
surrounded by the border, which is then surrounded by the margin.
■■You can set all four sides of the margin, padding, and border by providing a single size
to be applied to all sides, or you can set individual sides by adding -top, -bottom, -left,
or -right to the property and assigning a value to each.
■■The <div> element can be positioned by assigning a value of static, relative, absolute,
or fixed to the position property.
■■The float property can be used to create columns without removing the <div> element
from HTML flow. This property can also be used to position images so that text flows
around the image.