Classes and IDs

• HTML has two attributes that make CSS even more useful: class and ID. They make it easy to apply style to just about any tag.

• Classes can describe a generic style that can be applied to any HTML element, or can be created for specific elements.

• When defining a style for elements with a particular class attribute in the Style Sheet, declare a rule using a dot (.) followed by the class name. To limit the style to a particular element with that class attribute, use a selector combining the tag name with a dot followed immediately by the class name.

• • The following rule would apply to any element with the attribute class=“shade"
  • .shade { background: yellow; }
  • The following rule would apply only to paragraph tags with the class shade (<p class="shade">)
  • p.shade { background: red; }

• IDs are similar to classes, but IDs are unique – they can only be used with one instance of an element within a document.

• When defining a CSS rule using an ID-based selector, use a number/pound/hash sign (#) followed by the style name. To limit the style to a particular element with that id attribute, use a selector combining the tag name with a # and then the id name.

• • The following rule would apply to any element with the attribute id="intro"
  • #intro { font-size: 2em; }
  • The following rule would apply only to heading 1 tags with the id intro (<h1 id="intro">)
  • h1#intro { color: green; }