HTML and CSS Reference
In-Depth Information
Some of this might sound confusing on first read, but I encourage you to play around with
the values for all these properties to see the results of different combinations. Experimenting
is the best way to familiarize yourself with the subtleties of each value combination, and this
applies not only to backgrounds, but also to any complex CSS feature. You'll often use back-
grounds in CSS, so it's worth taking the time to get to know this shorthand property and its
longhand equivalents.
With this background in place, we now have some color in the RecipeFinder website (besides
the color photos, that is).
Borders
In our Photoshop file, in the “Latest Recipes” section on the left side of our sample website,
each image has a thick border—something that's currently missing in our coded version.
Figure 3.3. The “Latest Recipes” images in our design have borders
To add the border, we'll use the border property, appending that to the existing styles on the
<img> elements, which are targeted in our CSS as children of the .media element:
.media img {
float: left;
margin-right: 30px;
Search WWH ::




Custom Search