General discussion


CSS Tips

By david_bobb ·
Just thought I'd share a tip I discovered.

If you combine CSS selectors during stylesheet creation, you can easily edit your color scheme.

body,#content { background: #002244; }
#nav,.stnews,.stnsubhead { background: #001122; }
.stnhead { background: #004488; }

body,#content { color: #ffffff; }

#nav a:active,#nav a:visited,#nav a:hover,#nav a:link { display: block; padding: 2px 4px; }
#nav a:link,#nav a:active,#nav a:visited { background: #333; color: #ccc; }
#nav a:hover { background: #555; color: #fff; }

Keep my color setup near the top, and all my spacing and formatting at the bottom. Saves me a lot of time too, as color schemes can be changed in a matter of seconds. Took me awhile to figure out, but its well worth using!

Also, when creating PHP documents, I simply add an echo into the header
<?php if !empty($cssparams) echo($cssparams) ?>

and in my individual documents
$cssparams = ".class { stuff: things }";

And I can preview new CSS parameters on the fly!

Easy way to add custom CSS parameters into your documents without having to edit your main CSS file (which may be cached by the user).

This conversation is currently closed to new comments.

2 total posts (Page 1 of 1)  
| Thread display: Collapse - | Expand +

All Comments

Collapse -

RE: CSS Tips

by DaveTheWave In reply to CSS Tips

Will this not create a style sheet that is considerably larger than a "normally" formatted style sheet?

Collapse -

by david_bobb In reply to RE: CSS Tips

Not usually. Since you dont have to repeat the colors information each time, you may actually end up making your CSS document smaller by a small amount.

Also, by using the $cssparams method, you can keep your main CSS document fairly small and page-specific stylesheet info is loaded only when its needed, adding only a few bytes onto your individual documents that use their own CSS selectors.

Back to Web Development Forum
2 total posts (Page 1 of 1)  

Related Discussions

Related Forums