Selectors determine what style rules are applied to what parts of the HTML document.

1. Inline styles apply to the tag where the style attribute is used. Here
   <p style="color: red; font-weight: bold">Do not do that!</p>
   the style applies only to this p.
2. Styles in a style section or external style sheet have the form
   target { style instructions }
   The target is called the selector. It determines to what the style instructions are applied.
3. Type selector: Where target is an HTML tag. The style applies to all of those. We've been using this one.
4. ID selector.
   1. Any HTML tag may be given an identifier, which is any alphanumeric string. It is assigned with an id attribute.
   2. An id should be unique within the document: There can be only one element with id="fred".
   3. Use a hash mark in front of the id to form a selector.
      #fred { color: red; font-weight: bold }
      applies to
      <p id="fred">Do not do that!</p>
5. The class selector. [ Style Classes Source ]
   1. The type selector applies to all tags of a certain type, and the id applies to exactly one. The class selector gives us a “some” that's not an “all”.
   2. You can create different style classes like this:
      
      p.warning { color: red; font-weight: bold }
   3. You can refer to the class with the class attribute:
      
      <p class="warning">Don't dare do that, either!!</p>
   4. You can create general classes without just a dot:
      
      .barney { color: blue }
      These can be used with class on any sort of tag.
   5. When the class attribute is not given, the base style is used.
6. The attribute selector.
   1. Selects based on an attribute value.
   2. [attribute=value] selects any element with the given attribute, say [align="center"] { font-size: 130% }
   3. element[attribute=value] selects any of the specified element with the given attribute, say h1[align="center"] { font-size: 130% }
7. The * is the universal selector. Useful in some combinations discussed below.
8. Group selector.
   1. Make a comma-separated list to apply a style to several selectors at once.
      h1, h2, h3, p.title, #fred { color: green }
9. Descendant selector.
   1. When selectors are listed without a comma, the style applies to the last one when nested inside the one before.
      p.index a { color: green }
   2. The above makes links green when they appear inside a class index paragraph.
   [ Some descendant selection Source ]
10. Child selector.
    1. Similar to descendant, but uses a greater-than.
       p.index > a { color: green }
    2. This turns green every a which is immediately inside an index paragraph.
    3. The difference from descendant:
       1. If you have
          <p class="index">Go <a href="somewhere.html">over here</a></p>
          both apply to a.
       2. If you have
          <p class="index"><b>Go <a href="somewhere.html">over here</a></b></p>
          only descendant applies to a.
       3. Treat the tag nesting as generations. My grandson is my descendant, but is not my child. My son is both my child and my descendant.
    4. Descendant is usually what you want.
    5. Because most CSS properties are inherited, the effects will often wind up the same anyway.
    [ Some child selection Source ]
11. Adjacent sibling selector.
    1. The + sign is used to select an item when it immediately follows another having the same parent.
       p + p { margin-top: 5pt }
       Applies the margin to a paragraph only when it immediately follows another under the same parent.
    2. When you have a bunch of things in a row, this can apply a style to all but the first one.
    [ Some sibling selection Source ]
12. Cascading.
    1. A given element may be subject to more than one selector.
       1. Generally, all of those styles apply.
       2. Except they could conflict, such as two different color specifications, or two different font sizes.
    2. The cascade refers to the rules about who wins.
    3. Each specification has a precedence. The highest precedence wins. Generally:
       1. Inline styles beat the style section, which beats external sheets.
          The designer can put general rules in a style sheet, but override them in a particular page or element.
       2. Reference by id beats reference by class, which beats reference by tag type.
          The designer can give general rules for tags, but put some in special classes which have other style, and still pick specific elements (by id) for individual treatment.
       3. If equal on those terms, the last one wins. Unless one is marked with a !important, in which case the last important one wins.
    4. The book goes into much more detail about the precedence calculation.
13. The span and div HTML tags.
    1. These are tags that don't do anything themselves. They exist to have styles applied.
    2. Mostly useless without either an id, class or style attribute.
    3. Span is an inline element, div is a block element.
       1. So div will create a line break without styling. It does nothing else.
       2. <span style="font-style: italic"> is a long-winded way to write <i>.
       3. <div style="margin-top: 1em; margin-bottom: 1em"> is verbose version of <p>
       4. More likely: <span class="companyname">, which is styled some special way in a style sheet.
    [ Fancy Selectors Source ] Some notes on the example