Classes and IDs

Classes

A class is a type of CSS selector that can be applied to any tag valid inside <body> (including <body> itself).
Why use a class?
- Flexibility
- Reuse
A class can be applied as many times as you would like in a document.
In your CSS code the class begins with a period; the word after that is up to you but be sure to start it with a letter and spaces are not allowed. The following code creates a class named 'example':
```
.example {font-size: 14px;}
```
In your HTML code you call this using the class attribute. If you wanted to apply this to a paragraph, the code would be:
```
<p class="example">Some text here</p>
```
Note that in your HTML there is no period; what is written is the text after the period.
Classes can be contextualized to a specific tag, although I prefer to leave them open so that they can be applied wherever necessary.
If we wanted to restrict our 'example' class so that it would only be effective when applied to divisions, the code would be:
```
div.example {font-size: 14px;}
```
The above code means that the class needs to be called from a division in order to be applied.
I seldom restrict classes to a specific element (unless I need to override another class by making the current rule slightly more specific) but another approach to contextualizing classes is one that I use fairly often, which is as a descendant (note the space between the class and the element):
```
.example2 p {font-size: 14px;}
```
This code affects every paragraph inside of a tag with class="example2" specified. For example, it would come into play in this situation:
```
<div class="example2">
  <p>This text uses the class because it is in a paragraph</p>
  This text does not use the example2 class; it is not in a paragraph.
  <p>More text using the class styling</p>
</div>
```
It is also possible to call multiple classes at the same time (for the same element) by specifying the class names separated by spaces. There is no limit to the number of classes that can applied. Given the following CSS code:
```
.example3 {color: green;}
.example4 {font-size: 20px;}
```
The classes could be called as:
```
<p class="example3 example4">Text 20 pixels tall and green</p>
```
Sequence of the classes in the HTML code makes no difference.
Try to avoid naming classes based on their styles (e.g., .bigGreenItalic) because styles change over time and then you have a class name that bears little resemblance to its appearance. The preferred approach is to name classes based on their usage (e.g., .footerColumnHeader).

IDs

An id is a unique identifier that is specified using the id attribute, which can be applied to any tag valid inside <body> (including <body> itself).
Why use an id?
- An id can be used for CSS, JavaScript, accessibility-related HTML attributes (such as <label>), and for within-page anchors. The same id can be referenced for as many of those purposes as desired.
- A class was originally limited to CSS, although JavaScript often uses classes to locate elements in a web page.
Unlike a class, which can be applied unlimited times, a given id can only be specified once per HTML document. This is because it is a unique identifier.
Specifying the same id twice (or more) in the same HTML page would prevent it from being unique, and usages after the first would be problematic for most of the id usage scenarios (such as accessibility, within-page anchor identification, and JavaScript lookup; they tend to only use the first occurrence of that particular id value).

In your CSS code the id begins with a # sign. An example is:

#topnav {font-family: verdana, sans-serif;}

The id could be called as:

<nav id="topnav">Nav item list goes here</nav>

Options for contextualization and descendants function the same way as classes, such as:

p#topnav {font-family: verdana, sans-serif;}

#topnav p {font-family: verdana, sans-serif;}