understanding
classes & ids
main takeaway
- Classes are reusable
- IDs are unique
real-world
problem
solution
<p1>Green text here</p1>
<p2>Red text here</p2>
p1 { color: #00ff00; }
p2 { color: #ff0000; }
problem
in other words
- p1 and p2 are not valid HTML elements
forget about paragraphs
only use valid markup
there must be
a way, right?
you can,
with classes
purpose
- Use the same valid HTML element
- Present it in different ways
- Depending on it's class or ID
example
<p>Green text here</p>
<p>Red text here</p>
EXAMPLE
<p id="green">Green text here</p>
<p id="red">Red text here</p>
example
<p id="green">Green text here</p>
<p id="red">Red text here</p>
#green { color: #00ff00; }
#red { color: #ff0000; }
problem
Add another paragraph and make it green, too
example
<p id="green">Green text here</p>
<p id="red">Red text here</p>
<p id="green">Green text here</p>
#green { color: #00ff00; }
#red { color: #ff0000; }
incorrect
-
Valid? Technically
- But not proper markup
instead
<p class="green">Green text here</p>
<p class="red">Red text here</p>
<p class="green">Green text here</p>
.green { color: #00ff00; }
.red { color: #ff0000; }
let me explain
ID
- Why
-
Where
- How
why use an id?
where do i
specify the id?
how do i use that id through my css?
example
<ul>
<li id="facebook">
<a href="https://facebook.com>Like us on facebook</a>
</li>
</ul>
#facebook { background-color: #0000ff; }
Class
- Why
- Where
- How
why use a class?
where do i
specify the class?
how do i use that class through my css?
EXAMPLE
<ul>
<li class="odd">List item</li>
<li class="even">List item</li>
<li class="odd">List item</li>
<li class="even">List item</li>
</ul>
.odd { background-color: #dddddd; }
.even { background-color: #ffffff; }
remember
- .Classes are reusable (many)
- #IDs are unique (just one)