You've come a long way if you've made it this far! Believe it or not, you've got the basics of HTML down pretty well! HTML creates the skeleton of a web page, but there are nearly endless ways to style your page! In order to specify this styling, we need to introduce a new language: CSS (an acronym for Cascading Style Sheets).
CSS can be written inside of the <head> within the <style> tag. The first CSS element we're going to learn about is the "class." You can specify a class with a period (.) and the following syntax: .class-name{ property: value }. We'll show you some properties and what values you can assign to them soon.
Below, we're going to define the blue-background class, and then assign that class to a certain HTML tag. The class of a tag is specified inside the begining of the tag with the following syntax: <tag class="blue-background">Your text here!</tag>.
The first CSS property we're going to show you is background-color, the effects of which are demonstrated below. Instead of using a color, you can also use an image with the similarly named background-image property.
<!DOCTYPE html>
<html>
<head>
<title>CSS!</title>
<style>
.blue-back{ background-color: blue }
.yellow-back{ background-color: yellow }
.red-back{ background-color: red }
.old-map{ background-image: url(old_map.png) }
</style>
</head>
<body>
<h2 class="blue-back">I'm surrounded by blue!</h2>
<h2 class="yellow-back">I'm surrounded by yellow!</h2>
<h2 class="red-back">I'm surrounded by red!</h2>
<h2 class="old-map">I could be a map!</h2>
</body>
</html>