• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 3. Creating a Web Page Layout wi... > Using CSS with other tools

Using CSS with other tools

As you begin to work with HTML and CSS, you will notice that there are many tools available to help you. Dreamweaver has excellent HTML and CSS support and many tools to help you along the way. Figure 3-1 shows an example of a handy Dreamweaver tool — a Color picker that pops up automatically when you need it. If you type color: into a CSS document in Dreamweaver, the Color picker pops up to help you. That way, you don't have to memorize all the hexadecimal color values possible — you can simply click the color that you like.

Figure 3-1: Dreamweaver helps you find the correct hexadecimal value for a color.

Hexadecimal colors

HTML and CSS “see” colors in special code called hexadecimal code. It's a series of six numbers and/or letters that represent the amounts of red, green, and blue that are present in a color. Red, green, and blue (or RGB) are the primary colors for light — and because colors are displayed by using light, RGB are the primary colors of computers, too.

As you look at a Web page's code, you might see code that looks like this: #000000 or #993366 — these are hexadecimal values for colors. When the browser reads the code #000000, it reads 00 for the value of red, 00 for the value of green, and 00 for the value of blue, and thus generates the color black. Or when the browser reads the code #993366, it reads 99 for the value of red, 33 for the value of green, and 66 for the value of blue, and generates a reddish purple color.

You might be wondering, how can I keep track of which numbers stand for which colors? Don't worry; many charts are available (one site that has a chart is W3Schools at www.w3schools.com/html/html_colors.asp), and virtually all Web design or graphics software has a color‐picker tool that gives you hexadecimal values. (See the “Using CSS with other tools” section in this chapter for an example.)

In CSS, you can use shorthand to represent Web‐safe hexadecimal colors. To do so, you take the first number of each pair and use the three‐digit shorthand equivalent of the whole six‐digit hexadecimal color. So the shorthand for #993366, for example, is #936. The browser assumes that the other three numbers are 9, 3, and 6 (no commas or spaces in the code itself, just #936). But the shorthand works only on hexadecimal colors that have pairs for the values of red, blue, and green. NonWeb‐safe colors often do not. For instance, the code #efefef represents a nonWeb‐safe gray. That particular code doesn't have a valid shorthand because by typing #eee you would be telling the browser that the color is #eeeeee, which is not the same at all.

Hexadecimal values work in both HTML and CSS. They also work on all elements that can take a color value.

If you want to know more, check out HTML 4 for Dummies, 5th edition, by Ed Tittel and Mary Burmeister (Wiley Publishing, ISBN 0‐7645‐8917‐2); it includes a super‐size Cheat Sheet with a handy hexadecimal color chart.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint