Fancy Paragraphs With CSS

Sir Codex

10 years ago

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.

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!

Margins, Padding and Borders

Putting It To Use

Further Reading