Tyler Clarke
b5aa99b64a
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 26s
53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
[!]
|
|
[=title "Week 4: ID and Class"]
|
|
[=content-]
|
|
<p>
|
|
You might at this point have noticed that styling your elements "inline" with the <code>style</code> property is really annoying.
|
|
Fortunately, HTML saves the day with the <code>id</code> property! IDs are unique names for elements which can be <i>selected</i> by CSS.
|
|
For example:
|
|
</p>
|
|
<pre><code><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>
|
|
</code></pre>
|
|
<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 "#"!
|
|
</p>
|
|
<p>
|
|
This is pretty convenient! However, we can go ever further, with <i>classes</i>. 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:
|
|
</p>
|
|
<pre><code><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>
|
|
</code></pre>
|
|
<p>
|
|
Note that classes are selected with <code>.</code> and ids are selected with <code>#</code>. If you mix them up (e.g. try to use <code>.some_element</code> to select
|
|
an element with <code>id="some_element"</code>), it will fail! Also consider that elements may have both an id and a class, and that works exactly as you would expect.
|
|
</p>
|
|
[/]
|
|
[#template.html]
|