Web Development

Ask something
Discussion Locked

CSS Tips

0 helpful
2 replies

by david_bobb

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

Just thought I'd share a tip I discovered.

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

Ie:
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

and in my individual documents

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).

2 replies

by davethewave

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

by david_bobb

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.

This discussion is closed to new replies.