correctly has the added benefit of helping the page get properly indexed by search engines (see the box on page 21). Chapter 1: Rethinking HTML for CSS Download at Boykma.Com 23 Writing HTML for CSS UP TO SPEED Validate Your Web Pages HTML follows certain rules: For example, the tag wraps around the other tags on a page, and the tag. Then hit Enter (Return) and type . Now, you’ll add a CSS selector that marks the beginning of your first style. 3. Click between the opening and closing 7. Save the page and preview it in a web browser. You can preview the page by opening it in a web browser as described in step 3 on page 40, or, if the page is still open in a browser window, then just click the Reload button. Next you’ll add another style. Note: Always remember to add the closing tag at the end of an internal style sheet. When you don’t, a web browser displays the CSS style code followed by a completely unformatted web page—or no web page at all. 8. Back in your text editing program, click after the closing brace of the h1 style you just created, press Enter, and then add the following rule: p { color: #616161; line-height: 150%; margin-top: 10px; margin-left: 80px; } This rule formats every paragraph on the page. Don’t worry too much right now about what each of these CSS properties is doing. Later chapters cover these properties in depth. For now, just practice typing the code correctly and get a feel for how to add CSS to a page. 9. Preview the page in a browser. The page is starting to shape up and should look like Figure 2-3. You can see what stylistic direction the page is headed in. You can see a completed version of this tutorial by opening the internal.html file in the 02_finished folder. The process you’ve just worked through is CSS in a nutshell: Start with an HTML page, add a style sheet, and create CSS rules to make the page look great. In the next part of this tutorial, you’ll see how to work more efficiently using external style sheets. 42 CSS: The Missing Manual Download at Boykma.Com Tutorial: Creating Your First Styles Figure 2-3: CSS easily formats text in creative ways, letting you change fonts, text colors, font sizes, and a lot more as you’ll see in “Creating an External Style Sheet” below. Creating an External Style Sheet Since it groups all of your styles at the top of the page, an internal style sheet is a lot easier to create and maintain than the inline style you created a few pages ago. Also, an internal style sheet lets you format any number of instances of a tag on a page, like every

tag by typing one simple rule. But an external style sheet gets even better—it can store all of the styles for an entire website. Editing one style in the external style sheet updates the whole site. In this section, you’ll take the styles you created in the previous section and put them in an external style sheet. 1. In your text editing program, create a new file and save it as main.css in the same folder as the web page you’ve been working on. External style sheet files end with the extension .css. The file name main.css indicates that the styles contained in the file apply throughout the site. (But you can use any file name you like, as long as it ends with the .css extension.) Start by adding a new style to the style sheet. 2. Type the following rule into the main.css file: body { background-color: #CDE6FF; background-image: url(images/bg_body.png); background-repeat: repeat-x; padding-top: 100px; } Chapter 2: Creating Styles and Style Sheets Download at Boykma.Com 43 Tutorial: Creating Your First Styles This rule applies to the body tag—the tag that holds all the content visible in a web browser window—and adds a background image to the page. Unlike a similar property in HTML, the CSS background-image property can display the graphic in many different ways—in this case, tiled horizontally across the top of the page. You can read more about background image properties on page 188. This style also adds a color to the page’s background and scoots its contents down 100 pixels from the top of the browser window. When you preview the page, you’ll see that this extra space moves the headline out of the way of the background graphic. Instead of recreating the work you did earlier, just copy the styles you created in the previous section and paste them into this style sheet. 3. Open the basic.html page that you’ve been working on and copy all of the text inside the . These are the opening and closing style tags—it’s a good idea to type both tags at the same time, so you don’t accidentally forget to add the closing tag. Together, these two tags tell a web browser that the information between them is Cascading Style Sheet instructions. The HTML should now look like this (the stuff you added is in bold): Type selectors—such as the tag selector you’re about to create—are the most basic type of selector. (If you completed the tutorial in the last chapter, you’ve already created a few.) Chapter 3: Selectors: Identifying What to Style Download at Boykma.Com 71 Tutorial: Selector Sampler 3. Click between the opening and closing style tags you just added and type p { , hit return twice and type the closing }. As mentioned on page 41, it’s a good idea to always add the closing brace immediately after typing the opening brace, just so you don’t forget. To create a tag selector, simply use the name of the HTML tag you wish to format. This style applies to all paragraphs of text within

tags. 4. Click between the style’s opening and closing braces ( { } ) and add the following four CSS properties to supply the style’s formatting—color, size, font, and left indent: p { color: #505050; font-size: 1em; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; margin-left: 100px; } Press Enter to place each CSS property on its own line. It’s also a good idea to visually organize your CSS code by indenting each property with the Tab key. Note: These property names and their values may look unfamiliar. For now, just type them as is. You’ll learn what 1em and 100px mean, along with all the ins and outs of text-formatting properties, in Chapter 6. Your style sheet is complete. Time for a look-see. 5. Open the page in a web browser to preview your work. Unless you tinker with the preference settings, most browsers display black text in a standard serif font like Times. If your CSS style works properly, then you should see seven indented paragraphs in a sans-serif font in a darkish gray color. Creating a Group Selector Sometimes you’ll want several different elements on a page to share the same look. For instance, you may want all your headings to have the same font and color for a consistent style. Instead of creating separate styles and duplicating the same property settings for each tag—

,

, and so on—you can group the tags together into a single selector. 1. Return to your text editor and the selector_basics.html file. You’ll add a new style below the

tag style you just created. 72 CSS: The Missing Manual Download at Boykma.Com Tutorial: Selector Sampler 2. Click at the end of the closing brace of the tag selector, press Enter to start a new line, and then type h1, h2, h3 { . As explained earlier in this chapter, a group selector is simply a list of selectors separated by commas. This rule applies the same formatting, which you’ll add next, to all

,

, and

tags on the page. 3. Hit Enter, and then add five CSS properties: color: #BD8100; font-family: Baskerville, "Palatino Linotype", Times, serif; border-top: 2px solid #86A100; padding-top: 7px; padding-left: 100px; There’s a lot going on here, but basically you’re setting the color and font type for the headlines, adding a border line above the headlines for visual interest, and controlling the top and left spacing using the padding property. In a nutshell, this property adds space from the edges of an element without affecting a background or border—in other words, you’re scooting the headline text in from the left and down from the top without moving the border line that spans the entire page. 4. Finally, hit Enter, and then type the closing brace to complete this style. It should look like this: h1, h2, h3 { color: #BD8100; font-family: Baskerville, "Palatino Linotype", Times, serif; border-top: 2px solid #86A100; padding-top: 7px; padding-left: 100px; } 5. Save the file, and preview it in a web browser. The

heading near the top of the page and the

and

headings lower on the page all have the same font and font color as well as green border along their tops (see Figure 3-8). Creating and Applying a Class Selector Tag selectors are quick and efficient, but they’re a bit indiscriminate in how they style a page. What if you want to style a single

tag differently than all the other

tags on a page? A class selector is the answer. 1. Return to your text editor and the selector_basics.html file. Add a new style below the group selector style you just created. Chapter 3: Selectors: Identifying What to Style Download at Boykma.Com 73 Tutorial: Selector Sampler Figure 3-8: A simple tag selector can completely transform the appearance of every instance of a tag, making quick work of styling all the paragraphs of text on a page. And in this case a group selector does even more by formatting every instance of three different headline tags! 2. Click at the end of the closing brace of the h1, h2, h3 selector, press Enter (Return), and then type .note { . This style’s name, note, indicates its purpose: to highlight paragraphs that contain extra bits of information for your site’s visitors. Once you create a class style, you can apply it wherever these notes appear—like the second paragraph, in this case. 74 CSS: The Missing Manual Download at Boykma.Com Tutorial: Selector Sampler 3. Hit Enter, and then add the following list of properties to the style: color: #333; border: 2px dashed #BD8110; background-color: #FBF8A9; margin-top: 25px; margin-bottom: 35px; padding: 20px; Most of these properties should look familiar by now, but the background-color property may be new to you. Logically enough, it adds a color to the background of the element. 4. Finally, complete the style by pressing Enter and typing the closing brace. The completed class style should look like this: .note { color: #333; border: 2px dashed #BD8110; background-color: #FBF8A9; margin-top: 25px; margin-bottom: 35px; padding: 20px; } If you preview the page now, you see no changes. Unlike tag selectors, class selectors don’t have any affect on a web page until you apply the style in the HTML code. 5. In the page’s HTML, there are two

tags that begin with the word “Note” inside tags. To apply a class style to a tag, simply add a class attribute, followed by the class selector’s name—in this case, the note style you just created. 6. Click just after the “p” in the first

tag, and then type a space followed by class="note". The HTML should now look like this (what you just typed is in bold):

NOTE: Ut enim ad Be sure not to type class=".note". In CSS, the period is necessary to indicate a class style name; in HTML, it’s verboten. Repeat this step for the second paragraph (it’s just above the