Shaping up with CSS
The fourth chapter, entitled "Shaping up with CSS," examines how to change the shape and size of specific areas of content, change backgrounds and border styles, and how to position things anywhere you want on a page, using soley CSS.
Changing the size and shape of an object is quite simple using CSS. There are a few things to keep in mind, however, when attempting this. First of all, by default all block-level elements will take up 100% of the available width. If 100% is what you want there is no need to change. For example, the heading of this page, which reads "Chapter 4" has been left at its default, and therefore the green background spreads across the entire page. An example of a change in width is the navigation. Notice that the background of the navigation bar only extends a quarter of the way across the page? This is because the width has been changed from the default 100% to 175 pixels. The default height of the navigation bar has been changed as well. That is why the navigation bar takes up so much more space than it needs to. We have determined the height for it instead of allowing the default to cut it off when the content runs out.
Adding borders using CSS is pretty simple as well. As you can see, the navigation area has a nice green border around it. You can even specify the type of boarder on each side of an element, as can be seen on the navigation border: the top is solid, the right is dashed, the left is dotted, and there is no boarder on the bottom.
Padding and margins can also be added to a block-level element. For example, this paragraph has a border and 10px padding. That is why it indents in farther than the rest of the paragraphs on this page and the border doesn't hug the text.
This paragraph, on the other hand, has no padding, but rather has a border and 10px margins. For this reason the border hugs the text but is indented in comparison to the rest of the text.
One of the most powerful things that CSS can control is each div's position on a page. Some good examples of this positioning power can be seen on this very page. The navigation bar, for example, which now resides snuggly on the left-hand side of the page, while the body copy sits firmly to the right of it. This was accomplished by a technique called absolute positioning. Basically we told the different div's on the page exactly how far from the top of the page we wanted them, and exactly how far from the left of the page they should be. There are other postioning techniques too, like relative positioning. In this case they are positioned not according to the top and left side of the page, but rather according to their position before being positioned. The header of this section for example. Using relative positioning instead of absolute we were able to scoot it over 20 pixels
Hey look at me! I'm floating!
Floated Positioning is another technique, and the last covered in Chapter 4. By floating an area of content on one side of a page, other content is allowed to float around it. This can give a webpage something of a multicolumn layout effect. For example, check out the box of text on the right.
4/1/08 10:49 AM