HTML and CSS Reference
Having both separate and shorthand properties is useful when you need
to style a collection of elements similarly. For instance, if a page has a
pop-up alert message that changes the border color according to the
importance of the image, you can set the general style in one rule and
override the border color with specific classes. If you later decide to cre-
ate a thicker border on all message boxes, then only the general style
needs to be updated rather than each rule for every level of importance.
Backgrounds are slightly more complicated than borders because they
allow the use of images, and these images can be positioned.
red, #f00, rgb(255,0,0)
Any valid color.
A link to an image.
Should the background image
tile across the background, or
only appear once?
top left, 100px 200px,
Where should the first back-
ground image be placed?
Should the background scroll
with the page or remain fixed
behind the page?
As with borders, background properties can be combined into a single
property. The following example places a single copy of back-
ground.png in the center of the element with the rest of the back-
background: url(background.png) 50% 50% no-repeat fixed #f00;
Now that you've learned the basics of visual styling, it's time to move
on to layout. To understand CSS layout, you first need to know how
CSS describes the dimensions of elements using the box model.