CSS (cascading style sheets) is used to make HTML pages look pretty. CSS targets content wrapped in HTML tags, and it can even exist at the bottom of the HTML page in a special “style” tag. The code directly below is HTML, but we’re going to style it with CSS.
<p id="unique-p">
I am a paragraph
</p>
Here’s where you get to see the “id” attribute in action.
<style>
#unique-p {
color: red;
font-size: 24px;
}
</style>
Code Dissection
<style>…</style>
For the most part, your styles will go in the HTML “style” tag.
#unique-p
The hash symbol and the text after it are a CSS selector. This is saying “target the element that has the “id” of “unique-p”. There are other symbols to target other attributes, but we’ll learn about those later.
{
After the selector, there’s an opening curly brace. All of the “rules” after the curly brace will be applied to the selected element.
color:
There are many, many rules you can use to style your HTML. This particular rule controls the color of text in the element. Don’t get too caught up in trying to learn every rule. Eventually, you’ll encounter them frequently enough to learn the most important ones.
red
Each rule has corresponding values. The corresponding value for the color rule can be the name of a color, the hash, or a couple other things.
;
The semicolon denotes the end of a rule.
font-size: 24px;
This rule sets the size of the text. There are a couple different units we can use. I just chose to use pixel (px) here.
}
End the list of rules with a curly brace. In web development, the curly brace is used a lot to surround a block of stuff.
Here’s what the rendered HTML looks like. Pretty, huh?
I am a paragraph