Today's soundtrack is Primordial: The Gathering Wilderness.
This afternoon, I'm learning how to "Use CSS Selectors to Style Elements." In the last lesson, I learned how to use CSS to change the colour of a specific HTML element. But today, I've learned that that isn't the most efficient way to use CSS. The best way to use CSS is to use it to set up consistency across the page. At the top of the code, best practice is to set up an opening and closing "style" block.
<style>
</style>
Inside of that style block, we can set up the style for each element of the page. This way, all h1s will be one style, all h2s will be one style, all paragraphs will be one style, etcetera. The way that we do this is by defining each element's style inside the "style" block: first, we identify which element we wish to stylize, then we enclose the command inside of curly brackets, and put a semicolon after each style command.
<style>
h1 {color: blue;}
</style>
Another way to differentiate CSS styles is to use classes. (These are kind of like functions - you attach a bunch of commands to one term). We can make these class names easy to remember: for example, anything labeled "big-red-text" could be a size 20 font coloured red. To create a class, inside of our "style" block, we write the name of the class that we want to create. The class name must be preceded with a period, and followed with an opening curly bracket after a space. On the line below, we write the style types that we want the class to include: colour, size, etc. Below that line, we include a closing curly bracket.
<style>
.red-text {
color: red;
}
</style>
To apply a class tag to a piece of text, we include its CSS class name inside of its HTML tag, inside quotation marks, without the period that we'd used in the class identifier.
<h1 class="red-text">Truth</h1>
Truth