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.

This page features a double red border.

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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.