Fancy Paragraphs With CSS

The following rule allows you to set them all individually, but achieves the same effect as the one above.

p.excerpt{  
border-top-width: 2px;  
border-right-width: 2px;  
border-bottom-width: 2px;  
border-left-width: 2px;  
border-top-style: solid;  
border-right-style: solid;  
border-bottom-style: solid;  
border-left-style: solid;  
border-top-color: #0066FF;  
border-right-color: #0066FF;  
border-bottom-color: #0066FF;  
border-left-color: #0066FF;  
}

As you can see, using the border value is a lot easier in this situation, but the extra control is available when you need it.

The other alternative is:
p.excerpt{  
border-top: 2px solid #0066FF;  
border-bottom: 2px solid #0066FF;  
border-left: 2px solid #0066FF;  
border-right: 2px solid #0066FF;  
}

As I mentioned earlier, the code you use will depend on what you're trying to achieve.

The Background

Setting the background colour is easy. Simply set the background-color property to the value you want -- in this case, I've used an RGB value of FFCC33. Our rule now becomes:

p.excerpt{  
border: 2px solid #0066FF;  
background-color:#FFCC33;  
}

With the above rule our paragraph looks like this:

The Spacing

Now all that's left to do is to set the spacing to complete the effect. We're going to use the same width padding on all four sides so we don't need the side-specific properties. With the padding set to 5 pixels our rule becomes:

p.excerpt{  
border: 2px solid #0066FF;  
background-color:#FFCC33;  
padding: 5px;  
}

To get the margin effect we'd like we need to use 20 pixels on the left and right, but only 5 for the top and bottom, so we need to set each property individually:

p.excerpt{  
border: 2px solid #0066FF;  
background-color:#FFCC33;  
padding:5px;  
margin-top:5px;  
margin-bottom:5px;  
margin-left:20px;  
margin-right:20px;  
}

That's it! Our paragraph now stands out and breaks our dull page of content up nicely, without any adverse effects. Non-CSS browsers will just ignore the CSS, without throwing any errors.

You can download the XHTML or the Style Sheet for the example above. Feel free to do whatever you want with it, and have fun with CSS!

Further Reading

• http://www.bluerobot.com/ - Well written information on style sheets.
• http://www.w3.org/Style/CSS/ - The W3C CSS site, including all the specifications.
• http://www.wired.com/ - Wired have recently updated their site to use pure CSS. It's worth seeing.
• http://www.htmlhelp.com/reference/css/ - The Web Design Group "Guide to Cascading Style Sheets"