wise-women



home about/faq features tutorials resources members search
features
 

Getting Started with Cascading Style Sheets

by Miraz Jordan

Step Six: Use Borders and Padding

I maintain a site where some pages are lists of job vacancies or events. I like to have a line separating each event. Rather than using an old-fashioned <hr> I simply add a top border to the h2 selector.

Of course, you can't see this in the Netscape screenshot because it's the same colour as the background.

h2 {
border-top: 1px solid silver;
}

Comparing 3 browsers - borders

Hmm, that border above the h2 is too close. If we add some padding we can make some breathing space.

h2 {
border-top: 1px solid silver;
padding-top: 1em;
}

Comparing 3 browsers - borders and padding

Values

The paddings, borders and margins can be set in a variety of units, including pixels (px), percentages (%) and ems. You'll need to experiment to see which one works best for you. An important point to note is that there must be no space between the number and the unit. So, 5px is correct while 5 px is incorrect.

Be sure to look at your page in a variety of browsers and to enlarge and reduce your text to check whether it will work for everyone.

Padding versus Margin

The padding is immediately next to the element. The border goes around that and the margin is outside between the border and other elements. In the screenshot above we can see that the proportions are wrong: we need a bigger margin between the first heading and the second and a smaller amount of padding between the second heading and its border. That would place the border closer to the heading it belongs to and further away from the heading it doesn't belong to.

Step Seven:Use Classes

You might generally have black text in a certain font but want to mark out a particular paragraph visually in some way, perhaps by making it smaller or italic or by using a different font. This often applies to a copyright statement or other text at the foot of a page.

For this you can set up a class in your stylesheet and refer to it in your HTML document.

A class always starts with a dot in the stylesheet rule, but there's no dot in the value in the HTML document.

.copyright {
border-top: 1px solid silver;
padding-top: 1em;
font-style: italic;
font-family: sans-serif;
text-align: right;
}

And here is the coding in your HTML document: <p class="copyright">All kinds of copyright info goes here</p>

Step Eight: Use Span for Inline Elements

You might generally have black text but want to mark out a particular word or phrase visually in some way, perhaps by making it bold or red or in a different font. I don't mean that some text is actually emphasised (for which you can use the em or strong tags), but perhaps a trade name or similar.

For chunks of text smaller than a whole paragraph or heading then a span comes in handy.

.tradename {
color: red;
}

Here is the coding in your HTML document: <p>Some long sentence with a <span class="tradename">special phrase</span>somewhere in the middle.<p>

Comparing 3 browsers - classes

Step Nine: Use Div for Blocks

While span is suitable for small bits of text and you can apply classes directly to paragraphs or headings, if you want to affect several paragraphs or headings then a div makes more sense. You need this in your HTML document.

<div class="sidebar">

<p>Some bit of writing.<p>

<p>Some bit of writing.<p>

<p>Some bit of writing.<p>

</div>

Step Ten: Style a Div as a Block

A div is a block level element. That means that it forces a new line, as do paragraphs and headings. That means that you can style the div itself with features such as colours, margins and borders.

<div class="boxy">

<p>Some long sentence with lots of words.<p>

<p>Another long sentence with lots of words.<p>

<p>A third long sentence with lots of words.<p>

</div>

.boxy {
color: white;
background-color: green;
border: 2px solid maroon;
font-weight: bold;
font-family: sans-serif;
padding: 1em;
margin: 5%;
}

Note how I've used a shorthand to set all 4 sides to the same values, by just writing margin (for example) instead of margin-top, margin-right etc.

Comparing boxes

Now some of Netscape 4's many many quirks start to become very apparent: notice how the green of the background colour doesn't go all the way to the border (as it should). Mind you, it does create a rather interesting effect and it doesn't actually hurt the page by making it unreadable or anything.

Step Eleven: Test Many and Much

While developing a stylesheet you should test your page with a selection of the browsers you expect your target audience to be using. In particular beware of Netscape 4 which has unreliable and erratic support for stylesheets.

Different browsers interpret stylesheet rules in different ways. Many differences are slight but some can be significant. Be sure to test on both Mac and Windows, and other platforms if you're able.

Be sure too to try enlarging your text via the browser controls and to look at different window sizes and monitor resolutions. Of the half a billion or so people in the world who are thought to be using the Internet you can guarantee that they are using a huge variety of hardware and software to visit web pages.

Don't forget to grab a speech browser or screen reader to test out a few pages. It's very instructional to hear a page, as opposed to reading it.

If you stick to the features I've mentioned above you should be able to do a lot with your stylesheet without running into too many problems.

Of course you'll need to be writing correct and valid HTML, making sure to code your document with appropriate headings, paragraphs, lists and so on. If each element is correctly coded then you can easily apply a style to it.

Step Twelve: Validate

Once you have a finished stylesheet be sure to validate it (and the HTML document). It's easy to leave out a semicolon or make a typo which can cause problems in other people's browsers.

Summary

You can make an immediate and dramatic difference to your pages by using stylesheets for such presentational aspects as font family, text colour, margins and borders. Stripping the old font tags from a page can significantly reduce page size and complexity, make pages easier to edit and maintain, and encourage consistency.

For people starting out with CSS I recommend avoiding background colours on anything but the page as a whole as Netscape 4 handles them badly. I also suggest leaving font-sizing until you have more experience.

Once you feel you can easily use fonts, colours and margins / padding / borders then you might like to explore the many other sophisticated possibilities which CSS offer such as positioning, text transformation and so on. There are many wonderful effects you can achieve, but browser support is less reliable for the more advanced features.

You also need to be very wary of Netscape 4 as it can turn even the most correct coding into a shambles on a web page. Always test carefully and keep sending those positive vibes out into the universe to cause Netscape 4 to disappear forever. Then we'll be able to use much more of CSS's amazing power.

See Eric Meyer's Edge for examples of what can be achieved with stylesheets. Note that you'll need Netscape 6 to make the most of the effects.

Oh, and you'll need more than this brief tutorial to make progress with stylesheets. Check out the References for other helpful resources.

References

Wise Women's Shirley Kaiser has a superb and comprehensive list of CSS resources on her WebsiteTips.com site.

In particular you'll need the official CSS specification and the CSS validator.

If the official document confuses you or for good practical help in a book then Cascading Style Sheets: The Definitive Guide by Eric A. Meyer 2000 ISBN: 1565926226 US$24.46 is a superb choice. Eric Meyer is one of the definitive authorities on CSS and his book is absolutely readable.

The CSS-Discuss mailing list is very busy but also by Charter very practical and aims to help those new to CSS. Definitely worth a look.

JAWS is a screen reader (for Windows) which can give you an idea of how a page sounds when read aloud. A demo version runs for a short time before a restart is nececssary to continue using JAWS.

Mac users might like to download iCab to hear a page aloud. (Control click to bring up the contextual menu and choose speak from the Page item.)

For more on XHTML see Miraz's online XHTML tutorial.

Miraz's Micro Tutorials offer a range of tutorials on web and email topics.

 

Copyright 2002, Miraz Jordan, All Rights Reserved

Photo of Miraz


Miraz Jordan is a writer, web designer and trainer of repute in New Zealand. She contributes the Newbies Guide and other articles to New Zealand's Macguide magazine and produces her own Mac Tips newsletter and other materials. Currently she's working on a book. Her popular Mac Tips and online tutorials are available at http://mactips.info.

[an error occurred while processing this directive]
 

current

Learning Podcasting by Carolyn Wood.


previous

Complete list of past tutorials.

 

Printable version of this page

Link to us


Join the discussion lists

 
 
passionate about the web