- [Instructor] Unlike a type
or universal selector,
which can match to multiple elements on a page,
an ID selector
matches to a single unique element.
To use an ID selector,
an ID attribute must first be added
to the elements opening tag.
ID equals a value in quotes.
The value is defined by you.
The value is then used as the CSS selector
starting with a number sign.
When choosing an ID name,
don't include any spaces.
If you want to separate multiple words,
use in underscore or dash.
Camel case where each new word is capitalized
is also valid.
But using lowercase letters
is a more common writing style in CSS.
Also using descriptive names
that explain the purpose of the style
can make it easier to read,
and understand why it's being used.
For example, an ID name like Global Header
implies that the styles are for a header
used throughout the website.
Let's open another CodePen example.
To add a style to just the first paragraph,
let's add an ID attribute to the opening tag.
Make sure to add a space
between the ID and the tag name.
Then the equal sign.
Add a pair of quotes and then give it a name.
I'll call mine highlight
because I'm going to be adding
a yellow background color to the element.
In the CSS panel,
don't worry about the styles
that are already there.
For now, let's add the ID selector,
using the number sign followed by the ID name.
Then add the curly brackets,
and we'll use the background property
to add a color.
I will go with yellow.
Now the style is applied
to just the first paragraph.
The same ID value should only be used
once per page,
but if I were to add this highlight ID
to another element,
the browser will apply the style
even though it's actually an error.
According to the specs,
the same ID value should only be used
once per page.
Even though the browser
applied the style this time,
it's important to write valid code
to avoid unexpected results.
Some developers prefer not to use IDs at all
for CSS 'cause it's not flexible,
and there are other options.
But as long as you follow the syntax rules,
it is valid.
So whether you use IDs or not,
it's a personal choice.
We'll be using this pen again
in the next lesson, so keep it open.