Content Listing:

• What is CSS?
• How do I implement CSS?
• Where can I find some good tutorials to find out more about CSS?
• How do I use CSS positioning to layout my page?
• Where can I find a list of all the CSS propeties available to me?
• How do I style my hyperlinks using CSS?
• What else can I do to my menus?
• How do I diagnose problems with CSS

What is CSS?

CSS stands for Cascading Style Sheets. It is a means of styling your html markup. It should not be used to add content to your page, because any content added in this way would not be rendered by browsers not supporting CSS properly or at all.

When combined with CSS, your structured html markup will take on a new appearance, allowing you to specify colors, sizes and weights for all of a document.

How do I implement CSS?

There are two main ways to use CSS in a document:

1. Internal CSS
   • within a tag - e.g.
     <div style="display:none;">Div Contents</div>
     This then only applies to that tag. It will not affect anything outside of the tag.
   • in the head section of the document - e.g.
     <style type="text/css"><!--
     h3{ color: #000099;}
     --></style>
     This will apply to every instance of this tag in the document - the example here will color every <h3> tag in navy blue.
2. External CSS
   • Put the css code without any html tags into a notepad document and save it as "mycss.css". Then insert the following code into the head section of your document:
     <link href="mycss.css" rel="stylesheet" type="text/css">
     This then enables you to link many pages to one stylesheet.

Where can I find some good tutorials to find out more about CSS?

We recommend the following tutorial sites. Naturally they're not perfect, but they have been carefully selected to make sure you don't pick up any bad habits:

• W3 Schools (not related to the W3C)
• the Noodle Incident

How do I use CSS positioning to layout my page?

Laying out your page is simple using commands like:

However, some browsers have nasty bugs which will catch you out if you're not careful: for instance Microsoft's Internet Explorer 5 has very buggy 'width' property support.

For this reason we recommend you visit the following sites first, and use their layout codes to build some sites before you modify them for yourself:

• Blue Robot Layout Reservoir
• the Noodle Incident Box layouts

Recommended Reading

• A list Apart - one mans journey into CSS

Where can I find a list of all the CSS propeties available to me?

At the W3C obviously!

How do I style my hyperlinks using CSS?

The following code is according to the W3 recommendation:

Other properties you may find useful include:

What else can I do to my menus?

We've made some examples for you to follow:

• CSS Menu 1 simply underlines the text when the mouse is over the link.
• CSS Menu 2 An arrow appears alongside the link when the mouse is over it.
• CSS Menu 3 Uses the border style property to get a box style effect.
• CSS Menu 4 Changes a background image on the link - in this case a red light turns green.

How do I diagnose problems with CSS

This is for those people who wish to use CSS-based design but are finding it tough due to the learning curve associated with it. Here are some tips on how to get your CSS working.

1. VALIDATE your HTML and CSS:
   http://validator.w3.org/
   http://jigsaw.w3.org/css-validator/
   Most errors can be fixed simply by validation.
2. Remove all the other styles. The problem is not with font-family and font-style. Keeping 1KB of that stuff is only going to make your job of sifting through style sheets more difficult.
3. Use background colors for the various divs you are trying to position/float. This will make it clear to you where the divs are, and how much space (width/height) they occupy.
4. Test in a good browser. Mozilla or firebird is highly recommended. Download it from one of the links provided in the left-hand bar at http://www.mozilla.org/. I personally use Opera 7.21. But don't use IE because it has poor CSS support.
5. Try to use bare-bones content. Focus on whats wrong with the way the site displays. If #left and #middle overlap, focus on them... forget that #right exists for the time being. Sort out issues one at a time.
6. ALWAYS BACK UP YOUR WORK AS YOU GO ALONG. So that if you go too far away and can't get back to the place you started, you can start over with one of your backed-up copies.

Remember: Things that were easy with tables may not be equally easy with CSS. Things that were impossible or too difficult with tables may be straightforward. Think outside the box. View your page consisting of several divisions... almost like cutouts on the paper... you can then glue these individual cutouts on a canvas. You couldn't think in this manner with tables... but with CSS you can!! The following link might be useful in debugging:

http://css-discuss.incutio.com/?page=DiagnosticCss

Of course there is not an iota of doubt that you cannot and should not ignore IE. But the thing is that if you have a problem with the way a page displays, you should use a standards-compliant browser.

Why? Because when something doesn't quite go right, you would want to refer to published documents (read W3C recommendations) to understand what a specific command is supposed to do. And if the browser doesn't confirm to these specs, well that would leave you confused.

Consider the example:

http://www.positioniseverything.net/abs_relbugs.html

If you place a div within a positioned div, and give it position: absolute; then this div should be positioned with respect to the containing div. Right? Thats what the specs say, thats what you'd think should happen.

But no, IE has a bug. What if these divs contained menu and/or images? Unless you are an expert (and most of us aren't), you wouldn't know if its a browser bug or problem in your thinking.

Hence, I would use Firebird to get the CSS problems sorted. Once thats done, I will view this in IE. I will then try to find possible reasons for the way IE displays it, and then think of workarounds.

The whole point is that once you have narrowed down where exactly the problem might be, you get in a position to ask specific questions, and are in a much better position to get help quickly.