Learn HTML and CSS: An Absolute Beginner’s Guide

A Mixture of New Styles

Let’s change the look of the site a little more — we’ll add more styles to the body, and change the look of the navigation. Copy the CSS below into your style1.css file (or copy it from the book’s code archive):

/*              
CSS for Bubble Under site              
*/              
             
body {              
 font-family: Verdana, Helvetica, Arial, sans-serif;              
 background-color: #e2edff;              
 line-height: 125%;              
 padding: 15px;
             
}              
             
h1 {              
 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;              
 font-size: x-large;              
}              
             
li {              
 font-size: small;              
}              
             
h2 {              
 color: blue;              
 font-size: medium;              
 font-weight: normal;              
}              
             
p {              
 font-size: small;              
 color: navy;              
}

Save the CSS file, then click Reload (or Refresh) in your browser. Hopefully, you’ll be looking at a page like the one shown in Figure 3.7, “Applying subtle changes to the CSS that affects the display of the font”.

Applying subtle changes to the CSS that affects the display of the font

A New Look in a Flash!

We’ve introduced quite a few new style declarations here. Let’s examine a few of them in the order in which they appear in the CSS file:

body {              
 font-family: Verdana, Helvetica, Arial, sans-serif;              
 background-color: #e2edff;              
 line-height: 125%;              
 padding: 15px;              
}

The background-color property can be applied to most elements on a web page, and there are many different ways in which you can specify the color itself. One is to use recognized color names such as navy, blue, red, yellow, and so on. These are easy to remember and spell, but you can be limited by the range. Another way of referencing colors is to use a hexadecimal color specification. Yes, you’re right: that does sound a little scary. I mean, just look at the code for it:

background-color: #e2edff;

It’s hardly intuitive, is it? This obscure-looking reference (#e2edff) translates to a light shade of blue. You could not, as a beginner, begin to guess that this would be a light blue. Thankfully there are numerous tools on the Web that let you choose a color from a chart (often called a color picker), then give you the code to match. Take a look at some of these tools,[5] and you’ll soon be able to find the hexadecimal numbers you need to create your ideal color schemes.

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…

Eh? What’s happening here? Well, as you can see, after we reach 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, 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 42, can be represented in hexadecimal. And Table 3.1, “Decimal to Hexadecimal Conversion” proves it!

Decimal to Hexadecimal Conversion

Decimal Hexadecimal
7 7
15 F
2,748 ABC
15,000,000 E4E1C0
69 45

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 amounts of red, green, and blue to create a single dot on its screen.[6] 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 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 — which 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.

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 Using 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 won’t take up too much space on your screen!

Now, to the paragraph styles:

p {              
 font-size: small;              
 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 appropriate color of navy.

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

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. As we’ve already seen — there are many ways to skin a cat using 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.

We’ve also introduced a new rule for the h1 element (the main heading on our web pages, which displays the site name) and, once again, used a font-size property to specify the size of the text (extra large!).

h1 {              
 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;              
 font-size: x-large;              
}

The h2 element also receives a minor makeover:

h2 {              
 color: blue;              
 font-size: medium;              
 font-weight: normal;              
}

Browsers usually display headings in bold type, but we can have them display in standard type by giving the font-weight property a value of normal.

Go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.facebook.com/mendesjuan Juan Mendes

    Your code examples have lots of HTML by accident in them. Anyway they can be cleaned up?

  • http://www.onsman.com Ricky Onsman

    Hopefully, they look a bit better now.