O'Reilly logo

HTML, XHTML, & CSS All-in-One For Dummies®, 2nd Edition by Andy Harris

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, including 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 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 when your layouts are 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.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required