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.
Technical level: Advanced/Experienced
|| Date: 16th November 2002 || Author:
Nigel Peck
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.
Bare 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;paddingx;
}
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!
