There is a lot to learn about CSS, and it can take a long time to learn it well. You can't become a CSS expert overnight. Even so, learning CSS is an essential part of being a web developer, at least if you want your web content to look attractive. Web documents without CSS tend to look boring. But there's another reason we're going to learn CSS: CSS impacts accessibility. CSS is powerful enough to make a document more accessible. It's also powerful enough to ruin a document's accessibility. We'll talk about ways to use CSS wisely.

Cascading Style Sheets can be powerful design tools in the hands of gifted graphic artists. There are many beautiful CSS-based designs on the web these days. One of the best places to find a large collection of them is at http://www.csszengarden.com/. This site was created as a showcase for the power of CSS as a design tool. The idea behind the site is simple: create one HTML page and allow other people to create styles for it. The home page of the CSS Zen Garden looks like this:

When you turn off the CSS styles, you'll see the underlying HTML structure in the document. To turn off CSS styles using the Web Developer Toolbar in Firefox, use the keyboard shortcut Shift+Ctrl+S or use the menu system: CSS > Disable Styles > All Styles, as mentioned previously. You can also use the Opera browser (www.opera.com), which allows you to turn off styles quickly by clicking on the "User Mode" icon. Or you can use the link provided in the text on the web page itself. The paragraph right below the CSS Zen Garden site title, on the left of the screen near the lily pad, contains a link to view the sample HTML file. Without styles, the page looks like this:

You can toggle between the plain HTML and the styles view to see the dramatic effect that the styles have on this otherwise boring web page.

Many designers and artists have created their own graphics and styles for this web page. You can view their efforts by clicking on the links under the heading which says "Select a design." Here are a few of the many designs:

Believe it or not, all of these designs contain the exact same HTML. The styles have changed, but the HTML hasn't changed at all. If you don't believe me, look for the link that says "Download the sample HTML file and CSS file" and click on the HTML file. It may take you a moment to find that link, because it's likely in an entirely different place this time, due to the different styles that have been applied. If you compare the HTML file here to the one on the previous page you'll find that it's exactly the same.

Keep going through the list of designs. Explore this site. Find designs you really like. Find designs you don't like. There is a wide enough variety here to keep you busy for hours.

Of course, in order to create sites of this caliber, you have to know a thing or two about graphic design. These people are artists. They're professionals. They know what they're doing, and they're showing off. If you have the artistic skills to do this, great! If you don't, that's ok too. At the very least I want you to get a feel for the potential of CSS.

Designing with CSS is fun, but it can also be challenging. It helps to have tools that make the design—and debugging—process easier. The Web Developer Toolbar, by Chris Pederick, is a good tool to have on hand. The toolbar is an add-on for the Firefox web browser (it won't work in Internet Explorer). Some of you may already have it installed. If so, skip to the next section.

To install the Web Developer Toolbar:

1. First install the Firefox browser, if you haven't already, available at www.mozilla.com.
2. Start the Firefox browser and go to https://addons.mozilla.org/firefox/60/
3. Click on "Install now."
4. You should see a window pop up.
   Click on "install now" in that window.
5. Close the popup window.
6. Restart Firefox

Note: You can install other extensions for the Firefox browser through this same web site, or by going to the Firefox menu and selecting Tools > Extensions, then clicking on "Get more extensions."

Turning Off Styles

After restarting Firefox, the toolbar should appear. This is a powerful tool. I won't get into all the details in this topic, but one of the features that is useful to this topic is the ability to quickly turn off styles. You can do this with the keyboard shortcut Shift+Ctrl+S, or by going to CSS > Disable Styles > All Styles. Turning off styles allows you to compare the document structure in the underlying XHTML to the visual appearance created by the styles.

Editing Styles in Real Time

This feature can save you time by allowing you to experiment with styles in real time. The changes you make show up immediately in exactly the way the browser renders them.

This is important because most style authoring tools, including Dreamweaver, have rather weak support for styles. Some of the styles look right in Dreamweaver, but many of them look very wrong. You have to check your styles in the browser to see how they really appear.

To edit styles in real time, go to CSS > Edit CSS. This opens up an editing bar on the bottom of the browser. You can type directly into this area and see the effects.

Viewing the IDs and Classes of Elements in the Web Page

Sometimes it helps to see where the classes and IDs are in a page (these are important for assigning styles). You can do this quickly by choosing Information > Display ID and Class Details from the toolbar menu.

Other

The toolbar can do many other things as well. Take some time to experiment with the toolbars functions.

You can view the CSS (or in other words, the style definitions) of any site on the web. An easy way to do this is with the Web Developers Toolbar. Go to CSS > View CSS or CSS > Edit CSS. Both of these methods will show you the styles for that particular page.

Note: The "Edit CSS" option has the additional advantage of allowing you to edit the styles and see how your edits affect the design. In case your curious: you are the only one who can see your edits. When you play around with the styles, it does not affect the real web site. When you refresh the page, all of your edits disappear.

If you've never seen styles before, you're likely to be a bit confused when you look at them. It looks like strange computer code, because that's what it is, but you'll understand it a little better by the time that we're done. I'll give you a quick example that will hopefully help demystify things a little bit. Here is an example of a simple style:

body {
  background-color: white;
  color: black;
  margin: 0;
  }  

The above style says that the background color for the body of the HTML will be white, the text color will be black, and there will be no margins around the edge of the page, meaning that the text will go all the way to the edge of the screen in the browser. The braces, or "curly braces" as they are sometimes called, { } are used in CSS in a way that is similar to the "pointy brackets" in HTML. You have an opening curly brace { and a closing curly brace }. The word before the opening curly brace — "body" in this case — indicates where to apply the style: to the <body> tag in this example. If we want the style to apply to something else, we have to change the word before the first curly bracket. In the example below, the same style is applied to the <p> tag, rather than the <body> tag:

p {
  background-color: white;
  color: black;
  margin: 0;
  }  

This means that every paragraph will have a white background, black text, and no margin. We could change things up a bit, by applying different styles to all of the level 1 headings, like this:

h1 {
  background-color: red;
  color: white;
  margin: 10px;
  padding: 10px;
  font-size: 200%;
  font-weight: bold;
  }  

The above style will give all level 1 headings a red background, white text, and a margin of 10 pixels. In addition, the text will have a padding of 10 pixels around it, and the font will appear twice as large as normal text, and it will be bold. It will look like this:

Note: In case you didn't know, pixels are "The basic unit of the composition of an image on a television screen, computer monitor, or similar display" (American Heritage Dictionary, 4th edition). There are other units of measurement for use in CSS too, such as inches, centimeters, percentage, and even units you probably haven't heard of before, such as em. Pixels is usually NOT the preferred unit of measurement. Usually em and % are preferred. I'll discuss this in more detail later.

Now you've seen some style definitions, and you've seen how they can look in a browser. Of course we've only scratched the surface. Styles can do a lot more than these few things. We'll get into those details as we go along. First, though, it's helpful to know how styles work.

Styles are just bits of typed text saved as a file with a .css extension at the end (e.g. styles.css). You can create styles by opening up a simple text editor, such as Notepad, and typing the styles directly into the text editor. You can also use the WYSIWYG (What You See Is What You Get) tools in Dreamweaver or other tools to create styles.

There are three main ways to include styles in your documents:

1. Link to an an "external style sheet"
2. Create styles in the <head> of an HTML document
3. Create "inline styles" inside of elements within the <body> of the HTML file (for example, in <p> or <h1> or <ul>, etc.)

External style sheets are defined separately from the HTML code, in a separate file. The browser takes the HTML and the CSS, combines them, interprets them, then shows us the final result. For example, if you have three web pages, all three of these pages can refer to the same external style sheet.

The great advantage to this type of arrangement is that you don't have to re-type all of your styles if you want the same styles to appear on multiple pages. All you have to do is create a link in your HTML document to your style sheet.

Ways of Linking to External Style Sheets

There is more than one way to link to external style sheets, but in general these ways fit under two categories:

1. Using the <link> element
2. Using one of several @import methods with the <style> element

The <link> method:

A link to a style sheet using a <link> element would look something like this:

<link type="text/css" rel="stylesheet" href="styles.css" />

This line of code would be placed somewhere between the opening and closing <head> elements. It does not matter if you type it before or after the <title> element.

The @import methods:

The @import methods, using the <style> element, would also be placed between the opening and closing <head> elements, and would look something like this:

<style type="text/css">
  <!--
    @import url(styles.css);
  -->
</style>

Note: The opening and closing comment tags <!-- --> are optional, but they help to make the document more compatible with older browsers which cannot interpret styles at all. Older browsers will ignore the opening and closing <style> tags, but would not ignore the content between them, so we comment it out. Modern browsers can interpret the styles whether the comment tags are present or not.

There is more than one @import method to import style sheets. Both of the following examples will also import the styles into the HTML document, despite their minor syntax differences from the first example above.

@import with parentheses and quotation marks:

<style type="text/css">
  <!--
    @import url("styles.css");
  -->
</style>

@import without parentheses, but with quotation marks:

<style type="text/css">
  <!--
    @import "styles.css";
  -->
</style>

Which Method is Best?

All of the methods mentioned above are acceptable, but browser compatibility is a concern. Modern browsers are able to read all of the above methods, but older browsers cannot. In the case of Netscape 4, for example, the browser understands the <link> method, but does not understand the @import methods. If you want styles to show up in Netscape 4, you have to use the <link> method. However, the problem with Netscape 4 is that it supports only a few style properties. Sometimes this can lead to pages that look horrible in Netscape 4 because only some of your styles are displaying properly while others are being completely ignored, as shown in the partial screen shot below.

In these cases, it would be better if all of the styles failed, because you would at least be able to see the plain HTML version of the page, even if it's not as snazzy as the styled version. One way to ensure that all of the styles fail is to use one of the @import methods of linking to the style sheet. The end result will be a web page that "looks right" in all of the modern browsers, and a page that is at least still readable in older browsers such as Netscape 4, even though it looks plain and boring.

In general, I recommend using the @import methods because it's usually too much of a bother—or else completely impossible—to make styles work properly in Netscape 4.x and other older browsers. Which @import method is best? It doesn't really matter, though I tend to prefer the one with parentheses but no quotation marks.

Sometimes you have styles that you want to apply to only one page. In these cases it makes sense to write the styles in the <head> of that document, rather than write them in an external style sheet, to avoid bogging down the external style sheet with too much clutter that doesn't apply to the majority of the pages. To create styles in the document <head>, just type the styles in between the opening and closing <style> elements, like this:

<style type="text/css">
  <!--
      body {
      background-color: blue;
      color: white;
      }

   p  {
      margin: 2em;
      }
  -->
  </style> 

Question: Can you link to an external style sheet and create page-specific styles in the document <head>?

Answer: Yes. In fact, this is a very common scenario. You usually define most of your styles in the external style sheet, then define page-specific styles in the document <head>. The style complete declaration would look like this:

<style type="text/css">
  <!--
    @import url(styles.css);
    
    body {
      background-color: blue;
      color: white;
      }

   p  {
      margin: 2em;
      }
  -->
  </style> 

Question: What if your external style sheet already defines the style that you want to change? For example, what if your external style sheet sets a blue background color for all paragraphs, but on one of your pages you want to define a page-specific style so that all the paragraphs have a white background?

Answer: Your page-specific styles would override your external style sheet, as long as the page-specific styles are defined after the link to the external style sheet, as in the example shown above. The last definition of a style takes precedence over all other definitions.

The last method for creating styles involves defining the style in the tags in the <body> of the document. Inline styles override all previous style declarations in both the external style sheet and the document <head>. Here is an example:

<p style="background-color: red; color: white;">Here is a paragraph.</p> 

This method is easy to understand, because you're applying the style directly to the item that you want styled. However, you should almost always avoid this method. It's "legal," but it usually creates sloppy code that's hard to manage, especially in large sites. I'm explaining it here for the sake of completeness. Why is it hard to manage inline styles? Well, imagine that you create a style for one paragraph, then later on you realize that you want the same style on another paragraph. Then another. And another. You would have to rewrite the style four times. Now imagine that you changed your mind and wanted to change the background color and font color of that style. You would have to change it in four places instead of one. It's better to type the style only once, then reference it in the appropriate location

They call them cascading style sheets because you can have multiple layers of styles, with the last styles overriding the first styles. It is somewhat like a multi-level ("cascading") waterfall or a series of steps, hence the word "cascading."

The last style declaration wins. In other words, if you declare a style in your external style sheet (such as setting the background color of all paragraphs to blue), then re-declare the style in the document <head> (setting the background color to green), then again in the inline tags (setting the background color to purple), the paragraphs will be purple. However, users can override all of these with a custom style sheets of their own.

The user is always right

No matter how many times you declare a style, the user can undo your style. The user is the king (or queen) of the world as far as styles are concerned. Users can create their own style sheets with their own preferences. Some users with low vision, for example, require all web pages to appear in high contrast colors and enlarged font. They might set the background color to black, the font size to 250%, and the font color to a light yellow. This is a relatively common combination of styles for people with very low vision.

The three main methods for applying styles are as follows:

1. Apply to all instances of an element
2. Apply to all elements with a certain id
3. Apply to all elements with a certain class

Apply to all instances of an element

This is the method with the broadest application, because it affects all instances of the given element. For example, you could assign a certain style to all paragraphs, all links, all unordered lists, or any other element.

Apply to all elements with a certain id

This method applies the style to only one item on the page, because each id must be unique, and only one item per page can have that id. For example, if you have a paragraph with an id of "unique" (<p id="unique">), you could assign styles just to that paragraph.

Apply to all elements with a certain class

This method can be used to apply the same style to an unlimited number of items on the page, by assigning the same class to the items that you want to receive the style. For example, you might have two paragraphs that you want to assign a certain style two. You can do this by giving them the same class.

To assign a style to all instances of a given element, just write the name of the tag, then type the style attributes inside of the curly brackets. Remember to put semi-colons at the end of each style declaration.

Oftentimes it is helpful to assign styles to the <body> element. These styles will apply to all of the content in the document.

body {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  }  

It is possible to override the <body> styles by assigning styles to other elements that appear within the <body> of the document. Here is an example of a style that will apply to all links (e.g. all instances of the <a> tag):

a {
  background-color: blue;
  color: white;
  }  

Below are examples of styles applied to headings:

h1 {
  color:#990000;
  font-size:1.7em;
  }  

h2 {
  color:#990000;
  font-size:1.4em;
  border-top:#990000 solid 1px;
  }  

A simple document with these styles would look something like this:

ID attributes can be assigned to any tag. The example below shows a <p> tag and an <a> tag with id attributes:

<p id="first_paragraph">Here is my paragraph. It has a link to 
<a href="http://www.gmu.edu" id="gmu">George Mason University.</a></p>

The name of the id is completely up to you. It doesn't matter what you call the id. You could call it "horseradish" or "red_balloon_number_5" if you like. Usually it makes sense to choose names that make sense in the context of the page, though. When naming id attributes, you should observe these rules:

• IDs must consist only of lower case letters
• IDs must start with a letter, not a number (you can use numbers, but not as the first character)
• IDs must NOT have spaces

In your style sheet, you can create a style for a tag with an id by using the pound sign ( # ) and the name of the id, like this:

#first_paragraph { 
  background-color: white;
  color: black;
  }

#gmu {
  background-color: green;
  color: yellow;
  }

I will re-emphasize that you can have only one id per page with any given name. You can only have one tag with the id of "first_paragraph" and only one tag with the id of "gmu".

Question: If you can only have one item with any given id per page, is the id method very useful at all?

Answer: Actually, yes, it is very useful. Most styles on most web sites can be applied either directly to tags or to items with specific id attributes. This is because you can set the global styles (e.g. for all paragraphs) using styles applied to tags and as far as the rest of the items are concerned, most designs have only one of each item. For example, there is usually only one main menu in a web site design (often a list of links across the top of the page). There is usually only one site logo (often in the upper left hand corner). There is usually only one main content area, one footer (with links to copyright info or contact info), and perhaps one side menu. Given the fact that there is only one of each, it makes sense to use the id technique in these cases.

If you need to apply the same style in multiple places throughout a web page, it makes sense to use the class attribute. Here are two paragraphs with a class attribute:

<p class="highlight">This paragraph has a highlight background color.</p> 
<p class="highlight">This paragraph also has a highlight background color.</p> 
<p>This paragraph does NOT have a highlight background color.</p> 

The CSS file uses a period ( . ) to reference items with class attributes, as shown below:

.highlight {
  background-color: yellow;
  }

There are a couple of generic HTML tags called <div> and <span> which have no real semantic meaning. They're not paragraphs or headings or list items or table cells or links, or any other meaningful tag like the ones we've talked about up until now. The <div> and <span> tags don't mean anything from a semantic or grammatical point of view. Their primary purpose is to allow web developers to apply styles to areas within the web page that are not easily defined by other kinds of tags.

Note: By the way, if you're wondering what "semantic" means, here's one definition: "Of or relating to meaning, especially meaning in language" (from the American Heritage Dictionary). Headings, paragraphs, list items and all those other things provide meaning to text. The <div> and <span> elements do not.

The <div> Element

Sometimes you want to apply a style to the semantic elements (headings, paragraphs, etc), but sometimes it makes more sense to apply styles to a chunk of text that doesn't really fit into a semantic unit. Maybe you want to apply a style to four paragraphs, or to three words. In these cases it sometimes makes sense to use a unit that can successfully group the items, but which doesn't apply any semantic meaning. In the example screenshot below, a border was applied around two paragraphs, but not around the others. The border groups the paragraphs visually.

The XHTML code looks like this (with the paragraph text shortened):

<p>Paragraph here, etc., etc.</p>
<div id="border_here">
  <p>Paragraph here, etc. etc.</p>  
  <p>Paragraph here, etc. etc.</p>
</div>
<p>Paragraph here, etc. etc.</p>

The CSS code looks like this:

#border_here {
  border: red solid 5px;
  padding: 1em;
  }

To give another example, you might want to create a visual column of text. A column doesn't really have semantic meaning. Columns are just ways of formatting the text. If you have a two-column article and convert it to one column, you haven't lost any meaning. You've only lost the visual formatting. You can create column-like effects by grouping the text using <div> tags and then applying the appropriate styles.

The <span> Element

The <span> element allows you to apply styles to an inline section of code.

<p>This is a paragraph with <span class="highlight">a highlighted phrase</span> inside it.</p> 

Notice that there is an opening <span> element and a closing </span> element. The "highlight" class will be applied to the text in between the opening and closing tags.

Block vs. Inline

At this point it would be good to revisit the idea of block level content versus inline content.

• For generic block level elements, use <div>
• For generic inline elements, use <span>

The <div> tag is a block level tag. That means that anything within the <div> tag takes up a rectangular "block" of visual space. Without any extra styles, this block of space extends all the way across the browser window. For the sake of illustration, I've created a <div> tag below and applied a background color of purple so that you can see what it looks like.

Using styles, I can make this block of text as wide or high as I like. I can change the color, add a border, and do all kinds of fancy things with it. But the main point for now is that a <div> is a rectangle that starts on a new line, meaning that you can't insert a <div> in the middle of a paragraph or any other semantic block level tag.

The <span> tag, on the other hand, is an inline tag. Inline tags can be added in the middle of block level tags. They can even be added in the middle of other inline tags. They don't start on a new line. They don't change the flow of the text. Other inline tags include links, <strong> and <em>.

In this paragraph, I've created a span around these words. Like the <div> example above, the <span> is styled to give the text a purple background. the difference is that the <span> is within the paragraph, and does not cause the text to start on a new line.

Reminder: Neither the <div> nor the <span> which I created give the text any additional meaning. They only change the color of the background. The <div> and <span> elements can be useful under some circumstances to enhance visual appeal. They're not good for conveying extra meaning. A blind person using a screen reader will not know that the background color has changed. In fact, screen readers ignore styles almost completely. (There are a few exceptions to this, but a discussion of those exceptions would take us beyond the scope of this lesson.) If you use styles or colors to try to convey meaning (for example, by saying "all the green words are important"), you are probably going to make the content inaccessible to a person using a screen reader, since they can't see the styles.

Question: Which methods can you use to apply styles to <div> and <span> elements?

Answer: You can use any of the methods already discussed. You can apply a style to all <div> or <span> tags, or you can apply a style to only one <div> or <span> tag using the id attribute, or you can apply a style to multiple tags, including <div> and <span>, using the class attribute. All methods are ok.

You can apply style declarations to more than one element:

h1, h2, h3, .side_items, #top_paragraph
  {
  color: red;
  }

In the above example, all of the items specified will have red text. Notice that there are commas between all of the items that will receive the style, and that there is no comma at the end of the list. Also notice that all three methods of applying styles are represented in this example, the first three items are tags, the next item references a class, and the next item references an id. It's ok to mix and match them like this.

In a related idea, you can specify more than one class for any given tag:

<p class="highlight style2 style3">Here is the paragraph, with three classes applied.</p> 

Notice that the class attributes are separated by spaces, not commas. I don't know why they use commas for one technique and spaces for another, but that's just the way it is. Sorry.

You cannot apply multiple id attributes to anything:

WRONG:

<p id="id1 id2 id3">This is wrong.</p> 

But you can apply both a class and an id:

OK:

<p id="id1" class="class1">This is ok.</p> 

Or even an id plus multiple class attributes:

OK:

<p id="id1" class="class1 class2 class3">This is ok.</p> 

If you apply multiple styles to a tag, remember that the last style declared is the one that has precedence in cases where more than one style reference the same property. For example, if all three of the styles above deal with font color, the font color in class3 will be implemented.

Sometimes you need to be very specific when assigning styles. Here is an example:

#main_content #section1 h1.highlight {
  background-color: orange;
  }

If you read this style in a sort of backwards way, the style (background-color: orange) will apply to the item with a class of highlight (class="highlight"), which is inside of the heading level 1 ( <h1> ), which is inside of an item with an id of section1 (id="section1"), which is inside of an item with an id of main_content (id="main_content").

Note: Notice that there is no space between the h1 and the .highlight, but there are spaces between the references to id attributes. Why? I don't know. Just because. That's the way CSS works.

Here is another example:

p a img.special {
  border: none;
  }

This one says that all images with the class of special (class="special") which happen to be inside of links ( <a> ) inside of paragraphs ( <p> ) will have no border.

And here is another example:

.dark_background strong {
  color: white;
  }

This one says that all <strong> tags which happen to be in items with a class of dark_background (class="dark_background") will have white text.

In the examples I've shown so far, I've typed out the names of colors, such as black, white, green, red, blue, etc. What if you want a non-standard color, such as "puce" or "dark bluish green" or a "really light gray with a hint of purple"? How do you specify those colors? The answer is that you have to use a hexadecimal code for the color, or use the RGB value. There are hexadecimal and RGB codes even for common colors such as black (hexadecimal code: #000000; RGB value: 0 0 0) or white (hexadecimal code: #ffffff; RGB value: 255 255 255), but hexadecimal codes are most useful for less common hues.

Note: RGB codes consist of the values of Red, Green, and Blue, respectively, on a scale of 0 to 255. Hexadecimal codes are just a bunch of strange combinations of numbers and letters invented by mathematicians with nothing better to do. You can quote me on that.

Dreamweaver can help you find the hexadecimal code for pretty much any color that you need, but not the RGB value, so I'm going to stick to hexadecimal codes here. When you create styles in the code view in Dreamweaver, a box of color options pops up to allow you to choose the color you're looking for. The box pops up as soon as you type the colon when defining color, background-color, or other color-related attributes.

You can then use the "eyedropper" tool to select the color you like. As soon as you select the color, the hexadecimal value of that color appears in the text.

If you click on the "color wheel" icon , you will be given even more color options to choose from.

See the following resources:

• http://www.w3schools.com/css/css_text.asp
• http://www.w3schools.com/css/css_font.asp

When setting the size of things, there are many options in CSS, including inches, centimeters, pixels, ems, and other units. The most commonly-used are em, %, and px (pixels).

An "em" is defined as "the width of a square or nearly square piece of type, used as a unit of measure for matter set in that size of type" (American Heritage Dictionary, 4th edition). The definition of "em" is in some ways even more confusing than the term itself, but I've also heard it explained as "the size of the letter M in a particular font." I'm not sure if the latter definition is entirely accurate, but the key point to remember is that "ems" are relative to the size of the font, whereas units such as pixels or inches or centimeters are not.

NOTE: I did not finish writing all of the content that I wanted to in some of the sections below, but I'm providing links to resources that explain these concepts. I may fill in these sections later when I get the time.

See also: http://www.w3schools.com/css/css_dimension.asp

See the following resources:

• http://www.w3schools.com/css/css_margin.asp
• http://www.w3schools.com/css/css_padding.asp

See http://www.w3schools.com/css/css_border.asp

See http://www.w3schools.com/css/css_background.asp

See http://www.w3schools.com/css/css_list.asp

See the following resources:

• http://www.w3schools.com/css/css_positioning.asp
• http://www.w3schools.com/css/css_classification.asp

See the following resources:

• http://www.w3schools.com/css/css_pseudo_classes.asp
• http://www.w3schools.com/css/css_pseudo_elements.asp

Some of the most useful "pseudo classes" consist of the following types: hover, focus, and active. When applied to links, you can create special effects on links that are activated when the mouse "hovers" over them, or when you tab to links, or when you are in the act of clicking on a link. Technically, these pseudo classes can be applied to any element -- not just links -- but poor browser support in Internet Explorer limits the usefulness of hover, focus, and active to mostly links.

The hover Pseudo Class

The hover pseudo class can be used to change the appearance of a link when the mouse is positioned over the link (when it "hovers" over the link). The hover pseudo class is commonly used to change the background color, which has the effect of highlighting the link.

The style for this effect would look something like this:

a:hover {
  background:yellow;
  }

The focus Pseudo Class

As nice as the hover effect is, people who use a keyboard rather than a mouse will not benefit from it. In order to make this effect keyboard-accessible, you must use the focus pseudo class. This class is activated when the user tabs to the link.

a:focus {
  background:yellow;
  }

The active Pseudo Class

For an added special effect, you can change the style for the brief moment during which the person is actually clicking on the link. You might make the text color brighter, for example. You could also make the link appear as if it is being pushed down like a button. You would accomplish this by moving the link 1 pixel to the right and 1 pixel down, as in the following example:

a:active {
  position:relative;
  top:1px;
  left:1px;
  }

Combining hover, focus, and/or active

Oftentimes it makes sense to apply the same styles to both hover and focus, in order to make sure both mouse users and keyboard users experience the same effect. You can also ensure greater cross-browser support for the effect (to make up for Internet Explorer deficiencies) by grouping the active pseudo class with the other two.

a:hover,
a:focus,
a:active {
  background:yellow;
  }

If you want, you could also create a separate style declaration just for the active pseudo class, but that would be optional.

The following example uses the styles described above:

The Accessibility Advantage

When used properly, the hover, focus, and active pseudo classes can increase the accessibility of links by making them more obvious to users. Changing the background color highlights the link, and shows the user exactly which areas are clickable.

See http://www.w3schools.com/css/css_mediatypes.asp

As you experiment with styles, make sure you avoid these common mistakes:

Error: Forgetting to link your HTML file to the CSS file

Your styles won't work unless you create a link in your HTML file to the CSS file as explained in the section about external style sheets.

Error: Forgetting to put a semi-colon at the end of the line in a style declaration

If you leave off the semi-colon, the styles won't work properly.

Correct:

p {
	color:red;
	background-color:white;
	}

Incorrect:

p {
	color:red
	background-color:white
	}

Note: Technically speaking, if you leave off the semi-colon on the last style declaration, it won't matter, but if you have more than one style declaration, such as color, margin, padding, and background-color, all of them except the last one must have semi-colons at the end. I usually put semi-colons at the end of every line, just in case I need to add to the list of styles later.

Error: Misspellings

If you type "maggenta" (incorrect) instead of "magenta" (correct), or "margen" (incorrect) instead of "margin" (correct), the styles won't work. All misspellings will cause the style to fail. The word "grey" has two spellings: "gray" and "grey." Both are acceptable.

Error: Improper Syntax

You have to follow the syntax given in the example files. You have to use curly brackets, for example { } not parentheses ( ). You have to remember the colon in-between the style type and the style declaration.

Correct:

background-color: white;

Incorrect (colon missing):

background-color white;

Also incorrect (hypen missing):

background color: white; 

Note: you can write the style declaration with or without a space after the colon. The empty space doesn't matter in this case.

Error: Putting a space between a value and the unit type

Correct:

margin:25em;

Incorrect:

margin: 25 em;

Note: This is an important section. Don't skip it.

To learn about accessibility issues with style sheets, read the following WebAIM resources:

• Using CSS to Your Advantage
• CSS Pitfalls
• Fonts
• Typographical Layout

The other sections are more "advanced" but also useful.

The general rule with CSS is to put as much of the styles in the external style sheet as possible. Doing this consolidates the styles in one location, making it easier to find the styles in multi-page web sites, and easier to make sitewide changes, because you have to change things in only one place, rather than on every individual page.

There are some circumstances, though, in which creating page-specific styles makes sense. If a style is going to be used on only one page and nowhere else, it would probably be better to put the style on that page and not fill up the external style sheet with lots of styles that aren't going to be used throughout the site. Similarly, if a certain style is going to be consistent on nearly all of the pages, but if there are going to be some exceptions, it makes sense to put the default style in the external style sheet, and put the exceptions in the individual pages, so that they override the default style.

Making a Navigation Menu Link Look "Selected"

When creating a navigation menu, it's a good idea to create styles that show each of the links in their default state, making it look like none of the links are selected. Then, on each of the individual pages, it may be appropriate to override the default style for one of the navigation links to make it stand out visually.

Here are a few examples of real web sites that use visual cues to show that a page, or section of the web site, is selected.

The Barnes and Noble site uses a tab-like style. On the home page, none of the tabs looks selected.

After clicking on the "eBooks" tab, the this tab changes from the default medium brown color to a lighter tan color. The text also changes from white to green.

The Apple.com web site takes a similar approach, though the styling is quite a bit different. All of the links are dark gray text on a medium gray background.

After clicking on the "Support" tab, the background of that link turns dark gray and the text turns white.

On CNN.com, the home page shows the "Home" tab selected, meaning that all the tabs are red with white text except for the Home tab, which is light grey with red text.

After clicking on the "Tech" tab, the "Home" tab is no longer selected, and now the "Tech" tab is the one with a light grey background and red text.

There are many other examples throughout the web that use the same concept to visually show the user which section of the web site they are in. There is no magic or automatic method in HTML or CSS to accomplish this. In fact, there is no such thing at all as a "selected" or "unselected" link, really, at least in the resulting HTML and CSS that viewers see. The thing that makes the difference is that different styles and/or graphics are applied to one of the links to make it look different than the others.

Here's a really simple example. Let's say that all of the links in your navigation menu have a default background color of red and a text color of white. Your external style sheet might have a line that looks something like this:

#nav a {
	background:red;
	color:white;
}

The above code assumes that you have an item (most likely either a div or a ul) with an id of "nav" in your template. Your HTML code in the template might look something like this:

<ul id="nav">
	<li id="home"><a href="index.html">Home</a></li>
	<li id="about"><a href="about.html">About Me</a></li>
	<li id="contact"><a href="contact.html">Contact Me</a></li>
</ul>

With our default style in place in the external style sheet, and our navigation code in place in our template, all of our links will have a red background with white text. Now let's say that we want the background to turn blue for the page the user is currently on. We can't put this in the external style sheet, because whatever we put there will apply to all of the pages throughout the whole web site, but we want the effect to apply only to the specific link that reflects the page the user is currently on.

To do this, we create a page-specific style, and instead of applying it to all the links, we apply it only to one of the links. Here's what the page-specific style would look like for the home page:

#nav #home a {
	background:blue;
}

If we want to keep the text white, we don't have to specify the text color at all, because the style from the external style sheet already specifies the text color as white. We could change the color if we want though. Let's make it yellow:

#nav #home a {
	background:blue;
	color:yellow;
}

It's important to understand why we wrote #nav #home a { at the beginning of this style declaration. This essentially says that the style applies to the item with the id of "nav", and that within that, it applies only to the item with the id of "home", and within that, it applies only to the links (<a>) inside that item. Of course, to make this happen, it means we had to think ahead when we created the template. We had to give each of the list items a unique id (for example, <li id="home">) so that we could apply styles to them individually like this.

On the "About me" page, the page-specific style would look like this:

#nav #about a {
	background:blue;
	color:yellow;
}

And on the "Contact me" page, it would look like this:

#nav #contact a {
	background:blue;
	color:yellow;
}

I have to admit that the above set of styles is too simpistic and unattractive for most web site designs. Your styles will likely be more complex. I just didn't want to get bogged down in the details of attractive styling, which would distract from the overall technique that I'm presenting here.

Where Do You Put the Page-Specific Styles?

The short answer is this: you put them on the pages where they belong, and not in the template or in the external style sheet. If you need certain styles on the index.html page, you put them on the index.html page. If you need certain styles on the about.html page, you put them on that page, and nowhere else.

It will probably help to give a little bit more of an explanation though. The way that the system all fits together within a Dreamweaver template is that the external style sheet is included in the template, and the page-specific styles are typed by hand in an editable region inside the document head. This means that your template has to have an editable region in the head.

The top of the template could look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
@import url("styles.css");
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

Notice that there is an editable region called "head" (it's at the end of the above code). Nothing is typed inside this editable region yet. In fact, in the template itself, we want to leave this area blank, and not type anything there. If we did type something there, it would show up on all the pages, which would defeat the purpose of page-specific styles.

Notice also that the external style sheet (styles.css) is included before the editable region called "head." This is very important. Whichever style you put last is the one that takes precedence. You need the page-specific styles to override the default external styles -- not the other way around -- so you need to put the external style sheet first, and the page-specific styles last.

Now, to put our page-specific styles on the index.html page, open up that page in Dreamweaver, go into the code view, look for the editable region called "head," and type the styles there, like this:

<!-- TemplateBeginEditable name="head" -->
<style type="text/css">
#nav #home a {
	background:blue;
}
</style>
<!-- TemplateEndEditable -->>

Notice that I had to include opening and closing style elements. It won't work if you forget them.

That's how the system works. You repeat this technique on each of the individual pages.