This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Type selectors target element types on the page. They’re also called element selectors because we use the element’s HTML tag as the selector.
Quick Reference
Using type selectors
To target the footer element and change its background color, we can write the following CSS rule:
footer {
background-color: lightblue;
}
To target all paragraphs on the page, we can use a type selector:
p {
color: slategrey;
font-size: 18px;
}
So next up we're gonna talk about type
selectors.
0:00
A type selector is what we use to select
an element type on the page.
0:04
They're also called element selectors,
0:08
because we only use the element's HTML tag
as the selector.
0:10
So these are the selectors we used in the
previous stage.
0:15
When we styled the body element, the
header, and the H1 element.
0:18
So for example, to target every paragraph
element
0:22
in our HTML file, we need to use the p
element as our selector.
0:28
So let's type p, followed by a set of
curly braces, and
0:33
as our first declaration, we will write
the color property.
0:38
And make the value white, and
0:43
below that we're going to type background,
dash color.
0:45
And the value is going to be light blue.
0:49
So if we save our style sheet and refresh
our preview,
0:54
we can see how the selector targets every
paragraph on the page.
0:59
And applies the styles we defined.
1:03
And like we did in the previous stage,
1:07
if we want to target the header element
and change its background color,
1:09
well we can target the header element by
writing header as our selector.
1:15
So, let's make the header's background
orange,
1:23
by writing background color: orange.
1:28
And when we save our style sheet and take
a look at our page, once we refresh,
1:32
there's our orange background color in our
header.
1:37
So, notice the pattern here.
1:39
Each set of tags represents an element on
the page.
1:41
And we're able to use any of the HTML tags
as selectors in our CSS.
1:46
Type selectors are good for describing
what elements look like by default.
1:53
So let's start using type selectors to
begin defining the default styling for
1:57
how some our elements will appear in our
Lake Tahoe website.
2:02
So in our stop sheet, I'm going to remove
the paragraph rule we just wrote.
2:07
This was just an example, but
2:11
we'll keep the header rule with the orange
background color.
2:13
So next, to select and add style to the H1
on our page, write below the header rule.
2:18
We'll type H1, followed by the curly
braces.
2:26
Then, we're going to write a font size
property, and set the value to ninety
2:30
pixels, and below that, we'll add a color
property and set the value to white.
2:37
Then below our H1 rule,
2:44
we'll use another type selector to target
the H2 elements on the page.
2:47
So we'll type H 2 followed by the
declaration block,
2:52
and let's use a font size property, and
we're going to set the value to 53 pixels.
2:59
And right below our H2 rule, let's also
target the H3 headings on the page.
3:07
So, we'll type H3, then inside the curly
braces,
3:13
we're going to use a font size property.
3:18
This time the value will be 20 pixels, and
let's add a color property.
3:22
And we're gonna use what's called a
hexadecimal value.
3:28
To make our H3's color a lighter shade of
black.
3:31
So we're gonna type, #48525c, followed by
the semicolon.
3:35
Finally, let's also target the body of our
page.
3:45
So let's add that right above the header.
3:49
So we're gonna type body, followed by the
declaration block.
3:52
Then we're gonna add a color property.
3:58
And we're gonna use another hexadecimal
value,
4:00
to make the body color a gray color value.
4:03
So let's type #878787.
4:07
And we'll close that off with a semicolon.
4:12
And we're going to add one more property.
4:14
This time we're going to type margin, and
we're going to set the value to zero.
4:16
So notice how we're writing these type
selectors in the order they
4:22
appear in the HTMLl document.
4:27
So the body is first, then the header, H1,
H2 and H3.
4:29
Now this is just a matter of preference,
to keep things nicely grouped and
4:32
organized in reference to our HTML
document.
4:39
So right now if the CSS rules were in any
order things would
4:42
still work the same way.
4:46
So let's go ahead and
4:47
save our style sheet, and we'll go back to
our work space preview.
4:48
And refresh the page, and as we can
see,the body, header and
4:52
heading type selectors we just wrote,
match their respective elements on
4:57
the page, and they're now styled with
those properties we defined.
5:02
And you'll notice that white space around
the header is no longer there.
5:05
Well that's because we set the body
element's margin property to zero.
5:11
Okay, so our page is starting to take
shape with these bay CSS styles.
5:17
Up next we'll see how we're able to make
our selectors more specific with ID'S.
5:22
You need to sign up for Treehouse in order to download course files.
Sign up