Including Style Sheets in a Page h2 { font-size: large; font-weight: bold } In truth, the extension of the file is irrelevant, but the extension .css is the de facto standard for style sheets, so you should probably use it. Once you've created the style sheet file, you can include it in your page using the <link> tag, like this: <link rel="stylesheet" href="style.css" type="text/css" /> The type attribute is the same as that of the <style> tag. The href tag is the same as that of the <a> tag. It can be a relative URL, an absolute URL, or even a fully qualified URL that points to a different server. As long as the browser can fetch the file, any URL will work. This means that you can just as easily use other people's style sheets as your own, but you probably shouldn't. There's another attribute of the link tag as well: media. This enables you to specify different style sheets for different display mediums. For example, you can specify one for print, another for screen display, and others for things like aural browsers for use with screen readers. Not all browsers support the different media types, but if your style sheet is specific to a particular medium, you should include it. The options are screen, print, projection, aural, braille, tty, tv, and all. You can also specify titles for your style sheets using the title attribute, as well as alternative style sheets by setting the rel attribute to "alternative style sheet". Theoretically, this means that you could specify multiple style sheets for your page (with the one set to rel="stylesheet" as the preferred style sheet). The browser would then enable the user to select from among them based on the title you provide. Unfortunately, none of the major browsers support this behavior. As it is, you can include links to multiple style sheets in your pages, and all the rules will be applied. This means that you can create one general style sheet for your entire site, and then another specific to a page or to a section of the site as well. As you can see, the capability to link to external style sheets provides you with a powerful means for managing the look and feel of your site. Once you've set up a sitewide style sheet that sets up the basic look-and-feel parameters for your pages, changing things such as the headline font and background color for your pages or other such settings becomes trivial. Before CSS, making these kinds of changes required a lot of manual labor or a facility with tools that had search and replace functionality for multiple files. Now it requires quick edits to a single linked style sheet. file:///G|/1/0672328860/ch09lev1sec1.html (2 von 2) [19.12.2006 13:49:08] Selectors Selectors You've already seen one type of selector for CSSelement names. Any tag can serve as a CSS selector, and the rules for that selector will be applied to all instances of that tag on the page. You can add a rule to the <b> tag that sets the font weight to normal if you choose to do so, or italicize every paragraph on your page by applying a style to the <p> tag. Applying styles to the <body> tag using the body selector enables you to apply pagewide settings. However, there are also a number of ways to apply styles on a more granular basis and to apply them across multiple types of elements using a single selector. Let's say that you want all unordered lists, ordered lists, and paragraphs on a page to be displayed using blue text. Rather than writing individual rules for each of these elements, you can write a single rule that applies to all of them. Here's the syntax: p, ol, ul { color: blue } A comma-separated list indicates that the style rule should apply to all the tags listed. The preceding rule is just an easier way to write p { color: blue } ol { color: blue } ul { color: blue } Contextual Selectors There are also contextual selectors available. These are used to apply styles to elements only when they're nested within other specified elements. Take a look at this rule: p ol { color: blue } The fact that I left out the comma indicates that this rule applies only to ol elements that are nested within p elements. Let's look at two slightly different rules: p cite { font-style: italic; font-weight: normal } li cite { font-style: normal; font-weight: bold } In this case, <cite> tags that appear within <p> tags will be italicized. If a <cite> tag appears inside a list item, the contents will be rendered in boldface. Let's add in one more rule: cite { color: green } p cite { font-style: italic; font-weight: normal } li cite { font-style: normal; font-weight: bold } In this case, we have one rule that applies to all <cite> tags, and the two others that you've already seen. In this case, the contents of all <cite> tags will be green, and the appropriately nested <cite> tags file:///G|/1/0672328860/ch09lev1sec2.html (1 von 3) [19.12.2006 13:49:08] Selectors will take on those styles as well. Here's one final example: cite { color: green } p cite { font-style: italic; font-weight: normal; color: red } li cite { font-style: normal; font-weight: bold; color: blue } In this case, the nested styles override the default style for the <cite> tag. The contents of <cite> tags that don't meet the criteria of the nested rules will appear in green. The nested rules will override the color specified in the less-specific rule, so for <cite> tags that are inside <p> tags, the contents will be red. Inside list items, the contents will be blue. Classes and IDs Sometimes selecting by tag (even using contextual selectors) isn't specific enough for your needs, and you must create your own classifications for use with CSS. There are two attributes supported by all HTML tags: class and id. The class attribute is for assigning elements to groups of tags, and the id attribute is for assigning identifiers to specific elements. To differentiate between classes and regular element names in your rules, you prepend . to the class name. So, if you have a tag like this <div class="important">Some text.</div> then you write the rule like this .important { color: red; font-weight: bold; } Any element with its class set to important will appear in bold red text. If you want to give this treatment to only important <div>s, you can include the element name along with the class name in your rule. div.important { color: red; font-weight: bold; } p.important { color: blue; font-weight: bold; } In this case, if a <p> tag is assigned to the important class, the text inside will be blue. If a <div> is in the important class, its text will be red. You could also rewrite the preceding two rules as follows: .important { font-weight: bold; } div.important { color: red; } p.important { color: blue; } All members of the important class will be bold and important <div>s will be red, whereas important paragraphs will be blue. If you put a list in the important class, the default color would be applied to it. Whenever you want to specify styles for one element in a style sheet, assign it an ID. As you'll learn later in the book, assigning IDs to elements is also very useful when using JavaScript or dynamic HTML file:///G|/1/0672328860/ch09lev1sec2.html (2 von 3) [19.12.2006 13:49:08] Selectors because doing so lets you write programs that reference individual items specifically. For now, though, let's look at how IDs are used with CSS. Generally, a page will have only one footer. To identify it, use the id attribute: <div id="footer"> Copyright 2003, Example Industries. </div> You can then write CSS rules that apply to that element by referencing the ID. Here's an example: #footer { font-size: small; } As you can see, when you refer to IDs in your style sheets, you need to prepend a # on the front in order to distinguish them from class names and element names. Note that there's no additional facility for referring to IDs that are associated with particular elements. IDs are supposed to be unique, so there's no need for qualifying them further. Finally, there's nothing to say that you can't mix up all of these selectors in one rule, like so: h1, #headline, .heading, div.important { font-size: large; color: green; } As you can see, I've included several types of selectors in one rule. This is perfectly legal if you want to set the same properties for a number of different selectors. Classes also work with contextual selectors: ul li.important { color: red } In this case, list items in the important class will be red if they occur in an unordered list. If they're in an ordered list, the rule will not be applied. file:///G|/1/0672328860/ch09lev1sec2.html (3 von 3) [19.12.2006 13:49:08] Units of Measure Units of Measure One of the most confusing aspects of CSS is the unit of measure it provides. Four types of units can be specified in CSS: length units, percentage units, color units, and URLs. In this lesson, we're going to deal mostly with length and percentage units. There are two kinds of length units: absolute and relative. Absolute units theoretically correspond to a unit of measure in the real world, such as an inch, a centimeter, or a point. Relative units are based on some more arbitrary unit of measure. Table 9.1 contains a full list of length units. Table 9.1. Length Units in CSS Unit Measurement em Relative; height of the element's font ex Relative; height of x character in the element's font px Relative; pixels in Absolute; inches cm Absolute; centimeters mm Absolute; millimeters pt Absolute; points pc Absolute; picas The absolute measurements seem great, except that an inch isn't really an inch when it comes to measuring things on a screen. Given the variety of browser sizes and resolutions supported, the browser doesn't really know how to figure out what an inch is. For example, you might have a laptop with a 14.1" display running at 1024 by 768. I might have a 19" CRT running at that same resolution. If the browser thinks that one inch is 72 pixels, a headline set to 1in may appear as less than an inch on your monitor or more than an inch on mine. Dealing with relative units is much safer. In this lesson, I'm going to use one length unit: px. It's my favorite for sizing most things. However, other relative units can also be useful. For example, if you want paragraphs on your page to appear as double spaced, you can specify them like this: p { line-height: 2em; } Percentage units are also extremely common. They're written as you'd expect: 200% (with no spaces). The thing to remember with percentages is that they're always relative to something. If you set a font size to 200%, it will be double the size of the font that's currently being used. If you set a <div>'s width to 50%, it will be half as wide as the enclosing element (or the browser window, if there's no enclosing element). When you use percentages, always keep in mind what you're talking about a percent of. file:///G|/1/0672328860/ch09lev1sec3.html (1 von 2) [19.12.2006 13:49:09] Units of Measure Using Percentage Units When you use percentages as units, bear in mind that the percentage applies not to the size of the page, but rather to the size of the box that encloses the box to which the style applies. For example, if you have a <div> with its width set to 50% inside a div with its width set to 500px, the inner <div> will be 250 pixels wide. On the other hand, if the outer <div> were also set to 50%, it would be half as wide as the browser window, and the inner <div> would be 25% of the width of the browser window. I already discussed units of color back in Lesson 7, "Adding Images, Color, and Backgrounds," so I'll move on to URLs. Most of the time, when you use URLs, they're used in the <a> tag or <img> tag. In CSS, they're usually included to specify the location of a background image or a bullet image for a list. Generally, URLs are specified like this: url(http://www.example.com/) file:///G|/1/0672328860/ch09lev1sec3.html (2 von 2) [19.12.2006 13:49:09] Box Properties Box Properties In previous lessons, my discussion of cascading style sheets has dealt mostly with properties that can work at a block or a character level, and are designed to change the way text looks. There are also a number of properties that pertain to blocks but not characters. These properties are used to position elements, control the white space around them, and to apply effects such as borders to them. They're referred to as box properties, because they work on box-shaped regions of the page. Once you've mastered these properties, you can forget about using tables to lay out a page. CSS offers all the capabilities that tables do, with less markup and the capability to maintain the layout in one CSS file rather than on each page of your site. When discussing box properties, I'm going to start off with a humble <div>. People who lay out pages using CSS love the <div> tag because it brings absolutely nothing to the table in terms of modifying the appearance of a page. It's just a container that you can apply styles to. With box properties, there are general properties that enable you to set specific attributes of a more general property individually, or you can use the general property to set several attributes at once. If you want to set different values for each side of the box, you should use the properties that set individual attributes. The CSS specification says that you can set individual values for each side using the general property, but some browsers don't support that usage. Controlling Size There are two properties for controlling the size of a box element: width and height. They enable you to set the size of the box to an absolute size, or if you prefer, to a size relative to the browser window. For example, to make the header of your page 100 pixels high and half the width of the browser, you could use the following rule: #header { width: 50%; height: 100px; } Unlike tables, which, unless you say differently, are only as large as the widest bit of content, many other block-level elements are as wide as the browser window by default. For example, paragraphs and <div>s are both the full width of the browser window by default. If the following text were wrapped in a table, it would be very narrow. But inside a regular paragraph, the box containing the text will be as wide as possible unless you specifically indicate that it should have a particular width. <p>one.<br />two.<br />three.<br /></p> Of course, when you place elements side by side, you can also squeeze them down. We'll look at that a bit later. Borders CSS provides several properties for controlling borders around elements. When you worked with tables, you got a taste of borders. In the CSS world, you can apply them to any box. First, let's look at the file:///G|/1/0672328860/ch09lev1sec4.html (1 von 15) [19.12.2006 13:49:10] Box Properties border property by itself: border: width style color; When you use the border property by itself, there are three values associated with it (any of which can be eliminated). The first is the width of the border. You can also use any unit of measurement you like to specify the border width, or if you prefer, you can use thin, medium, or thick. The actual width of borders specified using the keywords is entirely dependent upon the user's browser. The next option is style. The default here is none for most elements; the other options are dotted, dashed, solid, double, groove, ridge, inset, and outset. Not all browsers support all the border styles. The last option is color. As is the case with all properties that accept multiple values, you aren't required to specify any of them. You need specify only the values that you want to change. Here are some examples that use the border property: Input .one { border: thin dotted black; } .two { border: 2px solid blue; } .three { border: 3px groove red; } .four { border: thick double #000; } Figure 9.1 is a screenshot of the previous styles applied to some paragraphs. Output Figure 9.1. Four usages of the border property. There are a number of additional properties that can be used to modify the border of the page. You can set the styles for each side's border individually using border-top, border-right, border-bottom, and border-left. That enables you to create styles like this: file:///G|/1/0672328860/ch09lev1sec4.html (2 von 15) [19.12.2006 13:49:10] Box Properties .one { border-top: thick dotted black; border-right: thick solid blue; border-bottom: thick groove red; border-left: thick double #000; } This is also useful if you want to create effects like marking quotes with a line down the left margin, like so: blockquote { border-left: 3px solid red; } You can see both of these rules in action in Figure 9.2. Figure 9.2. Using directional properties to give individual borders to different sides of a box. One thing that's obvious from the two previous screenshots is that there's not much space between the border and the text. I'll take care of that when I get to the padding property. Another option is to specify each specific property that's built into the composite border property individually. These properties are border-style, border-width, and border-color. Here's an example: p { border-style: solid dashed; border-width: 2px 4px 6px; border-color: blue red green black; } If you supply only one value for the property, it will be applied to all four sides of the box. If you supply two values, as I did for the border-style property, the first value will be applied to the top and bottom, and the second will be applied to the left and right side. For the border-width property, I supplied three values. In this case, the first value is applied to the top, the second to the left and right, and the third to the bottom. As you can see, the values are applied to the sides of the box in a clockwise fashion, and if a value isn't supplied for a particular side, the value assigned to the opposite side is used. The last property, border-color, has four values, so the values are applied to all four sides, clockwise. The resulting page appears in Figure 9.3. file:///G|/1/0672328860/ch09lev1sec4.html (3 von 15) [19.12.2006 13:49:10] Box Properties Figure 9.3. A different way to apply border styles. There are also four more properties: border-top-width, border-right-width, border-left-width, and border-bottom-width. These properties aren't particularly useful when you can just use border-width to set any or all four at the same time. Margins and Padding There are two sets of properties used to control white space around boxes: margin properties and padding properties. There's a reason why I discussed the border property before discussing margin and padding. The padding property controls white space inside the border, and the margin property controls the white space between the border and the enclosing block. Let's look at an example. The web page that follows has one <div> nested within another. The outer <div> has a solid black border; the inner <div> has a dotted black border. The page appears in Figure 9.4. Input <html> <head> <title>CSS Example</title> <style type="text/css"> .outer { border: 2px solid black; } .inner { border: 2px dotted black; padding: 0px; margin: 0px; } </style> </head> <body> <div class="outer"> Outer. <div class="inner"> Friends, Romans, countrymen, lend me your ears;<br /> I come to bury Caesar, not to praise him.<br /> file:///G|/1/0672328860/ch09lev1sec4.html (4 von 15) [19.12.2006 13:49:10] . offers all the capabilities that tables do, with less markup and the capability to maintain the layout in one CSS file rather than on each page of your site. When discussing box properties, I'm. that one inch is 72 pixels, a headline set to 1in may appear as less than an inch on your monitor or more than an inch on mine. Dealing with relative units is much safer. In this lesson, I'm. using a single selector. Let's say that you want all unordered lists, ordered lists, and paragraphs on a page to be displayed using blue text. Rather than writing individual rules for each