HTML and CSS Reference
In-Depth Information
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.
Property
Example values
Description
background-color
red, #f00, rgb(255,0,0)
Any valid color.
background-image
url(background.png)
A link to an image.
background-repeat
repeat, no-repeat,
repeat-x, repeat-y
Should the background image
tile across the background, or
only appear once?
background-position
top left, 100px 200px,
50% 50%
Where should the first back-
ground image be placed?
background-attachment
scroll, fixed
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-
ground red:
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.
