W3 Schools Reference Page

CSS Home

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:

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

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.

Option 1 Option 2 Option 3 Option 4