GDT 150 Design for the Internet: Fall 2002

November 13

Cascading Style Sheets Revisited

Review Notes from September 11, Formatting text with CSS for basic information.

External Style Sheets

Classes (Custom Styles)

Classes can be used two ways: to create special instances of a styled element, ie. one paragraph that is a different color from every other paragraph; and to specially style a short span of text (although there are tags that already do that - <b> and <i>). Classes are generic and can be applied to any element. They override any predefined attributes for the element to which they are applied. For example, paragraphs are colored black by the stylesheet, you have a class (.red) with color: red specified. Applying the class "red" to a paragraph will override the black color and make it red.

The example in the book is ill-conceived. Rather than creating a special boldstyle class, it would be preferable to redefine the bold tag to use a different color. This would degrade better in browsers that don't support CSS, because the bold tag would at least bold the text. With the method suggested in the book, those viewers would see no difference between the boldstyle and the rest of the text.

Link Styles

Applying CSS to links uses special selectors called pseudoclasses. Pseudoclasses are special instances of a particular element. Links have 4 pseudoclasses describing four different states: link, visited, hover, and active. Syntax for pseudoclass selectors is a:link { ... }. When using these pseudoclasses, it is extremely important to apply them in the order they are listed in the CSS Selector menu in the DW New CSS Style dialog box: link, visited, hover, active. If they are not specified in that exact order, they won't work properly because each selector is equally specific, which means that order determines which is applied. For example, a link's state can be both visited and hover at the same time (the user moves their cursor over a visited link). Both these states have equal weight in the stylesheet, so unless the hover rule is specified after the visited rule, the visited rule will override the hover rule—rules that appear later in the stylesheet override rules of equal specificity appearing earlier.

Again, the book has a poor example. I recommend never (within a professional design) applying font-family and font-size to links, especially when you're using pseduoclasses. This makes it really easy to end up with weird font changes in the various states of a link. Instead, allow the parent element to determine the font: links in paragraphs should have the same font as the paragraph, getting just a color change and an underline, etc.

Contextual Selectors (Tag Combinations)

CSS allows you to select and style elements that appear within other elements (within the context of another element). For example, you can apply a particular set of styles to all paragraphs, and then apply a different set of styles to all paragraphs nested inside of a table cell.

Syntax: td p { ... } selects all paragraphs within table cells.

This method is particularly powerful when combined with classes. Let's say you want to have all the links in your navigation bar to be bold and orange, and the links within your body text to be regular and green. For simplicity's sake, let's say your layout is a table with one row and two columns; the left column holds the navigation and the right, the content.

  1. Create a custom style called ".navigation" in the CSS Styles panel. Set weight to bold.
  2. Redefine the link tag, a and set the color to green
  3. Apply the navigation class to the left column
  4. Add a CSS selector rule to the stylesheet: td.navigation a and specify color: orange

As long as you don't put the navigation links within a paragraph, they'll be bold and orange and your body text links will be green and regular weight.

Inheritance

Inheritance refers to the way in which different rules interact with one another: how conflicting styles resolve, how styles are applied to nested elements, etc. In general, styles that are specified closer to an element override those specified farther away. Styles tend to be applied in the following order:

  1. External styles
  2. Internal styles
  3. Inline styles applied to elements
  4. HTML font information
  5. Inline styles applied to span's

The style applied closest to the element will override the others.

More specific rules override less specific rules. Classes override tag redefinitions—they are more specific. Contextual selectors are more specific than regular selectors.

Order matters: a rule apearing later in the stylesheet with override a rule of equal specificity appearing earlier in the stylesheet. For example, if you define two rules for p, the first specifying font-size: 10px; and the second, font-size: 20px;, all your paragraph text will be 20px. A slightly more complicated example: Using these rules:

p b {
	color: green;
	}
td b {
	color: red;
	}

And this code:

<table>
	<tr>
		<td><p>some <b>text</b></p></td>
	</tr>
</table>

"text" should be red, because the two rules (contextual selectors) are equally specific, so the one appearing later will apply, even though the first appears closer to the way the code is written.