This webpage is updated by Len Hom on April 19, 1999

This is an example of a background color for an element.

Len's Style Sheet 4 - Adding Borders and Backgrounds

Adding Borders

You can add a border around a heading, list, paragraph, etc, with a < DIV > element, i.e.
`div.box { border: solid; border-width: thin }`
which can be used with markup as follows:

`< DIV CLASS=" box " >`

The content within this DIV element will be enclosed in a box with a thin line around it.

The choice of border types includes: dashed, double. dotted, grooved, inset, outset, ridge,and solid.
The border-width property values include thin, medium, and thick as well as a specified width in em units, e.g. 0.2em.
The border-color property allows you to set the color.

Setting the Background

A nice effect is to paint the background in the box with a solid color or with a tiled image. To do this you use the background property, i.e.

`div.color { background: rgb( 204,204,255 ) padding: 0.5em; border: none; }`

The background color is set at purple.
The padding property provides some space between the edges of the colored region and the text it contains.
The padding on the left, top, right, and bottom sides may be specified with padding-left, padding-top, padding-right, and padding-bottom properties, i.e. `padding-left: 1em;`
The border on the left, top, right, and bottom may be similarly specified as the padding above, i.e. `border-left: solid;`
Note that the STYLE element must be placed in the document's HEAD section along with the TITLE element. It should not be placed within the BODY section.

If you have any comments or questions, please send email to:

Back Next Return to Beginning of Page

I take full responsibility for the information posted. The information on this page represents that of myself and not that of California State University, Sacramento or the School of Engineering and Computer Science