Today's soundtrack is Lightning Bolt: Fantasy Empire, which sounds kind of like an avante-garde noisecore doom metal album. I was first playing it as background noise and hated it, but I've realised as the evening has progressed that the louder I play it, the better it sounds, and now I actually don't want to turn it off, even though the kids are going to bed soon.
This evening, I'm continuing to learn about CSS on freeCodeCamp - specifically, how to add borders around elements.
When we add a border around an element, we can choose its style, colour, roundness of corners, and width. Like with images and fonts, we can create border classes in our "style" section at the top of our page.
<style>
.thick-blue-border {
border-color: blue;
border-width: 10px;
border-style: solid;
border-radius: 5px; (OR use percentages: eg, border-radius 20%;) }
</style>
If we want to apply multiple classes to a single element, we just include all of the class names separated by spaces within the quotation marks.
<img class="small-image...thick-blue-border" src="www.example.com/ picture.jpg" alt="An example image">
We can use CSS to modify the background colour of an HTML element. We can create background classes and apply those to the desired elements.
<style>
.pink-background {
background-color: pink; }
</style>
To make the page compatible with Javascript and with accessibility features, and also to allow editing of a single element, we should add a unique "id" to each element on the page. The id tags are added after the classes of an element.
<h1 class="red-text round-blue-border" id="top-header"> This is the title of the page</h1>
That's all for tonight! Next time, I'll be learning about how to use CSS to modify a single element through its id tag.