This lecture notes contain the following:

• Types of Selectors
• Selector Anatomy
• Selector Cascading
• Descendants in CSS
• Specificity

Types of Selectors

Embedded style and .css files contain selectors and not HTML tags. There are three different types of selectors and one combination selector as follows:

1. Tag or Type selectors are used to style all the tags on a Web page. You usually style these first and they make up your general style rules for the page since they usually have the biggest impact on the overall look of the page. Tag selectors always appear to have the exact same name as their HTML counterparts.
   
   For example, a tag selector that styles all the <h1> tags on a page would have the name h1 (without the brackets).
   or, if you want to style all the paragraph or p tags on the page so they look the same, use a p tag selector.
   
   
2. Class selectors are typically used as exceptions to various general styles on a Web page and are used infrequently on a Web page. If tag selectors are the rule, then class selectors are the exception to the rule. Class selectors can and should be named by you. Also, in the CSS, they always appear with a period in front of the name, like this: .redfont
   
   For example, if you have ten p tags on a page, and you want all but one of them to look alike, create a p tag selector to style the majority, then create and apply a class selector to the odd one in the group. Because class selectors are used as an exception, they tend to be the least frequently used selectors.
   
   
3. ID selectors are typically used to identify divs, tables, or table cells that are used throughout a website. They are also used to identify other unique elements, such as individual form fields and individual images. They must be used only once each on a page. ID selectors can and should be named by you to clarify what structural element they are referring to. Also, in the CSS, they always appear with a number or pound sign in front of their names. They will have names like: #navbar
   
   For example, if you ID a div "content", then you cannot use that ID on any other element.
   
   
4. Compound selectors, which is what Dreamweaver calls them, or more typically referred to in the rest of the world as Descendant selectors, are not one specific selector, but a combination of selectors used to specify a particular element to style.
   
   For example, if you want to style all of the p tags that are nested inside a div ID'ed as "content", then you would use this selector combination (Compound selector):
   #content p
   
   This is a combination of an ID selector followed by a tag selector -- they are always separated by a space. Also, the selectors on the right are always nested inside the ones to their immediate left. Consider this Compound selector example:
   #container #nav ul li a
   
   This is styling all of the a tags nested inside list item tags nested inside an unordered list tag which is in turn nested inside an element (probably a div) ID'ed as "nav" which is itself nested inside an element (again, probably a div) ID'ed as "container".

Selector Anatomy

All selectors contain a name, property and value. The property and value are enclosed in curly braces. If you wanted to style a p tag with the font color blue, your CSS style would appear like this in the CSS code:

         p {color: blue}

The selector parts are described in this figure:

If you have multiple properties, they are separated by semi-colons. So, if you add a font-family of Times New Roman to the blue p type selector, it would look like this:

p { color: blue;
     font-family: Times New Roman;
}

Instructor Note:
The blank spaces and returns have no bearing on how browsers interpret this code, just as those things don't matter in HTML also. The only required elements are the braces, colons and semi-colons as shown.

Selector Cascading

There is also a cascading or preference order to how a Web browser will interpret the styling in these elements. Type selectors are the most basic, class selectors will override type selectors, and ID selectors will override class and type selectors.

In other words, if you have created a p type selector that gives a blue font color for all of the paragraphs on the page, then any class selectors that are applied to paragraphs on the page and have a red font will make those paragraphs red instead of blue. Also, if a div tag on the page has been given an ID that specifies a green font color, then all of the paragraphs inside that div tag will be green, regardless of whether they have class applied to them or not.

ID selectors are given a magnitude of 100 times preference in terms of browser weighting of importance, while class selectors are 10 times, and type selectors are only 1 times preference. In other words, ID selectors are 100 times more important and relevant than type selectors and 10 times more important than class selectors based on this weighting system.

Using Selectors

As a best practice, I recommend the use of the selectors as follows:

• Use type (tag) selectors to style the entire page first.
  
  For example, if you want to make all the paragraphs or <p> tags on your Web page have a blue font color, then create a p tag selector and give it a blue property. It would look like this in the CSS:
               p {color: blue}
  
  Again, setting this up in this CSS will automatically style all of the HTML <p> tags on the Web page the CSS is embedded in or linked to.
  
  
• Use class selectors to override or make exceptions to what tag selectors are doing. Also, name the class selectors with a name that will help you easily find them later and with a name that describes what it is they are doing.
  
  For example, if you want to change just one of your paragraphs in your Web page to be red, then create a class that would look like this in the CSS:
             .redfont {color: red}
  
  To connect the class you created to the specific paragraph on the Web page, you must refer to the paragraph in the HTML that is being given the class.
  

  Instructor Note:
  To accomplish this in Dreamweaver:
  
  1. Click on the paragraph in Design view.
  2. Select the paragraph by clicking on the <p> tag on the status bar below the page -- notice that the entire paragraph will highlight.
  3. Right click on the <p> tag on the status bar.
  4. Move your mouse to Set Class.
  5. Choose the class you created, in this case .redfont, from the list of classes.
  6. Note that the paragraph now conforms to that class you chose.

  You will see that in the HTML a class attribute used. It will look like this in the HTML:
  
  <p class="redfont">

• Use ID selectors to name structural elements on the page, such as <div> and <td> tags. Also, use ID selectors on <ul> tags used in navigational bars. ID selector names should only be used once on a Web page. In other words, if you ID a div tag as #navcontainer, don't use #navcontainer on any other tags on that page.
  
  When naming, it's best to describe what the role of the structural element is, or what you plan on putting inside that container. As an example, let's assume you want to create a <div> tag to hold a navigational bar. A good and very widely used ID would be #navcontainer. Also, let's assume you want to put a yellow background color in that container. Your CSS would look like:
            #navcontainer {background-color: yellow}
  
  To connect your structural elements to the ID you've created, you should use an ID attribute in the HTML and it would look like this:
            <div id="navbar">

Descendants in CSS

Selectors can be used in combination with one another. Let's say you have several list items on a page, but you want to add 50 pixels of left padding only to the list items within the div called #navcontainer. In the CSS, you can follow the ID selector #navcontainer with the type selector li so that only those list items are affected. In the CSS it would look like this:

      #navcontainer li {padding-left: 50px}

You'll see many more combinations like this as you work through the CSS exercises. Also note, Dreamweaver refers to Descendant selectors as Compound selectors -- it means the same thing.

Specificity

What happens when you have two style rules that seem to state opposite ideas? Which one wins? Consider this example:
 
In your style sheet, you have these two selectors
 
#content p { color: blue; }

p { color: red; }
 
The first selector (the Compound) is suggested that all p tags within the div called "content" are to be colored blue, but the tag selector for all the p tags on the page says that all of them, no matter what div they are in, are to be colored red.
 
So which one gets the style?
 
The one that's more "specific" is the one that would style the element.
 
The way browsers work is that, to determine which one is being more specific, they assign a numerical value to the selectors used, with these value:

Instructor Note:
tag selectors getting a 1 point value, class selectors getting a 10 point value, and ID selectors getting a 100 point value.

Compounds add all their selectors together. The highest numerical value in total for the selector or Compound will win.
 
In the case above,
 
#content = 100 + p = 1, which is a total of 101

Since the other is just a p or a value of 1, then the Compound wins, so those p tags inside div#content would be blue, but the ones outside div#content would still be red.
 
Check out this site for a really good article that explains the concept of specificity in better detail: HTML Dog: Specificity.