HTML and CSS Reference
In-Depth Information
License: Copyright 2006, Jeff Croft, All Rights Reserved.
➥
Feel free to read and learn from this, but please don't steal.
Description : This base style sheet imports other style sheets and
➥
provides basic styling for XHTML elements for the personal web site
➥
and blog of web designer/developer Jeff Croft.
--------------------------------------- */
It's far more common than you might imagine for humans to read your CSS files. Web
designers and developers are constantly looking at other people's code for ideas and clues on
how you achieved a particular effect. Be aware that your code is being read and provide the
context necessary to make sense of it. Adding license information ensures you have some
ground to stand on when someone steals your site's design—and trust me,
they will
.
Comments for “Code Glossaries”
Another great use for CSS comments is for storing
glossaries
of those style bits you'll find your-
self using over and over again throughout the site. Color schemes and typeface selection are
especially good examples. For instance, you may find it useful to include something like this at
the top of your style sheet:
/* ---------------------------------------
Main Purple: #50017C
Lighter Purple: #732799
Accent Orange: #ff8800
Accent Green: #99cc00
Accent Blue: #6699cc
Beige: #A5A48C
Light Beige: #C7C3B3
Serif fonts: Georgia, "Times New Roman", serif
Sans-serif fonts: Verdana, Arial, Helvetica, sans-serif
---------------------------------------- */
Having this in the style sheet as a reference makes it simple to copy and paste your colors,
fonts, and anything else you might need regularly, which saves you a lot of time guessing at
colors (or opening up Adobe Photoshop).
Comments for Grouping
Comments can also be handy for creating section delimiters within your CSS files that you'll
see easily as you quickly scroll through a document. It can often be helpful to group like rules
together. For example, you may wish to collect all of your rules related to a particular naviga-
tion menu together. Or, maybe you want all of your header styles to be grouped.
By putting an easily visible
flag
in the middle of your document, perhaps with a few lines
of whitespace above and below it, you can achieve an effect similar to that of the “page break”
in your favorite word processing application:
/* ----------------------------------------------------------------------------
NAVIGATION STYLES
----------------------------------------------------------------------------- */
