# id
Objectives:
1. Set up html and css files with css file link in head.
2. Test set up with a color change: body { background-color: blue; }
3. Reveal info about ids.
4. Show difference between ids and classes.
## File Location
You should be located in the following files:
```
javascript-library
└── 0-PreWork
...
└── 2-CSS-Basics
└──02-ids.css
└──02-ids.html
```
## Description
The `id` attribute is a **unique** identifier. Where a `class` attribute can be applied to many different elements, an `id` points to only *one* element. This allows you to manipulate that particular element without worrying about affecting anything else.
Furthermore, an `id` takes precedent over `classes`. If, for example, you have conflicting CSS styling on a particular element, one under a class element and the other under an id, the `id` attribute will be used. This allows you to prioritize your styling and, if needed, overrule generalized styling of your app.
## Sample Code
```markup
CSS ids
CSS ids
An ID is a UNIQUE identifier
id notes
start with a pound - #
uses: header or an about section
Should only be used once per page - they are unique! Important with JavaScript later on.
Use for one off styling.
Ids versus Classes
Ids
This id will be linked in the CSS page by a #
You can't have two ids on an element.
Classes
one class here.
Two classes here.
You CAN use an id twice, but you shouldn't.
```
## Sample Code
CSS:
```css
/* For Testing */
/*body {
background-color: blue;
}*/
#number-one{
color: red;
}
#number-two{
font-size: 16px;
}
.first-class{
color: green;
}
.second-class{
font-size: 24px;
}
```
## Discussion
Having the knowledge of classes under our belts, we can examine the uses of `id`. When we want to target several elements, `class` is the right choice. If we're trying to target a single element, that's when `id` is preferable. In our above example, we've shown not only how to target with an `id`, but also proven that multiple classes can be assigned to a single element. Finally, it's important to recognize that our very last `
` has both an `id` **and** a `class`!
Take note of the detail that when a `property` is assigned a conflicting `value` in both an `id` and a `class`, such as our `#number-one` and `.first-class`, the `id` has preference. In the case of our example, this means that `color` receives the `value` of "red".
## Challenge
Experiment with `id`, and try testing new properties.