| home / programming / html_css |   [previous] |
|
|
|
I’ve also added an embedded style sheet that includes the table width, border, and padding styles, along with element selectors and a class selector to style the table using background colors in the elements.
Figure 8-5 shows the results.
FIGURE 8-5 Styling a table with element and class selectors.
NOTE
You’ll also notice I added borders to spice things up a bit. You can learn more about styling borders in Chapter 11, “Margins, Borders, and Padding.”
As you are beginning to find out, you can do a lot with CSS to enhance your documents. Here we’ve turned a plain-vanilla table into something with a little style.
You can attach a background graphic to the document or any element, just as you can with background color. There are more ways to control backgrounds with CSS, though, giving you a broad range of options when it comes to applying visual design to your site. By combining a page background with element backgrounds, you can create layers of images and numerous special effects.
Background graphics are typically either small tiles used to repeat to create a wallpaper pattern, or horizontal or vertical graphics with sections of color, imagery, and even typographic features. You can find many predesigned backgrounds online (see Figure 8-6), or you can create your own.
FIGURE 8-6 A background texture for a wallpaper effect I found at http://www.grsites.com/textures/.
First, let’s have a go at attaching the background graphic to the document. This is done by selecting the body and creating a rule using the background-image property with a value of the image’s location and name:
body {background-image: url(gray.jpg);}
Figure 8-7 shows the results of the tiled background within a web browser. You’ll notice how the image tiles into the entire viewable area, creating an intriguing look.
NOTE
Tiling images in a background is normal behavior for the browser. With HTML, you have no control over how an image tiles. As you’ll soon see, CSS gives you far more control over how background images can be manipulated.
FIGURE 8-7 Tiling a background in the body.
You can also add images to elements. If you wanted this image to appear in the background of all your headings, you could create the following rule:
h1, h2, h3, h4, h5, h6 {background-image: url(gray.jpg);}
In this case, all header backgrounds would use the background tile.
The rule I just wrote with all headers separated by commas is a means of grouping selectors that all take the same rules. This way, I can group any selectors that share rules by naming the selector and following it with a comma:
h1, p, .footertext {color: teal;}
This way, h1, p, and the class of footertext will all be colored teal. You can continue writing additional rules for unshared styles:
h1 {font-size: 24px;}
With both of these rules in the same style sheet, both styles would be applied, resulting in the h1 being 24 pixels with a color of teal.
This content is excerpted from Chapter 8 of the new book, "Spring Into HTML and CSS", authored by Molly Holzschlag, published by Addison-Wesley Professional, copyright 2005 Pearson Education, Inc. To learn more, please visit: http://www.awprofessional.com/title/0131855867.
| home / programming / html_css | [previous] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: May 16, 2005
URL: http://webreference.com/programing/html_css/1
