The biggest problem with using CSS is that it isn't reliable or consistent across browsers.
Check Your Browser for CSS Issues
If you view your pages in Netscape 4.x, and the styles aren't showing up at all, you'll need to check your preferences. The frustrating part of this is that even if you have checked "Enable style sheets" (in Advanced preferences), if you have disabled JavaScript Style Sheets will also not work.
CSS Margin Problems
Netscape 4 doesn't handle margins in the same fashion as Internet Explorer. But it's still possible to get the same effect using different style tags on the same document. And you don't have to use JavaScript for browser detection. All you need do is use the @import and cascading to your advantage.
For example, typically, when you use a header tag (h1-h6), there is a huge amout of space between the header and the following paragraph. But if you use margin tags to fix this you will need to write two different styles to get it to work correctly in Netscape 4 and Internet Explorer.
In Internet Explorer:
h2 { margin-bottom : 0; }
p { margin-top : 0; }
In Netscape 4
h2 { margin-bottom : 0; }
p { margin-top : -1em; }
Then, because Netscape 4 doesn't recognize the @import statement, but does recognize the <link> tag, you can use this to your advantage. First place the Netscape properties in a <link> file:
<link href="netscape-styles.css" rel="stylesheet" type="text/css">Then place the Internet Explorer styles in an @import file (be sure that it follows the Netscape styles):
<style type="text/css">
@import url(ie-styles.css);
</style>
Netscape 4 will read only the first style sheet, and thus will render the text correctly. Internet Explorer will read both style sheets, but will use cascading rules to determine which should be used. As long as the imported styles come after the linked styles, the imported style sheet will "win" and those will be used.
CSS Background Colors
It's easy to add background colors to paragraphs using CSS. Paste the following into your Web page:
<p style="background-color : #cccccc;"> This paragraph should have a grey background color. But if you view it in Netscape, the grey color will only surround the text itself, rather than the entire space of the paragraph, as it does in Internet Explorer. </p>
If you just add a simple style property, Netscape will extend the background to the edges of the "box" that is the paragraph. You need to tell Netscape that there is a border, but if you set the border property to "none", the border will not display.
<p style="background-color : #cccccc; border : none;">For example, in this paragraph.</p>
CSS Drop Caps
The most logical way to do a drop-cap would be to use the "first-letter" pseudo-element. To set a drop-cap using this, you might write a style like this. Type the following and place it in a <style></style> element at the top of your Web page:
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
Then paste this into the body of your document:
<p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </p>
But chances are, your browser doesn't support this pseudo-class. You can still fake it in some browsers by using the <span> tag around the first letter in the paragraph. For example:
<span style="font-size : 200%; font-weight : bold; float : left; width : .75em;">
Try pasting the following into your HTML editor:
<span style="font-size : 200%; font-weight : bold; float : left; width : .75em;">T</span>his paragraph has a drop-cap on the first character that should be visible to browsers like Internet Explorer 4 and 5. It will work in Netscape 4 as well, but you need to play around with the width of your letter to find the right size. <br clear="all" />
Or this:
<span style="font-size : 200%; font-weight : bold; float : left; width : .75em; background-color : #cc0000; color : #cccccc;">Y</span>ou can even play with other style attributes on your drop-cap. Just remember to test in both Internet Explorer and Netscape, so you're not surprised by how your page looks. <br clear="all" />
Expermiment with CSS
Style sheets give you a lot of power and flexibility in your Web page designs. Experiment with the various properties and how they work in the browsers, and you'll find that your only true limit is your imagination.
