Reusing code

As a general coding principle, Don't Repeat Yourself.

To reuse CSS, we use IDs and classes.

IDs vs. Classes

id -- Applies to one element on a webpage, i.e., a webpage only has one footer. In CSS, you mark an id selector with a "#".

class -- Lots of elements can have the same class, i.e., There can be many warnings on one webpage. In CSS, you mark a class selector with a ".".

1. Selector: id

#site-footer {
  property: value;
}

Selects the one element on the page with an id of site-footer.

<p id="site-footer">Copyright 2016</p>

^ The associated HTML

2. Selector: class

.warning {
  color: red;
}

Selects all elements with a class of warning.

<p class="warning">Run away!</p>

^ The associated HTML