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 CSS Basics!
You have completed CSS Basics!
Preview
In our previous stage, we saw a bit of CSS in action, but now it’s time to learn the parts of the language. Writing CSS means learning how to write CSS rules, which tell browsers how to render HTML elements.
Further reading
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
[MUSIC]
0:00
In our previous stage, we
saw a bit of CSS in action, but
0:05
now it's time to learn
the parts of the language.
0:09
Writing CSS means learning
how to write CSS rules,
0:12
which tell browsers how
to render HTML elements.
0:16
A CSS rule is made up
of two main parts,
0:22
the selector followed by the
declaration block. The selector
0:26
is the part of the CSS rule
that targets HTML elements.
0:30
It's what actually lets us select
the content we want to style.
0:35
After the selector comes
the declaration block, which
0:39
begins with a left curly brace and
ends with a right curly brace.
0:43
Inside those curly braces is
where we write the declarations
0:49
that style the element
we're selecting.
0:54
Each declaration consists
of a property name and
0:56
a value, separated
by a colon.
1:02
The property indicates the part
of the element we want to change,
1:05
and the value describes how it's
changed. As you'll learn throughout
1:10
this course, we can write as many
declarations as we want,
1:14
as long as we separate
each one with a semicolon.
1:20
We can think of selectors as
patterns that allow us to target
1:25
HTML elements and
apply styles to them.
1:29
When we define a selector in our
style sheet, we're instructing
1:33
the browser to match every instance
of that selector in the HTML.
1:37
We've actually already written a few
CSS selectors in the previous stage,
1:43
when we added
CSS to our page.
1:48
Now that we're familiar with
the syntax of a CSS rule,
1:50
let's start writing some style with
CSS selectors. In our workspace,
1:55
Developer Diane's resume is
once again completely unstyled.
2:00
We'll be working in our external
stylesheet, in a file called style.css.
2:07
If you still have styles written
here from our previous stage,
2:13
go ahead and delete them all so
we can start from scratch.
2:17
As we progress, don't worry
too much about the aesthetic
2:22
value of the changes we're
making. Developer Diane may
2:26
not emerge with the most legible
resume at the end of these lessons,
2:29
but our goal here is to learn to
apply CSS rules with confidence.
2:34
Once we can do that,
we can use what we've
2:40
learned to design better-looking
products down the road.
2:43
The very first selector we'll cover
is called the universal selector.
2:48
It's called a universal selector
because it selects every
2:53
element on the page at once,
and applies the styles we set.
2:58
To create a universal selector,
we use an asterisk as our selector,
3:03
followed by the declaration
block contained within a set
3:09
of curly braces. Inside these curly
braces is where we write the styles
3:13
we'd like to apply universally
to our page.
3:19
Let's write our first declarations
using the universal selector.
3:23
We'll use the margin and
padding properties,
3:28
and set the value of both to 0,
and make our text color red.
3:33
The universal selector will apply
these styles to every element
3:40
in our project.
Let's take a look.
3:44
We can see that by setting
margin and padding to 0,
3:47
we're telling the browser
to remove all margins and
3:52
all padding from every
element on the page,
3:57
then change all text
color from black to red.
4:01
So all the default margin and
4:05
padding we normally see in the user
agent style sheet is now gone.
4:07
Developers don't tend to use
the universal selector all that often,
4:12
as in most cases it's better to be
more precise with our selectors.
4:18
Declaring that every single HTML
element should have red text,
4:23
as I've done here,
is pretty inefficient.
4:29
So let's go ahead
and remove
4:34
this universal selector
rule from our style sheet.
4:35
Next up, we'll talk
about type selectors.
4:40
A type selector is what we use to
select an element type on the page.
4:43
They're also called
element selectors,
4:48
because we only use the
element's HTML tag as the selector.
4:52
We used type selectors in
the previous stage when we styled
4:57
the body element, the header,
and the h1 element.
5:02
Let's try this out. To target every
paragraph element on the page,
5:07
we need to use the p
element as our selector.
5:12
This targets every
paragraph on the page
5:27
and applies the styles
we defined.
5:31
If we want to change the background
colors of the header and footer,
5:35
we can target both the header
element and the footer element
5:40
by writing header and
footer as our selectors.
5:58
Now you might be wondering, did
those declarations need to go
6:10
in that order? My header comes
before my footer in my HTML.
6:13
What happens if I switch
the order in my CSS?
6:19
As you can see, switching the
order didn't have any effect
6:31
when viewing the
page in the browser.
6:36
Keeping the header above
the footer in your CSS,
6:39
to reflect the order of your HTML,
probably will make more sense
6:43
to you as a developer, and
will keep your CSS better organized.
6:49
But in this situation,
the order doesn't matter.
6:54
Sometimes the order of your
CSS does make a difference,
6:57
but we'll discuss this later,
when we learn how
7:03
the cascade works in CSS.
If I wanted to change the
7:06
appearance of my links, perhaps by
changing the color and removing
7:10
the underline, I would target
the a element with my selector.
7:16
Feel free to experiment with some
more type selectors on your own.
7:42
And again, don't worry too much
about making a mess.
7:46
We're here to learn. Up next,
we'll see how we're able to make
7:50
our selectors more specific
with ID selectors.
7:55
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