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
Selectors are one of the most important and powerful parts of CSS because they let us target the content we want to style. When we define a selector in our stylesheet, we’re instructing the browser to match every instance of that selector in the HTML.
Quick Reference
Universal Selector
The universal selector targets every element on the page at once and applies the styles we set.
* {
margin: 0;
padding: 0;
}
This universal selector will apply the margin and padding styles to every element on the page.
[MUSIC]
0:00
So now we're gonna learn the different
ways we can define a CSS selector.
0:04
Selectors can be defined based on an
element's type, its class or
0:08
ID attribute, even how we interact with
the element, and more.
0:12
But before we get into how CSS selectors
work,
0:16
let's first talk about what makes up a CSS
rule.
0:19
CSS rules or rule sets tell browsers how
to render HTML elements.
0:22
A CSS rule is made up of two main parts,
0:28
the selector followed by the declaration
block.
0:30
[SOUND] The selector is the part of the
CSS rule that targets HTML elements.
0:33
It's what actually lets us select the
content we want to style.
0:39
Now, after the selector comes the
declaration block,
0:43
which begins with a left curly brace and
ends with a right curly brace.
0:47
And inside those curly braces is where we
write the declarations that
0:51
style the element we're selecting.
0:55
Each declaration consists of a property
name and a value, separated by a colon.
0:58
The property is what indicates the part of
the element we want to change, and
1:03
the value describes how it's changed.
1:08
As you'll learn throughout this course, we
can write as many declarations as we want,
1:11
as long as we separate each one with a
semicolon.
1:15
Now that we're familiar with the syntax of
a CSS rule,
1:19
let's get started with basic type
selectors.
1:22
Then we'll get more specific as we go.
1:25
Selectors are one of the most important
and powerful parts of CSS.
1:28
We can think of selectors as patterns that
allow us to target HTML elements and
1:32
apply styles to them.
1:38
When we define a selector in our style
sheet, we're instructing the browser to
1:39
match every instance of that selector in
the HTML.
1:43
And we've actually already written a few
CSS selectors in
1:47
the previous stage when we added CSS to
our page.
1:51
So, in our latest workspace, we have our
style sheet ready to go, and
1:55
it's already linked to our HTML file,
2:00
which now contains the rest of the content
we'll need in our Lake Tahoe website.
2:03
And as we can see in the workspace
preview,
2:09
the page is once again completely
unstyled.
2:12
So let's go back to our workspace, open up
our style.css file, and
2:15
let's start writing some styles with CSS
selectors.
2:20
So the very first selector we'll cover is
called the universal selector.
2:24
And it's called a universal selector
because it selects every element on
2:29
the page at once and applies the styles we
set.
2:33
So it's a very powerful selector because
it overrides all other selectors,
2:37
as we'll soon find out.
2:41
So to create a universal selector, we use
an asterisk as our selector,
2:43
followed by the declaration block.
2:48
So we'll write our set of curly braces,
and inside these curly braces is
2:50
where we'll write the styles we'd like to
apply universally to our page.
2:56
Again, don't worry if you're not familiar
with the CSS properties and
3:01
values we're about to write.
3:05
For now, we'll only need to understand how
CSS selectors work.
3:07
And let's start using these new terms we
just learned.
3:11
So, this is our CSS rule.
3:14
Here we have our selector.
3:17
Followed by the declaration block.
3:19
So let's write our first declaration.
3:22
We're going to use the margin property.
3:25
So we're going to type margin, colon,
space, and
3:28
we're going to set the value to 0.
3:32
So after the semicolon, I'm going to hit
Enter.
3:35
And below the margin declaration we wrote,
we're going to write a new declaration.
3:38
This time we're going to type padding and
we're gonna set the value to 0.
3:42
And below that,
3:48
we're going to write a color property, and
this time the value will be red.
3:49
So this universal selector we just wrote
3:55
will apply these styles to every element
in our project.
3:58
So let's take a look.
4:02
I'm going to save our style sheet.
4:04
Then in the workspace preview, once we
refresh the browser, we can see how
4:07
setting margin and padding to 0 told the
browser to remove all margins and padding
4:11
from every element on the page, then
change their color from black to red.
4:18
So now all the padding and
4:23
margins in the browser's default user
agent style sheet are now gone.
4:24
So because the universal selector is a
very powerful selector,
4:30
we'll need to be careful with how we use
it.
4:34
For now, we'll go ahead and
4:37
remove the universal selector rule from
our style sheet.
4:39
But in later lessons we'll go over the
ways this selector can be useful.
4:43
[BLANK_AUDIO]
4:47
You need to sign up for Treehouse in order to download course files.
Sign up