You might at this point have noticed that styling your elements "inline" with the style property is really annoying.
Fortunately, HTML saves the day with the id property! IDs are unique names for elements which can be selected by CSS.
For example:
<style>
#just_one_element {
color: blue;
}
</style>
<p id="just_one_element">
This text is blue!
</p>
<p id="another_element">
This text isn't changed at all!
</p>
Note that selecting an ID is done in CSS with the "#" symbol - this is so CSS knows you aren't trying to select a type of tag. IDs should never actually contain a "#"!
This is pretty convenient! However, we can go ever further, with classes. The class attribute allows you to select arbitrary elements with one single selector. They don't even have to be the same type! For example:
<style>
.some_elements {
color: yellow;
}
</style>
<p class="some_elements">
This text is yellow!
</p>
<p class="some_elements">
This text is also yellow!
</p>
<p id="some_elements">
This text is not yellow.
</p>
<b class="some_elements">
This text is yellow and bold!
</b>
Note that classes are selected with . and ids are selected with #. If you mix them up (e.g. try to use .some_element to select
an element with id="some_element"), it will fail! Also consider that elements may have both an id and a class, and that works exactly as you would expect.