In This Chapter
Managing border size, style, and color
Using the border shortcut style
Understanding the box model
Setting padding and margin
Creating background and low-contrast images
Changing background image settings
Adding images to list items
CSS offers some great features for making your elements more colorful, including a flexible and powerful system for adding borders to your elements. You can also add background images to all or part of your page. This chapter describes how to use borders and backgrounds for maximum effect.
You can use CSS to draw borders around any HTML element. You have some freedom in the border size, style, and color. Here are two ways to define border properties: using individual border attributes, and using a shortcut. Borders don't actually change the layout, but they do add visual separation that can be appealing, especially when your layouts are more complex.
Figure 4-1 illustrates a page with a simple border drawn around the heading.
Figure 4.1. This page features a double red border.