HTML and CSS Reference
In-Depth Information
header {
color: white;
background-color: #333;
font-size: 1.5em;
}
What you see above is referred to as a
rule set
. Notice the curly braces that wrap three lines
of code. Also, notice that each line inside the curly braces has a colon and a semi-colon.
Everything inside the curly braces is called a
declaration block
.
The portion prior to the first curly brace is what defines which part of the web page we are
styling. This isreferred toasthe
selector
.We'll discuss more onselectors later inthis chapter.
In this case, our CSS is targeting the
<header>
HTML element.
Each of the three lines in the declaration block is referred to as a—you guessed it—
declar-
ation
. Additionally, each declaration consists of a
property
(the part before the colon) and a
value
(the part after the colon). Finally, each CSS declaration ends with a semi-colon.
What I've shown you here is a very simple example. Other CSS code examples might be
more complex, but most are fairly easy to figure out through trial and error―so don't be too
intimidated if you come across something you don't recognize.
So what does that code do? Well, we'll get into the specifics on CSS properties later, so hang
tight while we continue discussing some further important basics that'll serve as a foundation
for the rest of this topic.
How do I include CSS in a web page?
CSS can be inserted into a web page in four different ways. Let's take a look at each one,
saving the most highly recommended method for last.
Using Inline Styles
Any HTML element on a web page can be styled using
inline styles
. Here's an example, us-
ing some of the HTML we've already introduced:
