Development 100 reasons why CSS rocks

Or tips & tricks for css virgins & newly-weds

1. I've never liked the single-spacing HTML gives lists. Set a default spacing with:

li {margin-bottom: 10px;}

2. hspace is nice to give some white space round graphics, but who needs it on the margin side? And what about tables?

.rightpic {float:right; margin: 5px 0px 5px 10px;}

.leftpic {float:left; margin: 5px 10px 5px 0px;}

(used in a <div> round the pic or table)

3. Open text up a bit with

P, TD, LI {font-size: 14px; line-height: 125%;}

That's 3 of mine to start with, what's in your Really Useful Group?

 

4. I like a nice subtle indent to start off a paragraph:
text-indent: 15px;

5. controlling the four borders of a box separately is 1337:
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 4px solid black;

6. for that matter, all the shorthand properties are uber-1337:
font: italic bold 12pt/14pt Times, serif;

7. list styling with a graphic for when those round bullets just don't do:
list-style: url(/images/smilie.gif) circle;

8. setting display: none in a print media rule to turn off navigation links (or other clutter) for a printed version of your page:
http://linear1.org/mediarulecssdemo.html

9. building your stylesheet with a PHP script
http://linear1.org/lib/linear.css.phps

10. rewriting your stylesheet at runtime with Javascript using getElementByTagName

 

11. rounded corners without tables:
http://www.sovavsiti.cz/css/corners.html

12. simulated tooltips with the help of the title attribute:
http://linear1.org/tooltipdemo.html

13. separately linked stylesheets get cached by the browser, and you save money on bandwidth

14. buggy browsers that render things in nonstandard ways:
http://www.ericmeyeroncss.com/bonus/render-mode.html
(oh wait, that doesn't rock but the article explaining it does.)
http://linear1.org/gm/archives/00000099.php is my own micro-rant on this topic

15. the groove border style
border: 2px groove;

 

Hey, thanks for that one. I've been using tables like this which is a pain

Code:

<td width="20" align="left" valign="top">
<img src="graphics/mb1.gif" width="12" height="12" vspace="5" alt=" ">
</td>
<td valign="top">Go for the minimum flow...

 

Aw, you messed up my flow.

Okay, back to the program....

16. Background images for almost any element. The variations are maybe endless, but one of the more subtle is adding a little inner shadow to an input control as seen here:
http://linear1.org/casa/

17. Skin your site! It can be as simple as setting a cookie that dictates which stylesheet the user prefers. Or less simple.

18. Finally some control over how that damn <hr> element looks:
hr.white {border-top: 1px solid white;}
(I'm not really very fond of the horizontal rule anyway, I prefer whitespace)

19. Forget about border="0" on img tags that are inside anchor tags, just set a rule once in the stylesheet:
img { border: 0; }

20. colored scrollbars! (warning: not standard CSS--your validator will barf)
scrollbar-face-color: red;
scrollbar-shadow-color: orange;
scrollbar-highlight-color: yellow;
scrollbar-3dlight-color: green;
scrollbar-darkshadow-color: blue;
scrollbar-track-color: indigo;
scrollbar-arrow-color: violet;
(go on, try my example, I dare you...)

 

21. Personalize your links, though I draw the line at increasing font size

A:link {color: blue; text-decoration: none}
A:hover {color: red; text-decoration: underline }
A:visited {color: #800080}

A:link.eytie {color: blue; text-decoration: none}
A:hover.eytie {color: red; text-decoration: underline; font-weight: bold; font-style: italic}
A:visited.eytie {color: #800080; text-decoration: none}

22. Tart up heading text with IE filters

#glowred {filter:glow(color=#FF0033,strength=2); width:100%;}
#shadgrey {filter:shadow(color=#999999, Direction="225"); width:100%}

Demos here

23. Unlike IE's drop-shadow filter, this also works in NS

.text {
font-size:35px;
font-weight:bold;
font-family: "comic sans ms";
color: #9999ff;
margin-top:0px;margin-left: 0px;}

.highlight {
font-size:35px;
font-weight:bold;
font-family: "comic sans ms";
color: #0000aa;
margin-top: -47px; margin-left: -2px;}

and the usage:

<DIV class=text>Fan Noise Solutions</DIV>
<DIV class=highlight>Fan Noise Solutions</DIV>

 

24) my collection

 

25. Here's one I like. Puts the list marker at zero indent, like half-way down this page.

BODY {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 40px;
margin-right: 40px;
padding: 0px; /* Need to set body margin and padding to get consistency between browsers. */
.
.
}

OL {margin-left: 25px;} / *make margin 15px less than left margin */
UL {margin-left: 25px; list-style: circle; }
UL.box {margin-left: 25px; list-style-image: url(graphics/box.gif) }

Using your own marker image, you can also increase the text indent with a bit of extra transparent canvas.

edit: This doesn't work in (guess what?) NS, but there's the cure at AListApart - Taming Lists