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. Selects all tags.
   1. Can be used to effectively change certain default behaviors.
   2. May also have some use in some special combinations.
   3. Generally, any other selector will override * if there is a conflict (see below), so this will apply except when changed.
8. Group selector. A comma-separated list applies 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 particular element may be described by multiple selectors: The same tag could be selected by id, class, who its parent is, who its sibling is, and many others, so several style rules might apply to that tag.
       1. Generally, all of those styles apply.
       2. Except they could conflict, so you much choose. Different color specifications, different font sizes, etc. Can only use one.
       3. The cascade refers to the rules about who wins.
    2. 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. Generally, more specific specifications have precedence over more general ones.
          1. Everybody beats *
          2. Ids and classes beat the positional selections.
          3. Child beats descendent.
          4. And there are lots more have not discussed yet.
       4. If equal on specificity, the last one wins. Unless one is marked with a !important, in which case the last important one wins.
    3. This can become stupendously complex and frustrating.
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.