Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to HTML and CSS!
You have completed Introduction to HTML and CSS!
Preview
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