HTML and CSS Reference
In-Depth Information
Comments
are text you can add to CSS to, well, comment! A browser ignores comments, so they aren't displayed
in a web page but they do appear in the CSS file that's downloaded to a user's computer. You may like to add com-
ments to keep notes about why you used a particular style, for example.
To let the browser know you are using a comment that it can ignore, use the following syntax:
/* Hi Mom. I made this web page! */
You should prefix a comment with a forward slash and an asterisk and suffix it with an asterisk followed by a for-
ward slash. Comments can be used either outside or within CSS rule sets.
You can also use comments for “commenting out” styles. If you added a style to a page but want to see the page
without that style for a moment, rather than delete the style, you can make it a comment, causing the browser to ig-
nore it.
When a hex value is
#000000
, it has no color, making it black, and at the opposite end of that range,
#ffffff
is
white. Your background color should now closer match the color of the background image, but how on earth do you
determine
#f5f5f5
is a gray color? To get the exact color, you need to use a tool, often known as a
color picker
;
see the sidebar “Color Pickers.”
To make writing hexadecimal values a little quicker, when a value has repeating characters (such as
#ffffff
), you
can write
#fff
instead. Three character values are expanded to six by replicating each character. For example,
#fb0
expands to
#ffbb00
.
Unfortunately, you can't shorten
#f5f5f5
.
Color Pickers
Many graphics editors come with color pickers (such as Adobe Photoshop and Fireworks). If this is something you
don't already have, here are some free ones you can use:
Colors for Mac
—
www.mattpatenaude.com/
.
ColorPix for Windows
—
www.colorschemer.com/colorpix_info.php
.
Colorzilla Browser Add-on for Chrome and Firefox
—
www.colorzilla.com/
.
RGB (Integer Range)
RGB can also be specified via an integer range from 0 - 255 or 0 - 100%. Much like hex, the bottom of the range (0)
represents black, and the top (255/100%) is white.
To set the background to white, for example, you can use the following:
body {
background-color: rgb(255, 255, 255);
}
