In this tutorial, you'll see how styles interact and how they can sometimes conflict to create unexpected results. First, you'll look at a basic page that has the CSS reset styles mentioned above plus a couple of other styles that provide some simple layout. Then, you'll create two styles and see how some properties are inherited and how others are overruled by the cascade. Then, you'll see how inheritance affects tags on a page and how a browser resolves any CSS conflicts. Finally, you'll learn how to troubleshoot problems created by the cascade.
To get started, you need to download the tutorial files located on this book's companion website at www.sawmac.com/css2e. Click the tutorial link and download the files. All of the files are enclosed in a Zip archive, so you'll need to unzip them first. (Go to the website for detailed instructions on unzipping the files.) The files for this tutorial are contained inside the folder named 05.
First, take a look at the page you'll be working on.
In a web browser, open the file named cascade.html located in the 05 tutorial folder (see Figure 5-5).
The page doesn't look like much—two columns, one with a blue background and a lot of same-looking text. There are a few styles already applied to this file, so open the CSS up in a text editor and have a look.
Using your favorite text or web page editor, open the file main.css located in the 05 folder.
This file is the external style sheet that the cascade.html file uses. It has six styles already in it—the first four are the CSS reset styles discussed on the previous page. They eliminate the basic browser styles, which is why all of the text currently looks the same. You'll create your own styles to make this page look great soon).
Figure 5-5. The basic "CSS reset" styles on this page eliminate the subtle differences in how different browsers display basic HTML tags. They also eliminate any difference between how the tags look. Your job is to take this empty canvas and style the tags so they look the way you want them to.
The last two styles—the ID styles #main and #sidebar—create the two columns you saw in Figure 5-5. The HTML is divided into two <div> tags, each with its own ID. The ID styles here essentially position the two divs so they appear side-by-side as columns. (You'll learn exactly how ID styles work when you get into CSS layout in depth, starting in Chapter 10.)
You'll first add a couple of styles to improve the page's basic appearance and its top headline.
In the main.css file, add these two styles at the bottom of the style sheet following the last } of the #sidebar style:
body { color: #B1967C; font-family: "Palatino Linotype", Baskerville, serif; padding-top: 100px; background: #CDE6FF url(images/bg_body.png) repeat-x; width: 800px; margin: 0 auto; } h1 { font-size: 3em; font-family: "Arial Black", Arial, sans-serif; }The first style adds a background image and color to the page, and also sets a fixed width for the page. If you save this file and preview the cascade.html file in a web browser (see Figure 5-6), you'll notice that these attributes aren't inherited by the other tags—the same image, for example, isn't repeated behind the heading or paragraph tags.
The font family and color properties, on the other hand, are inherited, so other tags on the page now use that font and have a brownish color. However, you'll see that although the top headline is the same color as the other text on the page, it uses a different font—here's the cascade in action. The h1 tag style doesn't have a color assigned to it, so that heading inherits the brown color applied to the body tag. But, since the h1 tag style specifies a font family, it overrides the inherited font from the body tag style.
In this example, you'll create two styles. One style formats all the second level headlines of the page; and another, more specific style reformats just those headings in the larger, main column of the page.
In the main.css file, add the following style to the end of the style sheet:
h2 { font-size: 2.2em; color: #AFC3D6; margin-bottom: 5px; }This style simply changes the text color and increases the size of the h2 tag and adds a little bit of space below it. If you view the file in a web browser, you'll see that the h2 tags in the main column and the one h2 tag in the right sidebar now look alike.
Next, you'll create a style to just format the second-level headlines in the main column.
Return to your web page editor and the main.css file, click directly after the end of the new <h2> tag style, and press Enter (Return) to create an empty line. Add the following style:
#main h2 { color: #E8A064; border-bottom: 2px white solid; background: url(images/bullet_flower.png) no-repeat; padding: 0 0 2px 80px; }You've just created a descendent selector (The HTML Family Tree) that formats all <h2> tags that appear inside of a tag with an ID of #main applied to it. The two columns of text on this page are enclosed in <div> tags with different ID names applied to them. The larger, left-hand column has the ID #main, so this particular style will only apply to the <h2> tags in that div.
This style is similar to the one you created in the tutorial for Chapter 2 in step 14 on Creating an External Style Sheet—it adds an underline and a simple flower icon to the headline. This style also specifies an orange color for the text.
Preview the page once again in a web browser (see Figure 5-7).
You'll notice that all of the heading 2 tags (the two in the main column and one in the sidebar) are the same size, but the two in the main column also have the underline and flower icon.
Because the #main h2 style is more specific than the simple h2 style, if there are any conflicts between the two styles—the color property, in this case—the #main h2 properties win out. So, although the second-level headlines in the main column get a blue text color from the h2 style, the orange color from the more specific #main h2 style wins out.
However, since the #main h2 style doesn't specify a font size or bottom margin, the headlines in the main column get those properties from the h2 style.
Because of how CSS properties sometimes conflict when several styles apply to the same tag, you'll sometimes find your pages don't look exactly as you planned.
Figure 5-7. A tale of two styles: both the h2 and #main h2 styles apply to the second-level headlines in the left column of this page. However, the #main h2 style applies to just those headlines inside the main (left) column. Also, since that style is more powerful than the basic h2 tag style, it overrides any conflicts between the two styles, in this case, using an orange text color instead of the blue color of the h2 tag style.
When that happens you'll need to do a little work to find out why, and rejigger your CSS selectors to make sure the cascade is working to produce the results you want.
Return to your web page editor and the main.css file.
You'll now create a new style to format just the paragraphs in the main column of the page.
Add the following style to the end of the style sheet:
#main p { color: #616161; font-family: "Palatino Linotype", Baskerville, serif; font-size: 1.1em; line-height: 150%; margin-bottom: 10px; margin-left: 80px; }This style changes the color, size, and font of the text, spreads the lines of text out (the line-height property) and adjusts the bottom and left margins of the paragraphs.
The page would look better if you highlighted the paragraph immediately following the headline—making it bigger and bolder can help make a more powerful message. The easiest way to style just that one paragraph is to create a class style and apply it to that paragraph.
Add one last style to the end of the style sheet:
.intro { color: #6A94CC; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; margin-left: 0; margin-bottom: 25px; }This style changes the color, font, and size, and adjusts the margins a bit. All you have to do is apply the class to the HTML.
Open the cascade.html file in your web page editor. Locate the <p> tag that appears after <h1>CSS: The Missing Manual</h1> and directly below <div id="main">, and then add the following class attribute:
<p class="intro">
Preview the page in a web browser.
And…the paragraph is completely unchanged. What gives? Following the rules of the cascade, .intro is a basic class selector, while the #main p is a descendent selector composed of both an ID and a tag name. These add up to create a more specific style, so its style properties overrule any conflict between it and the .intro style.
In order to make the .intro style work, you need to give it a little juice by making its selector more powerful.
Return to the main.css file in your web page editor and change the name of the style from .intro to #main .intro.
Now you have a descendent selector composed of an ID and a class. This style is more specific than #main p, and its properties override those in any less specific style.
Preview the page in a web browser.
Voila! The paragraph changes to blue, with bigger text, a different font, and no left margin. If you didn't have a clear understanding of the cascade, you'd be scratching your head wondering why that class style didn't work the first time around.
In this and the previous four chapters, you've covered the basics of CSS. Now, in Part II, it's time to take that knowledge and apply it to real design challenges, making web pages look great.