Selectors

CSS selectors allow us to write our styles once and apply them to multiple elements. This prevents us from repeating code. Remember, we want to keep our code D-R-Y (don't repeat yourself) to avoid code rot! Also, any property that you can apply to the style attribute can be applied to a selector in the <style> tag.

There are three primary selectors:

• tag selectors - apply to elements matching the given tag
• class selectors - begin with a . (period) and apply to elements with a matching class attribute
• id selectors - begin with a # (hash) and apply to the single element with the matching id attribute

Use these resources on the W3 Schools site for further information:

• Syntax & Selectors
• Complete/Advanced Reference

This paragraph does not have a style attribute. Instead, it has a class attribute. That class links to the matching selector in the <style> tag.

This is another paragraph that uses the same class. If a change is made to the properties in the selector then all of the matching elements will be updated.

This paragraph has a id attribute. An ID must be unique across all elements in a HTML document. That id links to the matching selector in the <style> tag.

There are more advanced versions of selectors as well. A :hover selector is used to style the following links to make them look and feel like buttons.