Note: What the Heck's Hex?

Colors in HTML are often written as a hexadecimal color specification. You might remember the hexadecimal counting system from your high school math class. Or maybe you were asleep up the back of the room. Never mind. Hexadecimal is that weird counting system that goes up to 16 instead of 10; the one you thought you'd never have any practical use for. Well, you do now!

That's right: when you count in hexadecimal, there are not ten, but 16 digits. The hexadecimal sequence looks like this:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13...

Eh? What's happening here? Well, as you can see, after we get to 9, instead of going straight to 10 (as we do when counting in decimal) we go through A, B, C, D, E, and F before we finally hit 10. That gives us six extra digits to use when we count! Sound confusing? Well, it is. But as it so happens, computers can count in hexadecimal far better than humans can.

The key here is that all of those numbers that we know and love in the decimal system, like 2,748, 15,000,000 and -- er  -- 69, can be represented in hexadecimal. Look, Table 3.1 proves it!

When a color is expressed as a hexadecimal number, such as ff0000, that number actually comprises three values that are joined together. The values represent the proportions of red (the ff part), green (the first two zeros), and blue (the second two zeros) that are mixed to create the specified color. Those three primary colors can be combined to display any color on the screen, similar to the way a television set uses different intensities of red, green, and blue to create a single dot on its screen. In this example, ff is the value for red, while the green and blue values are zero. It may not surprise you, then, to learn that #ff0000 will give you the color red.

The padding property is used to provide space between the outside edge of the element in question and the content that sits inside it. Because we're referring to the body element, you can think of the outside edge as being the top, bottom, and sides of the browser's viewport (that being the part of the browser where the web page is viewable, not including any of the browser's tool bars, menus, or scroll bars). We'll take a look at padding in more detail in Chapter 4, Shaping Up with CSS.

The value we've given to this property specifies how much space must exist between the edge of the viewport and the content. In this case, we've specified 15px, or 15 pixels. We mentioned pixels before, when we specified the size of an image, but what is a pixel? Basically, one pixel is one of the tiny dots that make up what you see on the computer screen. The screen itself is made up of hundreds of thousands of these pixels, so a 15-pixel border isn't going to take up too much space on your screen!

The line-height property is an interesting one. By increasing that value (we used 125% in our example), you can increase the space between lines of text -- something that can greatly increase legibility. Try tweaking this value, save your CSS file, and see how the new value affects the text on your web page.

Now, to the paragraph styles:

Example 3.6. style1.css (excerpt)
 
p {
  font-family: Times, "Times New Roman", serif;
  color: navy;
}

We've already shown that it's possible to change the color of text in a paragraph; now, we're going to settle on the sensible (and appropriate!) color of navy.

Let's see what's changed with the list item style:

Example 3.7. style1.css (excerpt)
 
li {
  font-size: small;
}

The size of the list items has changed ever so slightly through our application of the font-size property. Here, we've decided to set the font size using the small keyword, but we could just as easily have used the percentage or pixel methods we've already seen -- there are many ways to skin a cat with CSS! Font size keywords range from xx-small to xx-large and offer a quick way to style text. Unfortunately, different browsers implement font size keywords slightly differently, and unfortunately you can't be guaranteed that an xx-large font will render at the same size in all browsers. However, unless you're extremely worried about precise sizing, these keywords make a good starting point. (For more reasons than we have space to discuss, text sizing in CSS is a topic that causes heated debate in some circles. As you become familiar with CSS, you may want to learn more about the other text-sizing techniques that it offers. A good place to start would be SitePoint's CSS discussion forum at http://www.sitepoint.com/launch/cssforum/.)

Share and Enjoy: