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
Learn about Universal, Type, Class, and ID selectors, and discover how to effectively combine them.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We've got a CSS file
linked to our HTML files.
0:00
Now it's time to start
writing some CSS Rules.
0:04
A CSS Rule is what selects and
styles HTML elements.
0:08
A CSS Rule is made up of two parts,
the selector and the declaration block.
0:12
The selector points to the HTML
element you want to style,
0:18
like providing the street
address of a house.
0:21
The declaration block contains
instructions on how to style our
0:24
HTML element and
is surrounded by curly brackets.
0:29
Without using real code, this is
an example of what we can do with CSS.
0:33
All the paragraph tags make them blue.
0:38
Let's explore some of the most
common CSS selectors.
0:41
Universal selector, the universal selector
selects all elements on the web page.
0:45
It's useful for when you want to
apply a style to every element.
0:51
Type selector, the type selector selects
all instances of a particular element,
0:56
for example,
p will select all the paragraph elements.
1:03
Class selector, the class selector selects
element with a specific class attribute.
1:08
We simply have to use the full stop or
1:14
period followed by the class
name with no space in between.
1:17
For example, .meat selects all
elements with the class meat.
1:22
ID selector,
1:28
the ID selector selects a single
element with a specific ID attribute.
1:29
For example, #ingredients selects
the element with the ID ingredients.
1:35
Descendant selector,
the descendant selector selects elements
1:41
that are descendants
of a specific element.
1:46
For example,
#intro image will only target image tags
1:49
that are nested within elements
that have the intro ID.
1:54
Grouping selectors, you can list out
several selectors separated by a comma if
1:59
you foresee yourself needing to apply the
same styles for multiple HTML elements.
2:05
For example, header, footer, main, div,
2:11
will target the header,
footer, main, and div tags.
2:16
Now let's set up the CSS
role blocks in our CSS file.
2:21
We'll use an empty declaration block for
2:25
now since we haven't
learned about them yet.
2:28
Feel free to pause this video if you want
to give each one a try by yourself and
2:30
then play to check how you did.
2:35
First, let's give
the universal selector a try.
2:38
This is the one that selects
all elements on the web page.
2:41
Remember, the universal selector selects
absolutely every element in the HTML file.
2:45
Then let's try to select the body
by using the type selector.
2:52
Here we simply enter the word body,
as that's the name of the HTML tag.
2:57
Next, let's try out the class selector by
selecting anything with the meat class.
3:03
To select all elements with a certain
class name, we have to start with a full
3:09
stop or period, followed directly by
the class name we want to select.
3:14
Remember, we don't want any spaces
between the dot and class name.
3:19
Next, let's use the ID selector to select
the element with the ID of ingredients.
3:25
Super similar to the class selector, but
3:32
we use a # instead
followed by the ID name.
3:35
Make sure there's no space
between the # and the ID name.
3:39
Let's try our hand at the descendant
selector by selecting all images
3:44
that are nested inside of
elements with the intro ID.
3:48
Don't forget the # character before intro,
and
3:54
make sure there's a single
space between #intro and image.
3:57
Finally, let's practice
combining selectors.
4:02
We'll select the header,
footer, main, and div elements.
4:05
Remember to separate each
selector with a comma,
4:12
otherwise CSS might think we're
using the descendant selector.
4:15
Now, you may be wondering about the order
in which we write our lines of code.
4:21
What should come first and doesn't matter?
4:25
CSS stands for Cascading Style Sheets.
4:28
And it's crucial to understand
why it's cascading.
4:31
When multiple style rules
target the same element,
4:35
which should the browser apply, this is
where the cascading order comes into play.
4:38
CSS is cascading for a reason.
4:44
It follows a hierarchy that can be
summed up in three simple rules.
4:47
When you have conflicting styles,
4:52
the browser prioritizes the styles
declared later in your CSS file.
4:54
So if you set a style at the beginning and
then change it later in the file,
4:59
the ladder takes precedence.
5:04
Classes have a higher priority
than the order in the file.
5:07
If you use a class selector
to select an element,
5:11
it will override any conflicting
styles declared later in the CSS file.
5:15
For example, if you target all elements
with the .bio earlier in your file,
5:21
and then target all the p elements later,
any p tags that also
5:28
have the class of bio will retain any
styles set in the .bio rule block.
5:33
IDs, the most specific selectors,
have the highest priority.
5:39
If you apply an ID selector to an element,
5:45
it will override styles from both
the order in the file and class selectors.
5:48
Adding on to the previous example,
5:54
if you had a #featured code block
even earlier in the CSS file.
5:57
Any paragraph elements that have
the featured ID and bio class or
6:02
retain all styles set by
the #featured rule block.
6:08
Great work, now that we've got
some practice on selectors, and
6:12
we learned a bit about CSS specificity.
6:17
Let's move along to writing the code
that tells CSS how to style the selected
6:19
elements.
6:24
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up