Fancy Paragraphs With CSS

Long pages of text look dull. Often users don't want to trudge through them, and all the time you spent carefully crafting those sentences goes to waste.

But with just a few simple CSS tricks we'll discuss here, you can break your pages up so they don't seem as daunting. Even better, you only have to write the code once -- and then you can re-use it across your site as many times as you like.

I'll assume that you already have a basic understanding of CSS. If not, then Matt Mickiewicz's article An Introduction to Cascading Style Sheets (CSS) should give you what you need to get started.

Margins, Padding and Borders

If you've already grasped the concept of cellpadding, cellspacing and borders in HTML tables, then relax -- this isn't much different. The diagram below shows how the margin, padding and border properties relate to your paragraphs (or to any other element, for that matter).

The margin defines the space outside the border. The padding defines the space between the border and the content.

Although it's not shown here, the background colour fills the paragraph up to the border. By controlling the values of the padding and the margin you gain full control of the spacing around your paragraphs. But it doesn't stop there; CSS also gives you the ability to control the value for each side individually! Let's see how.

Top, bottom, left and right

To further increase your control CSS provides a facility that tables don't. CSS allows you to individually control the border, padding and margin values for each side of the block, through the following 12 properties:

padding-top
padding-bottom
padding-left
padding-right
margin-top
margin-bottom
margin-left
margin-right
border-top
border-bottom
border-left
border-right

Your decision to set different combinations of these properties will depend on what you are trying to achieve, and which properties provide the control you need. Bear in mind that the side-specific (left or right) properties listed above don't work in older browsers.

Putting It To Use

Let's take a look at an example to see how you can put this to use. We're going to spice up a paragraph to make it look like the one below.

The Border

For the border we're using a setting that's 2 pixels wide, and solid, with an RGB colour value of 0066FF. The CSS rule we use to achieve this is:

p.excerpt{
border: 2px solid #0066FF;
}

The (X)HTML code to make use of this rule is:

<p class="excerpt">They went in single file, running....</p>

When it's used in this manner, the border property sets 12 separate properties for you.