O'Reilly logo

Web Design All-in-One for Dummies® by Sue Jenkins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 4: Understanding
CSS Style Properties
In This Chapter
Understanding the CSS box model
Using the eight style categories
Working with style attributes
Creating custom link styles with CSS
Extending your knowledge of CSS with online resources
I
n earlier chapters of the book, you find out that CSS is the best way to
add formatting to the elements on your Web pages, from font sizes to
image placement to link colors. And, in Book III, Chapter 3, you discover the
fundamentals of Cascading Style Sheets and how to apply CSS styles to your
pages.
As a complement to the previous chapter, this chapter is designed to help
you with choosing the right attributes for all of your styles so that you can
best style and position your content with CSS. Here you are introduced
to the CSS box model concept and the eight different style prop-
erty categories of CSS. A strong understanding of the box
model along with these style categories (each have their
own special set of CSS style declarations) can help you
choose the attributes you need when you create your
own style sheets. In addition, you find instructions
on formatting the different elements on a page with
CSS, and a helpful list of the best online CSS
resources available, should you decide you want to
start using the more advanced capabilities of CSS.
Working with the CSS Box Model
When styling and positioning your content with Cascading
Style Sheets, it helps to understand the logic behind how CSS
handles elements on a Web page. Each object or element is
treated like a rectangular box that has margin space surrounding it, padding
space inside of it, a border around it, and content inside of it, as illustrated
in Figure 4-1.
17_417966-bk03ch04.qxp 3/25/09 10:36 PM Page 301
Working with the CSS Box Model
302
Figure 4-1: With the CSS box model, all Web page elements have margin,
padding, border, and content areas.
When creating styles, the margins, padding, or border attributes are totally
optional. When needed, they can be specified in the code, and when not
explicitly specified, these areas have a default width of 0. These three attrib-
utes can be set to have any thickness and can be applied both uniformly
and nonuniformly to the individual sides (top, right, bottom, left) of the rec-
tangle. Though padding and borders must be set with 0 or positive values,
margins can be assigned either positive or negative values. Margins and
padding are always transparent, and borders can be set to any of several
different styles.
When calculating the dimensions of the rectangular box surrounding an ele-
ment, you must always measure by the outer margin box. In other words, if
you have an element that has a specified width and height of 100 pixels by
200 pixels, and you then add a 10 pixel margin, 20 pixels of padding, and
5 pixels of border uniformly to all four sides of that element, the total width
and height of that element would be 170 pixels by 270 pixels.
To help you create your Web page layouts, keep in mind that each element’s
rectangular box can contain any number of additional boxes and nested
boxes. This simple fact allows for some pretty complex organization and
styling, which is especially useful when laying out pages using layers.
Another important fact to remember is that there are two general kinds of
boxes in CSS, block and inline:
Block: These boxes are generated by certain Web page elements like
paragraphs, headings, layers, lists, and tables. Blocks take up the full
width available within the browser or containing element and add a
new line of space both before and after the element. Blocks can also be
containers for other block and inline elements, such as placing a para-
graph of text inside a
<div> tag.
17_417966-bk03ch04.qxp 3/25/09 10:36 PM Page 302

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required