The Basics of Cascading Style Sheets
By Matthew Pizzi,Zak Ruvalcaba
Date: Dec 30, 2004
Sample Chapter is provided courtesy of Sams.
CSS, if used correctly, can greatly extend your ability to create attractive Web designs. Learn how you can use styles to enhance your Dreamweaver MX 2004 web page.
In this Chapter
- A Brief Introduction to Styles
- Designing with CSS
- Style Properties
- Working with CSS Styles
- Editing CSS in Code View
The cascading style sheets (CSS) language is a way to describe the appearance of Web pages by assigning styles to specific HTML tags and portions of the page. These styles allow a designer greater range of presentational effects than can be achieved by using only HTML styles. Dreamweaver MX 2004 makes it easy to edit and apply style sheets to new or existing Web documents.
If you're already familiar with CSS, you can skip over the following introduction and go directly to "Designing with CSS" to use Dreamweaver MX 2004 to build Web pages using styles.
A Brief Introduction to Styles
The font face of a line of text, the colored border around a sidebar, the underline of a link—these are all examples of styles in action. A style is simply the way in which markup, such as HTML content, is displayed to the user.
All browsers have built-in style rules for displaying HTML; for example, they display the text marked with the <h1> tag as bold, extra-large text and the <p> tag as normal text with a blank line after it. These built-in style rules can be extended or changed by using CSS.
A style sheet is a collection of additional style rules that are added to the browser's rules, changing the way in which the browser displays the Web page. Most style sheets are separate files, usually with the file extension CSS. By saving styles in a CSS file, you can attach the style sheet to any number of HTML pages. This makes it easy to control the presentation of the entire site from a single file or several files in combination.
The word "cascading" refers to the key concept of the cascade. The cascade is the method used to combine style rules from a variety of sources—not only the browser's styles and those of the Web designer, but also the user's preferred styles. In general, the more specific the style, the higher weight it is given in the cascade. A rule that applies to some paragraphs is more specific than one that applies to all paragraphs, and a rule set by the user is more specific (to that user) than one set by the browser.
The CSS language was originally defined by the World Wide Web Consortium's CSS Level One recommendation (December 1996) and was updated in May 1998 by the CSS Level Two recommendation. The CSS Level Two recommendation can be downloaded from http://www.w3.org/TR/REC-CSS2 in a variety of formats, although it's rather dry reading.
CSS Styles Versus HTML
CSS properties can create the same types of presentation effects as HTML tags and attributes, such as the <font> tag or the various attributes on the <body> tag.
But CSS styles go beyond the capabilities of HTML alone, enabling you to create effects such as links that change color when the mouse is moved or borders around any HTML elements. Beyond simple text effects, CSS styles can also be used to lay out the whole page, entirely avoiding the use of HTML tables for layout.
This allows HTML to be used for its primary purpose of conveying the structure of the Web page content, and the style sheet defines the presentation. This separation is quite helpful to Web users who have disabilities, especially visual impairments, because the page content can be accessed directly, yet still allow designers to create visually impressive Web pages. Thus, CSS offers the best of both worlds for the creative designer as well as the user with special needs.
The Syntax of CSS
CSS are created as ordinary text files, as HTML files are, but unlike HTML they don't use a system of tags and attributes. The CSS language instead uses a syntax of its own. Listing 10.1 is an example of a rather ordinary style sheet that sets several rules. Don't worry if you can't understand it yet; you'll be learning to understand CSS rules soon, and Dreamweaver MX 2004 automates the process of writing style rules for you.
Listing 10.1 A Typical CSS Consists of Multiple CSS Rules
body {
font-family: Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, sans-serif;
color: teal;
}
p {
padding-left: 3em;
}
.person {
padding-left: 0em;
font-size: large;
font-weight: bold;
color: maroon;
}
.job {
font-weight: bold;
}
This style sheet consists of five style rules. Locate the pairs of braces (curly brackets) to differentiate each style; each set of braces represents one rule. The style rule begins with a selector, which indicates what parts of the Web page should be styled by this rule. Then, within the braces are one or more declarations, consisting of a CSS property name, a colon, the value of that property, and a semicolon.
These properties determine how the style differs from the default values. For example, the font-family value specifies a certain font face that should be used by the browser instead of its default font (which is usually Times New Roman). Each CSS property can be assigned a certain set of values; for example, font-family can be assigned names of fonts, whereas padding-left can accept measurements. Dreamweaver MX 2004 makes it easy to assign values by providing pull-down menus with the appropriate values and units for each property.
NOTE
When setting measurements and font sizes, you can use several types of units. The most common are pixels and percentages, which work just like pixel and percentage values in HTML. Ems are based on the size of the current font, as set by the style sheet or the user's browser preferences; if the font is 12-point Arial, a measurement of 2 ems equals 2 times 12 points, or 24 points. Inches and centimeters can also be used as units of measure.
Units that are based on a fixed physical size, such as pixels, points, inches, or centimeters, are absolute units. These are most useful if you know the exact dimensions of the output device with a fair degree of certainty. Percentages and ems are relative units, which—if used properly—adjust to the user's desired preferences, which is useful for users with disabilities. In general, relative units are more accessible, but absolute units are easier for designers to work with. If accessibility is a concern, use relative units even if it means slightly less control over the final output.
Link, Class, and Span
To use CSS styles with HTML files, several tags and attributes are used that aren't commonly seen outside of their roles in CSS.
The <link> tag is found only in the <head> section; it specifies a style sheet that is attached to the HTML file. Without using <link>, an external style sheet can't be associated with the Web page; <link> tells the browser to load those styles and apply them.
The class attribute is used to define custom styles in HTML; by setting a class attribute on any HTML tag, you make it part of a group of tags that can be selected by a style rule.
The <span> tag is used to designate a smaller part of an HTML element as being part of a class; it functions like a <strong> or <em> inline element, but with no specific styles attached to it.
Examples of these tags and attributes are shown in the HTML page in Listing 10.2. You won't need to memorize the syntax for these tags and attributes, because Dreamweaver MX 2004 creates them for you. However, you should be familiar with their function, in case you wonder why Dreamweaver MX 2004 is inserting all these strange things into your Web page!
Listing 10.2 This HTML File Uses the class Attribute to Set Styles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Idyll Mountain Internet Employees</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="idyllmtn.css" rel="stylesheet" type="text/css"> </head> <body> <h2>Let's meet the Idyll Mountain team:</h2> <p class="person">Liz Bartlett</p> <p>As <span class="job">Chief Operations Officer</span>, Liz runs the business aspects of the company, and is also the primary designer for the majority of Idyll Mountain client sites.</p> <p class="person">Kynn Bartlett</p> <p>Although rarely seen around the office, <span class="job">Chief Technologist</span> Kynn Bartlett does system administration as well as trailblazing new technologies and leading our accessibility efforts.</p> <p class="person">Maria Moreno</p> <p>Our <span class="job">Graphic Designer</span> Maria is responsible for the visual design of most of our Web sites, and also for entries in the <a href="http://www.dogshow.com/">Virtual Dog Show</a>.</p> <p class="person">David Waller and Laura Bishop</p> <p><span class="job">Site Maintenance Specialists</span> David and Laura maintain and develop client Web sites according to the <acronym title="World Wide Web Consortium" lang="en">W3C</acronym>'s <acronym title="HyperText Markup Language" lang="en">HTML</acronym> and <acronym title="Cascading Style Sheets" lang="en">CSS</acronym> specifications.</p> </body> </html>
You should be able to spot the class="person" and class="job" attributes in this HTML file; these refer to the style rules from Listing 10.1. Apart from these classes, the HTML file doesn't contain any presentational markup; <font> tags and their ilk are conspicuously absent. If you load the Web page into a Web browser, however, you'll see styles applied to the HTML thanks to the <link> tag referencing the style sheet. The end result of combining the HTML with the CSS is shown in Figure 10.1.
)
Figure 10.1 Netscape 6 displays the Web page with CSS styles.
Support for CSS Styles
Although CSS has been around since 1996, it's only recently that there has been widespread support for styles in the browsers. Early attempts at CSS implementation, notably Internet Explorer 3 and Netscape 4, were well-meaning but unfortunately contained serious bugs. Most Web developers wisely avoided using CSS until browsers would correctly interpret their designs.
The short listing of browser versions in Table 10.1 gives a rough idea as to the adoption of CSS by the browsers. This is just a representative sample of the most common browsers and doesn't include many of the other browsers out there, such as OmniWeb, Konqueror, or iCab.
Table 10.1 Browser Support for CSS
|
Browser and Version |
CSS Implementation |
|
Internet Explorer 3 |
Poor |
|
Internet Explorer 4 |
Fair |
|
Internet Explorer 5 (Windows) |
Good |
|
Internet Explorer 5 (Macintosh) |
Great |
|
Internet Explorer 6 |
Good-Great |
|
Firefox |
Great |
|
Lynx |
None |
|
Netscape 3 |
None |
|
Netscape 4 |
Fair |
|
Netscape 6 |
Great |
|
Netscape 7 |
Great |
|
Mozilla 1 |
Great |
|
Opera 3 |
Fair |
|
Opera 4 |
Good |
|
Opera 5 |
Good-Great |
|
Opera 6 |
Great |
|
Safari |
Great |
|
WebTV |
Fair |
The good news is that CSS support continues to improve, and the newest versions are quite good at displaying most CSS styles. The bad news is that older browsers are still out there, and that means that you need to be sure to test your CSS-based designs in as many older versions as you can find.
NOTE
Several newer browsers have a special compatibility mode for HTML and CSS, where they adhere more closely to the published standards. Mozilla, Netscape 6 and 7, and Internet Explorer 6 turn on this mode when they encounter a valid DOCTYPE for HTML Strict and for a few other DOCTYPE declarations; other pages are done in a "quirky" mode for backward compatibility with older browsers. For more information, see the following URLs:
http://www.mozilla.org/docs/web-developer/quirks/
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
A recommended basic test suite includes Netscape 4, Netscape 6 (or Netscape 7, or Mozilla), Internet Explorer, Opera, and Lynx. A good CSS design may not look the same on every browser—especially Lynx—but should be functional on all browsers and platforms. You can download these browsers from the following locations if they're not already installed on your computer:
Netscape for Windows or Macintosh: http://www.netscape.com/
Mozilla and Firefox for Windows or Macintosh: http://www.mozilla.org/
Internet Explorer for Windows: http://www.microsoft.com/windows/ie/
Internet Explorer for Macintosh: http://www.microsoft.com/mac/
Opera for Windows or Macintosh: http://www.opera.com/
Lynx for Windows or Macintosh: http://lynx.browser.org/
Designing with CSS
Dreamweaver MX 2004 makes it easy to design a Web page using CSS styles. The primary way to access CSS design features is through the CSS Styles panel. You can toggle this panel off and on with Shift+F11.
Creating a CSS-based design may require you to think differently about how you assemble a Web page. To start designing, create an HTML page, but don't assign it any specific HTML styles such as colors or alignment—you'll set those with CSS styles. Use HTML tags such as <h1> or <strong>, which give meaning to the text they surround, but avoid those which grant only appearance changes such as <font>.
After you've got your content in your HTML page, you can start adding CSS styles. The creation process has four steps:
Create a style sheet file.
Define the styles you want to use.
Apply the styles to the HTML page.
Test the styles in a variety of Web browsers.
Dreamweaver MX 2004 makes it easy to step through this process, automating your choices and doing the work of writing the CSS language for you.
Create a Style Sheet
To create a new style sheet in Dreamweaver MX 2004, start by defining a style. Go to the CSS Styles panel in the Design panel set, and click the New CSS Style button—it looks like a plus (+) symbol next to a document. This opens the dialog box shown in Figure 10.2.
){kind=small}
Figure 10.2 Creating a new style sheet in Dreamweaver MX 2004.
You have three options for the type of style to create: a custom style, a redefined HTML tag, or a CSS selector. Custom styles, despite the name, are easiest to use; redefined HTML tags and CSS selectors are covered later in this chapter. By default, Dreamweaver MX 2004 names the first custom style .unnamed1, as you can see in Figure 10.2.
All custom styles have a single-word name, which identifies that style. Custom styles begin with a period, and if you don't add it in, Dreamweaver MX 2004 will remind you. In your HTML markup, the class attribute will be set to this style name to identify it, minus the leading period. A custom style can also be thought of as a class style, or a CSS style with a class selector.
TIP
You can name a class style anything you like; it's basically just an arbitrary word used to group these items. A descriptive name is good, especially one that describes the function instead of presentation details. For example, class="detail" makes more sense than class="bluetext". Why? Well, you may want to change your styles later, and what if the details are no longer in blue? You should also avoid using style names that are the same as HTML tags or attributes, simply to avoid confusion.
In the sample style sheet in Listing 10.1, I created a class called .person by entering that class name in the New CSS Style dialog box.
The other option when creating a new style is to choose the file in which the style is defined. There are initially two options: defining the style in a new style sheet or defining it within the HTML document. The option This Document Only creates an embedded style sheet, which is covered later in this chapter. To make a new style sheet, select New Style Sheet and click the OK button. You will be prompted for a style sheet filename and location.
Your CSS file should be named with a .css extension because that's the commonly used extension for style sheets. Technically it doesn't need to follow this naming convention, but there's no good reason to go against the grain here.
Define Your Styles
After you've given a filename to your style sheet, you'll be presented with a window to set the options on your style. As shown in Figure 10.3, there are eight sets of options, and by default, you start on the Type option. You can set any number of text options at this point; in the example, I've chosen to make the text bold and change the color to teal.
)
Figure 10.3 Setting the text options to create bold, teal text.
After you've set the options you desire, click the Apply button. Later in this chapter, I'll cover each option and explain what effect it has on your styles. When that's done, you've created your first style!
You can create more styles by selecting New CSS Style again; you won't need to create a new style sheet, because you can store them all in the same style sheet file.
Apply Your Styles
Dreamweaver MX 2004 gives you new ways to apply CSS styles to your Web pages.
In your HTML file, choose the text that you want to receive the style. Highlight the section with the mouse, and then in the Properties Inspector, choose the style you want to apply by choosing the style name in the style drop-down menu (see Figure 10.4).
You can remove the style by highlighting text and choosing None in the style drop-down menu in the Properties Inspector.
)
Figure 10.4 Highlight text and then apply a style using the Properties
Inspector.
Three other ways exist to set the style of HTML text. You can select a style from the CSS Styles option on the Text menu; you can highlight the text and right-click (or Ctrl+click) and apply it via the context menu; or you can edit the HTML directly in code view and add an appropriate class attribute.
Test Your Designs
After you've applied your styles, you'll want to test how they look in a browser. Dreamweaver MX 2004's design view will show you the effects of some styles, but not all of them; to get a real test of your new styles, you need to test in several browsers. Remember that not all browsers treat CSS the same way, so you will need to test in a variety of browsers to make sure your designs look decent and can be used reliably.
Use the Preview in Browser option from the File menu—or the equivalent toolbar button, which looks like a globe—to display your HTML page and style sheet in a browser. The screenshot in Figure 10.5 shows how the browser interprets the CSS file and applies it to the Web page.
If your styles work on the first try, congratulations! In most cases, you may need to do some editing and changing based on the results of testing in a variety of browsers. Don't worry, that's common; it's an unfortunate fact of life for CSS designers that browser testing is an essential chore.
)
Figure 10.5 Our styles have been successfully applied to the HTML file, as shown
by Netscape 6.
Style Properties
Dreamweaver MX 2004 provides a handy interface for setting CSS properties on your styles, dividing the properties into several menus of related options. These menus can set all the most useful style properties, although not all CSS properties are covered. Additional CSS properties can be set by editing the CSS file in code view, as described later in this chapter.
The rest of this section describes each option menu in turn and the associated style properties. To learn more about each CSS property, you can consult the O'Reilly CSS Reference accessible through Help, Reference. Another good source of CSS knowledge is Teach Yourself CSS in 24 Hours, published by Sams.
NOTE
Dreamweaver MX 2004 does not give the name of CSS properties in the option menus; for example, it has a box for Size and doesn't mention the CSS property name font-size anywhere. This makes Dreamweaver MX 2004 somewhat easy to use, but it can make it difficult to look up CSS properties in other references. For this reason, style options in this chapter will be followed by the name of the CSS property in parentheses.
Text Options
The text options control the appearance of the selected text. Many of these options are very similar to the <font> tag in HTML, although CSS styles offer you greater control than allowed in HTML styles. The complete list of text options, and the effects produced by each, are shown in Table 10.2.
Table 10.2 CSS Text Properties
|
Option (CSS Name) |
Effect |
|
Font (font-family) |
Sets the font face choice(s) and default font family. |
|
Size (font-size) |
Sets the size of the text to absolute or relative sizes. |
|
Weight (font-weight) |
Sets the text to bold, light, bolder, lighter, or a numeric value (100 is lightest, 500 is normal, and 900 is darkest). |
|
Style (font-style) |
Sets the font to italic or oblique. |
|
Variant (font-variant) |
Sets the text to small capital letters instead of lowercase letters. |
|
Line Height (line-height) |
Sets the line spacing; a value of 2 ems equals double-spaced text. |
|
Case (text-transforms) |
Changes the case of the text using CSS. |
|
Decoration (text-decoration) |
Adds special effects to the text, such as underlines, overlines, strikethroughs, or blinking text. |
|
Color (color) |
Sets the (foreground) color of the text. |
One concept unique to CSS that does not appear in HTML is that of generic font families. When you specify a font-family value, you are actually listing several fonts. If the user's computer doesn't have the first font, the browser will pick subsequent fonts from the list until it finds a match. Your final font-family value should be a generic font that is similar to the specific fonts you're attempting to use.
The generic fonts are sans-serif, serif, monospace, fantasy, and cursive. Each browser has a default value for each generic family, and it will use that if no other font from your list is found. For example, if you set a font-family value of Georgia, serif and the user's computer doesn't have the Georgia font installed, the browser will display the generic serif font (which, for most browsers, is Times New Roman).
Background Options
In HTML, you can set the background for the whole page or for individual table cells. With CSS styles, you can set a background for any part of the page and a background image as well. The background options are summarized in Table 10.3.
Table 10.3 CSS Background Properties
|
Option (CSS Name) |
Effect |
|
Background Color (background-color) |
Sets the background color. |
|
Background Image (background-image) |
Selects a background image, which (by default) is tiled. |
|
Repeat (background-repeat) |
Determines if the background image tiles (repeat), repeats horizontally (repeat-x), repeats vertically (repeat-y), or doesn't tile at all (no-repeat). |
|
Attachment (background-attachment) |
Determines if the background image scrolls or remains fixed when the page scrolls. |
|
Horizontal (background-position) |
Determines the initial placement of the background image; can be left, middle, or right, a measurement, or a percentage. |
|
Vertical (background-position) |
Determines the initial placement of the background image; can be top, middle, or bottom, a measurement, or a percentage. |
The Repeat, Attachment, Horizontal Position, and Vertical Position options apply only if there's a chosen background image. Background images may not load if the user has image loading turned off, so you'll want to choose a background color that is similar to your background image, if possible.
TIP
When you set the text color, it's a good idea to also set the background color and make sure that there is good contrast between the foreground and background. This will help users with visual impairments read your page more easily. Also, if you set the text color alone and not the background, you could cause problems for your users who set their browsers to different default colors. For example, setting the text to black but not the background to white will make your words invisible to users with white-on-black default settings, a common combination for people with low vision.
Block Options
The block options are CSS properties that affect the display of a block of text. These options are shown in Table 10.4.
Table 10.4 CSS Block Properties
|
Option (CSS Name) |
Effect |
|
Word Spacing (word-spacing) |
Increases or (for negative values) decreases the spacing between words. |
|
Letter Spacing (letter-spacing) |
Increases or (for negative values) decreases the spacing between letters. |
|
Vertical Alignment (vertical-align) |
Determines the vertical placement relative to the text baseline. |
|
Text Align (text-align) |
Determines the horizontal alignment; justify aligns the text on both right and left. |
|
Text Indent (text-indent) |
Indents the first line of the text by a given measurement or percentage. |
|
Whitespace (white-space) |
Determines whether whitespace will be ignored (normal, the default), treated as preformatted text (pre), or displayed without line wrapping (nowrap). |
|
Display (display) |
Sets a block so that it's not displayed (none) or is displayed as another type of markup element. |
The display property can be used to make an element invisible; this can be useful for text you want to show to users who aren't using a CSS-enabled browser, because the display property will be ignored along with all other CSS. Just don't use it to show a message such as "Upgrade your browser, loser!" because that's plain rude.
TIP
You might assume that you can use the Text Align option to center tables and other block elements; unfortunately, that's an incorrect—but natural—assumption. The CSS text-align property aligns only inline content such as text; if you need to center a block element such as a <table>, set the margins of the left and right sides to the value auto. Margin is one of the box options.
Box Options
CSS browsers display all HTML elements as a series of nested boxes. The box options control the characteristics of those boxes, as shown in Table 10.5.
Table 10.5 CSS Box Properties
|
Option (CSS Name) |
Effect |
|
Width (width) |
Sets the width of the display box to a measurement or a percentage. |
|
Height (height) |
Sets the height of the display box to a measurement or percentage. |
|
Float (float) |
Makes the box float to the right or left, and subsequent content flows around it on the other side. |
|
Clear (clear) |
Stops content from flowing around boxes that float on the right or left. |
|
Padding (padding) |
Sets the padding of the box to a measurement or percentage; can be set separately on each side. |
|
Margin (margin) |
Sets the margin of the box to a measurement or percentage; can be set separately on each side. |
An HTML element's CSS display box is like an onion; it is composed of a number of layers wrapped around each other. The outer layer is the margin; the margin is transparent, and the value of the margin specifies the minimum distance that box must be from another nearby box. Vertical margins will collapse, which means that only the largest value will be used between two boxes. This makes sense; it's like if Lois said, "Everyone has to stay three meters away from me," and Clark declared, "Everyone has to stay one meter away from me." They will use the larger limit of three meters, instead of adding them together and staying four meters from each other.
Within the margin is the border layer, which is set by the border options (covered in the next section). Within the border is the padding; the padding isn't transparent, but is set to the same background color (or image) as the element itself. The innermost part of the display box is the element content itself. The width and height properties set the content width, not the total of the content, the padding, the border, and the margin, or some combination thereof.
Border Options
The border options enable you to draw lines around CSS display boxes. Each box can have one border, but you can style each side of that box differently if you want. The border options are shown in Table 10.6.
Table 10.6 CSS Border Properties
|
Option (CSS Name) |
Effect |
|
Style (border-style) |
Sets the type of line used to draw the border; can be set separately on each side. |
|
Width (border-width) |
Sets the width of the line used to draw the border as a measurement or percentage; can be set separately on each side. |
|
Color (border-color) |
Sets the color of the line used to draw the border; can be set separately on each side. |
The lines drawing a border can be set to give a three-dimensional effect by the use of outset or inset or by using different colors on the top and left borders.
List Options
The list options shown in Table 10.7 affect only lists created with the HTML <ul> or <ol> tags, and they apply only to the <li> elements within those lists. These properties enable you to change the appearance of the marker before each list item, which is a bullet for unordered lists (<ul>) or a counter for ordered lists (<ol>).
Table 10.7 CSS List Properties
|
Option (CSS Name) |
Effect |
|
Type (list-style-type) |
Determines the type of marker used before each item in the list; can be bullets (disc, circle, square) or counters (decimal, lower-roman, upper-roman, lower-alpha, upper-alpha). |
|
Bullet Image (list-style-image) |
Selects an image file (GIF, JPEG, or sometimes PNG) that replaces the list marker. |
|
Position (list-style-position) |
Determines whether the list marker is placed inside or outside of the margin of the list item. |
Unfortunately, the CSS language does not have a way to specify the starting value for a list counter; for example, there's no way to start counting at six using CSS rules.
Positioning Options
The positioning options enable you to precisely lay out the Web page using CSS properties instead of HTML tables—in theory, at least. In practice, the CSS positioning properties tend to be irregularly supported, and it takes a lot of work and testing to make Web pages that work correctly in most browsers. In most cases, it's easier to use <table> markup for layout. The options for positioning CSS are shown in Table 10.8.
Table 10.8 CSS Positioning Properties
|
Option (CSS Name) |
Effect |
|
Type (position) |
Chooses the positioning scheme used to place the box. |
|
Width (width) |
Sets the width of the display box to a measurement or a percentage. |
|
Height (height) |
Sets the height of the display box to a measurement or percentage. |
|
Visibility (visibility) |
Determines whether the box is shown; if not shown, the space for the box is still reserved in the layout. |
|
Z-Index (z-index) |
Determines the stacking order for boxes placed over each other; higher-numbered boxes are at the top of the stack. |
|
Overflow (overflow) |
Determines what should be done if the space required to display all the content exceeds the dimensions set by the height and width; excess content can flow out of the box (visible), be clipped (hidden), or be accessed via scrollbars (scroll). |
|
Placement (left, right, top, bottom) |
Places the box as an offset from its content box, as determined by the chosen positioning scheme. |
|
Clip (clip) |
Sets a mask within the box that hides displayed content outside of the clipping box. |
To use CSS positioning, first you must decide on the positioning scheme to be used: static, relative, absolute, or fixed. The scheme determines the context box for the positioned element, and its final position is located relative to that context box.
Static positioning is simply the normal way pages are laid out without CSS positioning; it's the default value. Relative positioning calculates the static position and then applies offsets relative to that position. Absolute positions are calculated based on the location within the browser window or within any parent element that's been positioned. Fixed positioning is like absolute positioning, except that the fixed content never scrolls when the page scrolls; it remains fixed in position.
Offsets move the positioned box relative to its context box, with positive offsets moving toward the center of the box and negative toward the outside. These offsets are determined by the values given to the top, right, bottom, and left properties.
Extensions and Filters
The extensions and filters options constitute a catch-all category; it's where Dreamweaver MX 2004 places miscellaneous CSS properties. These properties are shown in Table 10.9.
Table 10.9 CSS Extensions and Filters
|
Option (CSS Name) |
Effect |
|
Page Break Before (page-break-before) |
Tells the printer to start on a new page before printing this element. |
|
Page Break After (page-break-after) |
Tells the printer to start on a new page after printing this element. |
|
Cursor (cursor) |
Change the pointer when the mouse is over this element. |
|
Filter (filter) |
Apply a special effect filter; nonstandard CSS. |
The filters are poorly supported—and because they're not part of the CSS specifications, that's to be expected. You shouldn't rely on them, although the majority of browsers will simply ignore those properties.
Shorthand Properties in CSS
If you open up the Preferences dialogue box in Dreamweaver MX 2004 and look at the CSS preferences, you'll find they deal exclusively with something called shorthand properties, as shown in Figure 10.6.
)
Figure 10.6 CSS preferences in Dreamweaver MX 2004 control the use of shorthand
properties.
A shorthand property is a simple way of writing several properties at once. For example, consider the following rules:
background-color: blue;
background-image: url("mybg.gif");
background-repeat: repeat-y;
background-position: top left;
Those rules can be written more compactly using the background shortcut property:
background: blue url("mybg.gif") repeat-y top left;
The CSS Preferences panel allows you to choose whether Dreamweaver MX 2004 will write certain properties using this shorthand notation or will write out every rule. The list of shorthand properties is shown in Table 10.10.
Table 10.10 CSS Shorthand Properties
|
Shorthand Property |
Properties Set |
|
font |
font-style, font-variant, font-weight, font-size, line-height, font-family |
|
background |
background-color, background-image, background-repeat, background-attachment, background-position |
|
margin |
margin-top, margin-right, margin-bottom, margin-left |
|
padding |
padding-top, padding-right, padding-bottom, padding-left |
|
border |
border-style, border-width, border-color |
|
list-style |
list-style-type, list-style-image, list-style-position |
If you set Dreamweaver to use shorthand properties, keep in mind that setting a shorthand property has two effects: It sets all associated properties to their default values, and then it sets the listed values. So if you use the shorthand property font with a value of 8px Verdana, remember that you've also just set the font-weight to normal (the default value for that property).
Dreamweaver MX 2004 writes the properties for you most of the time, so there's no great value in turning on the shorthand properties in CSS preferences.
CSS Validation
Dreamweaver MX 2004 enables you to check your HTML code for validity and conformance to accessibility standards, but unfortunately, it does not provide the same capability for style sheets.
Instead, you can use the W3C's CSS validator, which runs via the Web, to check your CSS for code mistakes or omissions. You can verify your style sheet by going to http://jigsaw.w3.org/css-validator/. Sample output from the CSS validator is shown in Figure 10.7.
)
Figure 10.7 The W3C's CSS validator can spot code problems and provide
helpful warnings.
Working with CSS Styles
Now that you have a basic understanding of CSS properties, you're ready to create more extensive style sheets that take advantage of the power of CSS. Dreamweaver MX 2004 is your helpful assistant in developing, editing, and deploying CSS styles.
Editing Styles
After you've defined a style, you'll eventually want to go back and edit it. To do this, open the CSS Styles panel by pressing Shift+F11 or by selecting it from the Window menu. The CSS Styles panel has two settings: Add New Styles and Edit Styles. Select the Edit Styles setting and the display changes to list each of your styles and enables you to edit each one, as shown in Figure 10.8. If you choose a style and click the Edit Style Sheet button—which looks like a pencil writing on lined paper—you'll find yourself in the familiar CSS options menus, and you can change the style properties.
)
Figure 10.8 Editing CSS properties with Dreamweaver MX 2004.
If you like a style and want to reuse it in your style sheet, select Duplicate from the CSS Styles menu. This will let you create a new style with the same definitions as the old one; you can then further edit the new style if you want.
You can also delete styles that you're no longer going to use; click the Trash Can icon or choose Delete from the CSS Styles menu.
Redefining HTML Tags
As you've previously learned, you can use custom class styles to apply CSS properties to selected text. Dreamweaver MX 2004 also helps you redefine the appearance of any HTML tag—for example, you can add a text indent to all paragraph <p> tags, or you can make all <h1> elements use a specific font style.
To redefine an HTML tag, choose the option Redefine HTML Tag when creating a new CSS style. You can choose the name of the tag from the pull-down menu, or you can type it, without angle brackets, into the field provided. Then set the property options as you normally would.
TIP
The style sheet in Listing 10.1 has a rule that affects the h1, h2, h3, h4, h5, and h6 tags—these are redefined HTML tags, but the rule uses a combined selector, which is described later in the section "Using CSS Selectors." You could create the same effect by creating six rules, redefining the h1, h2, h3, h4, h5, and h6 tags separately.
Changing the Entire Page
Redefining the <body> tag has the effect of changing the entire page; this is how you would set a background for the whole page or set the font for the text. Just as the HTML attributes text, link, vlink, alink, and bgcolor affect the whole page, so does a body style extended to all tags within the body. This is a process called inheritance, and it's part of the cascade from which the CSS language gets its name. Subsequent styles that are more specific—such as an h1 style—can change the inherited style properties.
An example of the effect of body rules can be seen in Figure 10.9. The body rule was edited and the text property Style was set to italic. This has the effect of setting the whole page in italic.
Using CSS Selectors
There are additional selectors you can use in your CSS style sheets besides class styles and redefined HTML tags. To create a style based on a CSS selector, you choose the CSS Selector option when creating a new CSS style, and then type in the CSS selector you want to use.
The different categories of CSS selectors are listed in Table 10.11, along with an example and the example's purpose. The attribute, child, and adjacent sibling selectors are implemented in only a few of the newest browsers, so you may want to avoid using those in most cases.
)
Figure 10.9 Changing the text style for the body tag changes the entire
page.
Table 10.11 A Selection of CSS Selectors
|
Selector Type |
Example |
Function |
|
Simple |
li |
Selects all list item tags. |
|
Class |
span.person |
Selects all <span> tags with class="person". |
|
ID |
#main |
Selects the one tag with id="main". |
|
Universal |
* |
Selects all tags. |
|
Combined |
h1, h2, h3, .header |
Selects the h1, h2, and h3 tags, and all tags with class="header". |
|
Descendant |
.footer p |
Selects all paragraph tags that are the descendant of a tag with class="footer". |
|
Pseudo-Class |
a:hover |
Selects all anchor tags that are in the "hover" state. |
|
Pseudo-Element |
p:first-line |
Selects the first line of text of paragraph tags. |
|
Attribute |
td[axis="expense"] |
Selects all table data cells with the attribute axis="expense". |
|
Child |
ol.outline < li |
Selects all list item tags that are the direct children of an ordered list tag with class="outline". |
|
Adjacent Sibling |
h1 + h2 |
Selects all h2 heading tags that immediately follow an h1 tag. |
Combined and descendant selectors are among the most commonly used CSS selectors. A combined selector is a group of other selectors separated by commas. The style applies to any elements that match any of the comma-separated selectors. A descendant selector is composed of two or more selectors with spaces between them. The CSS style is applied to any elements that match the final selector and that are contained by elements matching the previous selectors.
Pseudoclasses are selectors that are dependent on the user's actions and the state of the browser. A pseudoclass is written as an HTML tag name followed by a colon and then the name of the pseudoclass. These are most commonly used with link styles, and Dreamweaver MX 2004 provides four link-related selectors as pull-down options when creating CSS selector styles.
The a:link selector lets you set a style on unvisited HTML links, and the a:visited sets the style for visited links. These are the equivalents of the HTML link and vlink attributes on <body>, although you can change more than the color using HTML. The a:active selector sets the active link style when the link has been clicked but the new page hasn't yet loaded, and the a:hover selector determines the style when the mouse pointer is over the link. A pseudoclass selector can be combined with other selectors, so if you want to set all the links within a navigation bar to a certain style, define a class nav on the bar, and create a style with the CSS selector .nav a:link. This will apply the style to all <a> links that are descendants of something in the nav class.
Attaching a Style Sheet
A primary advantage of using CSS styles—instead of HTML styles—is that you can write a style sheet once and have it apply to a number of Web pages on the same site. Similarly, you can apply multiple style sheets to the same Web page, creating a composite page style based on several style sheets.
To attach a style sheet to a Web page, select the Attach Style Sheet option from the CSS Styles menu; you can also click the Attach Style Sheet icon, which looks like a few links of a chain touching a style sheet document. You can attach multiple style sheets in this way or attach a style sheet that was originally created for another Web page. To remove the style sheet, select it in the CSS Styles panel in Edit Styles mode and click the Trash Can.
Embedded Style Sheets
An attached style sheet is very useful for those styles that you want to apply to other pages on your same site. But if you have styles that you're going to use on only one page, you may want to incorporate the style directly into the HTML code for that page alone. This is known as creating an embedded style sheet. An embedded style sheet is stored in the <head> section of the page and is enclosed by a <style> tag.
To create an embedded style sheet, select the option This Document Only when creating a new CSS style. This creates the new style within your HTML document instead of an external file. An example of such an embedded style sheet is shown in Figure 10.10.
)
Figure 10.10 An embedded style sheet appears in the head of the HTML page, in
code view.
If you need to extract an embedded style sheet and make it a linked style sheet instead, you can use the Export option from the CSS menu.
Converting CSS to HTML
As noted before, not all browsers understand CSS well. If you often have to deal with older browsers, you may want to create an alternative version of your page—one that uses HTML <font> tags and other older markup instead of CSS styles. Dreamweaver MX 2004 makes this a simple and painless process.
To do this, open your HTML file (with attached style sheets) in Dreamweaver MX 2004 and then from the File menu, choose Convert. The option to convert to 3.0 Browser Compatible will create and open a new version of your HTML file, with styles converted to presentational markup, as shown in Listing 10.3. Save this new file with a different name, such as idyllmtn_oldbrowsers.html.
Listing 10.3 The Styles Have Been Converted to HTML Tags and Included in the HTML Source Code
<html> <head> <title>Idyll Mountain Internet Employees</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <h2><font color="teal" face="Verdana, sans-serif">Let's meet the Idyll Mountain team:</font></h2> <p><b><font color="maroon" size="4" face="Arial, sans-serif">Liz Bartlett</font></b></p> <p><font face="Arial, sans-serif">As <b>Chief Operations Officer</b>, Liz runs the business aspects of the company, and is also the primary designer for the majority of Idyll Mountain client sites.</font></p> <p><b><font color="maroon" size="4" face="Arial, sans-serif">Kynn Bartlett</font></b></p> <p><font face="Arial, sans-serif">Although rarely seen around the office, <b>Chief Technologist</b> Kynn Bartlett does system administration as well as trailblazing new technologies and leading our accessibility efforts.</font></p> <p><b><font color="maroon" size="4" face="Arial, sans-serif">Maria Moreno</font></b></p> <p><font face="Arial, sans-serif">Our <b>Graphic Designer</b> Maria is responsible for the visual design of most of our Web sites, and also for entries in the <a href="http://www.dogshow.com/">Virtual Dog Show</a>.</font></p> <p><b><font color="maroon" size="4" face="Arial, sans-serif">David Waller and Laura Bishop</font></b></p> <p><font face="Arial, sans-serif"><b>Site Maintenance Specialists</b> David and Laura maintain and develop client Web sites according to the <acronym title="World Wide Web Consortium" lang="en">W3C</acronym>'s <acronym title="HyperText Markup Language" lang="en">HTML</acronym> and <acronym title="Cascading Style Sheets" lang="en">CSS</acronym> specifications.</font></p> </body> </html>
Keep in mind that in the conversion process, some of your styles will be lost in the translation. For example, there's no HTML tag that sets padding, so the new version of this Web page doesn't have the padding found in the original.
Editing CSS in Code View
Dreamweaver MX 2004 provides handy option menus for setting a wide variety of CSS styles, but these menus don't cover everything you can do with style sheets. To get the most out of your CSS styles—or to edit someone else's style sheet—you will eventually need to work with CSS in code view.
In code view, you're working directly with the CSS language, writing the selector, the braces, and the declarations instead of letting Dreamweaver MX 2004 do it for you. The code view for CSS is shown in Figure 10.11.
)
Figure 10.11 Editing a style sheet in code view lets you directly manipulate CSS
rules.
To enter code view, you need to open a style sheet via the Open option on the File menu or create a blank style sheet with the New option from the File menu. Then you'll see the raw CSS codes displayed for you, ready to be edited. Save the file via the Save option on the File menu when you're done with it.
Starting with Dreamweaver MX 2004 Style Sheets
To make it easier to use CSS styles, Dreamweaver MX 2004 comes with a selection of standard style sheets that can be used as the basis of your own style sheets. Using these style sheets is easy: choose New from the File menu and select from the available style sheets. The style sheet you pick will open in code view in Dreamweaver MX 2004, and you can edit and save your modified style sheet.
The list of Dreamweaver MX 2004 style sheets is shown in Table 10.12. Most of these style sheets also define class styles that you can use in your designs along with any custom class styles you create.
Table 10.12 Dreamweaver MX 2004 Style Sheets
|
Style Sheet Name |
Effects |
|
Basic: Arial |
Sets the text (body, th, and td) to Arial font; defines no class styles. |
|
Basic: Times |
Sets the text (body, th, and td) to Times New Roman font; defines no class styles. |
|
Basic: Verdana |
Sets the text (body, th, and td) to Verdana font; defines no class styles. |
|
Colors: Blue |
Selects a blue color scheme; defines no class styles. |
|
Colors: Blue/Gray/Purple |
Selects a blue, gray, and purple color scheme; defines no class styles. |
|
Colors: Blue/White/Yellow |
Selects a blue, white, and yellow color scheme; defines no class styles. |
|
Colors: Red |
Selects a red-on-black color scheme; defines no class styles. |
|
Colors: Tan/Brown |
Selects a tan and brown color scheme; defines no class styles. |
|
Colors: Yellow/Brown |
Selects a yellow and brown color scheme; defines no class styles. |
|
Forms: Accessible |
Sets the text (body, th, td, and form controls) to Arial font, using relative units. |
|
Forms: Arial |
Sets the text (body, th, td, and form controls) to Arial font, using absolute units. |
|
Forms: Times |
Sets the text (body, th, td, and form controls) to Times New Roman font, using absolute units. |
|
Forms: Verdana |
Sets the text (body, th, td, and form controls) to Verdana font, using absolute units. |
|
Full Design: Accessible |
Defines a complete page style in Arial font set using relative units; colors are blue, green, and gray. |
|
Full Design: Arial, Blue/Green/Gray |
Defines a complete page style in Arial font set using absolute units. |
|
Full Design: Georgia, Red/Yellow |
Defines a complete page style in Georgia font set using absolute units. |
|
Full Design: Verdana, Yellow/Green |
Defines a complete page style in Verdana font set using absolute units. |
|
Link Effects |
Creates special effects around links. |
|
Text: Accessible |
Sets the text (body, th, and td) to Times New Roman font, using relative units. |
|
Text: Arial |
Sets the text (body, th, and td) to Arial font, using absolute units. |
|
Text: Times |
Sets the text (body, th, and td) to Times New Roman font, using absolute units. |
|
Text: Verdana |
Sets the text (body, th, and td) to Verdana font, using absolute units. |
The style sheets identified as Accessible are created with relative units and thus are made to conform to the user's font requirements instead of overriding them with absolute font sizes.
The complete list of class styles defined in Dreamweaver MX 2004 style sheets is shown in Table 10.13, as well as the style sheet in which they're available. These classes correspond to the most common types of Web design tasks you'll encounter when using CSS.
Table 10.13 Predefined Class Styles in Dreamweaver MX 2004 Style Sheets
|
Class Style |
Style Sheet |
Purpose |
|
.small |
Forms, Text |
Small text size |
|
.medium |
Text |
Medium text size |
|
.big |
Forms, Text |
Large text size |
|
.xbig |
Text |
Extra-large text size |
|
.bodystyle |
Forms, Text |
The main text content's style |
|
.expanded |
Text |
Text with spaced-out letters |
|
.justified |
Text |
Justified text |
|
.box1 |
Forms, Full, Text |
A box with a 3D border |
|
.box2 |
Forms, Text |
A box with a solid border |
|
.title |
Full |
The title of the page |
|
.subtitle |
Full |
The subtitle of the page |
|
.header |
Full |
The large text at the top of the page |
|
.nav |
Full |
The navigation bar's style |
|
.navLink |
Full |
Each item of the navigation bar |
|
.sidebar |
Full |
A sidebar's style |
|
.sidebarHeader |
Full, |
The header of the sidebar |
|
.sidebarFooter |
Full |
The footer of the sidebar |
|
.footer |
Full, Text |
The page footer's style |
|
.legal |
Full |
Legal notices (the fine print) |
|
.promo |
Full |
Promotional text |
|
.titlebar |
Full |
The title bar |
|
.dingbat |
Full |
Dingbats |
|
a.hidden |
Link Effects |
Invisible links |
|
a.nav |
Link Effects |
Navigation links |
|
a.menu |
Link Effects |
Menu links |
|
a.box |
Link Effects |
Links with borders |
|
input.big |
Full |
A wide input field |
|
input.small |
Full |
A narrow input field |
You can attach multiple style sheets to any HTML document, which means you may want to create several style sheets and combine them. To make a quick and easy design, you could create and save style sheets based on the Text: Times and the Color: Red sheets. You can see how this looks in Figure 10.12; it took less than a minute to create these styles.
)
Figure 10.12 Using the Dreamweaver MX 2004 style sheet Text: Times and Color:
Red as a base lets you start quickly.
Alternatively, a Full Design style sheet can be used as the basis for a more complex design. Figure 10.13 shows what a difference the style sheet can make on the appearance of a page.
)
Figure 10.13 Choosing a different starting style sheet, such as Full Design:
Georgia, produces a different effect with the same HTML.
Writing Advanced CSS
To use specialized CSS properties—which aren't covered in the CSS styles options in Dreamweaver MX 2004—you'll need to add them manually. Many of these properties are rather obscure and not often needed; for example, the cue-after property defines a sound to be played by an audio browser. The complete list of CSS properties is available via the Help panel in the O'Reilly CSS Reference.
Importance, Order, and the Cascade
As mentioned earlier in this chapter, the C in CSS stands for "cascading," and is a reference to the cascade. The cascade is the method for combining several styles, which may have conflicting notions as to the value of a CSS property. For example, three rules might specify the color of the text, and all three might conceivably be applicable. The cascade allows the browser to determine the "winner" for those parts of the styles that conflict; if there is no conflict, the styles can be combined and applied.
The general principle in the cascade is that the most specific style wins. Thus, if you have one style about body and another about h1, the h1 is going to be more specific, so the headline will follow the second style in the case of a conflict. A class style is considered more specific than a redefined HTML element, and an ID selector—one of the types of CSS selectors—is more specific than a class selector.
If two conflicting styles are equally specific—such as two rules about h1—the next rule is that the style declared later in the style sheet—the "newer" style—takes precedence. In our hypothetical case, both h1 styles would be applied to all first-level headings, and if there were conflicting styles—one setting the color blue and another setting it red—the second style would prevail for that property.
For this reason, order can be crucial for creating and perfecting CSS style sheets. Dreamweaver MX 2004 doesn't automatically move styles around for you, but in code view you can cut and paste styles to put them in the preferred order.
The cascade order can also be changed by the use of a special keyword, called !important. That's an exclamation point before the word important. Although this may appear to mean "not important" in the eyes of most programmers, in the CSS language it means "very important." The !important keyword placed after a property declaration jumps that declaration to the very front of the priority order. If there's a conflict, any style with !important after it will beat any style without it.
In Listing 10.4, you can see an example of a style sheet that was created to illustrate the cascade in action; notice how you can change that order by using !important.
Listing 10.4 The Cascade Will Be Used to Determine the Effects of These Conflicting Styles
p {
color: white !important;
}
p {
color: violet;
}
p {
background-color: blue;
}
p {
background-color: black;
}
.person {
background-color: red; color: green;
}
In evaluating this style sheet, the browser gives highest priority to any !important styles. The first p style would ordinarily be superceded by the second p style on the issue of text color, but the first style has the magic keyword !important—so the color of the text is white.
The third p style loses out to the later-defined fourth p style for the background-color property, so the background color is black. For HTML tags that are set class="person", the .person style is more specific than the p tags, so the background-color will be red—except that the first p style is !important, so the text color will be white.
Figure 10.14 is a screenshot showing how the browsers use this logic to get the results described.
){kind=small}
Figure 10.14 The cascade order was used to determine the colors of the text and
background.
CSS Comments
Nearly every computer language invented allows for the developer to insert comments, and CSS is no exception. A comment is embedded in the code and ignored by the browsers, but is available to the designer to read and edit. To create a comment in a style sheet, simply add a slash and an asterisk (/*) at the start of the comment, and end it with an asterisk and a slash (*/). Everything between the markers will be ignored by the browser.
Comments are most often used to provide internal documentation so that other designers who use your style sheet can understand it. They're also useful for avoiding those head-scratching moments when you ask yourself, "What was I thinking?" You can also use comments to prevent certain rules or properties from being applied, without deleting them entirely; this is useful for testing purposes.
As shown in Listing 10.5, comments can also be used for copyright and author information. In this listing, each class style is described; you don't have to do this, but it's good practice.
Listing 10.5 Comments Make This Style Sheet Easier to Read and Understand
/*idyllmtn.css
Style Sheet for the Idyll Mountain Internet staff page
Copyright (c) 2002 by Kynn Bartlett <kynn@cssin24hours.com>
*/
body {
/*Default font for the page*/
font-family: Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
/*Make the headers more distinct*/
font-family: Verdana, sans-serif;
color: teal;
}
p {
/*This will add padding to all paragraphs...*/
padding-left: 3em;
}
.person {
/*...except for those where class="person"*/
padding-left: 0em;
font-size: large;
font-weight: bold;
color: maroon;
}
.job {
/*Make the job title stand out*/
font-weight: bold;
}
Inline Style Attributes
You can attach a style sheet to an HTML document with the <link> tag, or you can embed it within the <style> element. A third way to apply styles to HTML is by using inline style elements. An inline style element enables you to apply a style directly to a section of HTML without specifying it in the style sheet; this can be useful for quickly adding a style that appears in only one place on your site.
As shown in Listing 10.6, you set the attribute style to the declaration portion of a style rule. There's no need for a selector, because the selection is the content of the tag with the style attribute.
Listing 10.6 A Snippet of HTML Code That Uses an Inline Style Attribute
... <p>Although <span style="color: red; font-weight: bold;"> rarely seen around the office</span>, <span class="job">Chief Technologist</span> Kynn Bartlett does system administration as well as trailblazing new technologies and leading our accessibility efforts.</p> ...
Inline styles are much less useful than attached or embedded styles, and for that reason, Dreamweaver MX 2004 doesn't support them. To add an inline style in Dreamweaver MX 2004, you need to edit the source code and add the attribute. You might need to use inline styles if you want to apply a specific style only once, but in general, it is easier to create a class style and store it in an attached or embedded style sheet.
Media-Specific Styles
The CSS specification enables you to designate style sheets that are used only by specific media types, which are broad categories of output devices. The default media type is screen, which assumes that your browser will be displaying the Web page on a monitor. The complete list of CSS media types is shown in Table 10.14.
Table 10.14 Media Types Defined by CSS
|
Media Type |
Description |
|
aural |
Pages read out loud by synthesized voice; for example, screenreaders for the blind. |
|
braille |
Content represented by raised dot characters on Braille terminals for blind users. |
|
emboss |
Pages printed out as raised dots in Braille, on thick paper. |
|
handheld |
Content displayed on a limited-size handheld screen. |
|
|
Pages printed out on paper. |
|
projection |
Content displayed as slides or transparencies projected on a large screen. |
|
screen |
Pages displayed on a color monitor. |
|
tty |
Content printed on teletype devices or other media with limited display capabilities, which print characters only of a fixed size and type. |
|
tv |
Pages displayed on a television screen, possibly taking advantage of sound capabilities but with limited interaction. |
To create a style sheet for a specific media type, such as print, create a new style sheet based on your original and change the style rules that don't apply to the new output device. For example, many printers are black and white, so color might not be as useful. In Listing 10.7, the print.css style sheet has replaced color properties with other style effects.
Listing 10.7 /*print.css
Print Style Sheet for the Idyll Mountain Internet staff page
Copyright (c) 2002 by Kynn Bartlett <kynn@cssin24hours.com>
*/
body {
font-family: Arial, sans-serif;
font-size: 12pt;
/*An absolute font size has been set*/
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, sans-serif;
text-decoration: underline;
/*Headers are underlined, and are not teal*/
}
p {
padding-left: 3em;
}
.person {
padding-left: 0em;
font-size: large;
font-weight: bold;
border: 2px solid black;
/*Names are in boxes, and are not maroon*/
}
.job {
font-weight: bold;
}
To attach both this style sheet and the normal style sheet to the same HTML file—but have them apply to different media types—save them as different names and attach each to the HTML document. Then open the HTML document in code view and change the <link> tag. Add the media attribute to each <link>, as shown in Listing 10.8.
Listing 10.8 The Head of an HTML File That Attaches Two Style Sheets—One for Screen and One for Print
... <head> <title>Idyll Mountain Internet Employees</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="idyllmtn.css" rel="stylesheet" type="text/css" media="screen"> <link href="print.css" rel="stylesheet" type="text/css" media="print"> </head> ...
When you load this Web page in your browser, one style will be displayed on the screen and a second will appear on your hard copy when you click Print.
Design Time Style Sheets
Dreamweaver MX 2004 enables you to specify style sheets that are displayed only while you are editing and that aren't included in the Web page when it's saved or previewed. These are called design time style sheets and are accessed through the CSS menu.
You create a design time style sheet the same way you create any other style sheet; however, because this is intended only for your eyes and no one else's, you don't need to worry about making it look pretty. The purpose is to make certain things stand out while you're editing, as shown by the styles in Listing 10.9.
Listing 10.9 This Style Sheet Highlights Acronyms, Abbreviations, Headers, and Two Class Styles
/*while-editing.css*/
abbr, acronym { background-color: silver; }
.person {
background-color: #FFCCFF;
}
.job {
background-color: #66FF66;
}
h1, h2, h3, h4, h5, h6 {
border: thin dotted teal;
}
After you've saved your style sheet, you can apply it to your editing environment by choosing Design Time from the CSS menu. Add the style sheet by clicking the plus sign and browsing to find it. Dreamweaver MX 2004 will now display the HTML page using the styles you've defined in your design time style sheet.
Remember that these styles will not be shown in your browser, even when you preview the page; they are used by Dreamweaver MX 2004 only while you're in design view. Design time style sheets effectively enable you to extend Dreamweaver MX 2004's display capabilities to highlight whatever you like while editing!
Summary
CSS, if used correctly, can greatly extend your ability to create attractive Web designs. Current browsers have good support for CSS standards—a definite improvement over the older versions. CSS is also of benefit to users with disabilities who may find presentational HTML hard to display.
Dreamweaver MX 2004 lets you define and edit styles through a menu interface, making it easy to apply styles to text, create boxes, or even lay out a page. You can create a custom class style, redefine the appearance of an HTML tag, or employ CSS selectors for more precise definition. Dreamweaver MX 2004's code view for CSS lets you utilize the full power of CSS in your designs.
With this latest release of Dreamweaver 2004, you can also edit your styles using the new Tag Inspector, which is featured in Chapter 1, "What's New in Dreamweaver MX 2004." Also in Chapter 1, I discuss some of the vast improvements when it comes to CSS-P Tableless layouts.