Chapter 4. Borders and Backgrounds
In This Chapter
Creating borders
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. It has 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.
Joining the Border Patrol
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 main 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 as your layouts get more complex.
Using the border attributes
Figure 4-1 illustrates a page with a simple border drawn around the heading.
Figure 4.1. This page features a double red border.
The code for the borderProps.html page demonstrates the basic principles of borders in CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
Get HTML, XHTML, and CSS All-In-One Desk Reference For Dummies® now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
