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
Use an external stylesheet to break down how CSS is organized, including comments, selectors, and syntax.
This video doesn't have any notes.
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
It's time to dive into our CSS and our
external style sheet.
0:00
We'll begin by breaking down the
organization of CSS, including comments,
0:04
selectors, and syntax.
0:08
In your external style sheet, you will
find it's been nicely organized with
0:11
comments to help you identify which CSS
rules go with what HTML elements.
0:15
These comments should look different than
what you've seen in HTML, like up here.
0:22
Because in CSS, all it uses a forward
slash and
0:28
a star to open the comment, and a star and
a forward slash to close the comment.
0:31
In our first comment, you can see it says
Top Bar color here.
0:36
When you look at it in the page, it's this
color here on top.
0:41
Right now, it's only 20 pixels, but if I
change it to 100, save, and
0:46
refresh the page, you can see it's a much
thicker bar across the top of our browser.
0:52
This is a great time to point out the
structure of CSS.
0:59
For all the basic selectors we are using,
it's very consistent.
1:02
You have a [SOUND] selector, a [SOUND]
property and a [SOUND] value.
1:07
[SOUND] Selectors select a part of the
HTML document so
1:10
you can change how it looks.
1:14
Inside the [SOUND] curly braces, you have
a property.
1:16
This identifies what you want to change.
1:19
And lastly, you have a [SOUND] value,
1:22
which says how you want a particular
property to change.
1:25
Let's add a new property to our HTML
selector.
1:28
And we can start up here and change the
background.
1:32
Let's say background and scroll down to
color.
1:36
And let's change the whole thing to
orange.
1:41
And save that out and refresh the page.
1:45
And oh, man.
1:48
That is terribly ugly.
1:50
But it's just something you can try and
do.
1:52
Before I'll go, I'll change it to, let's
say, lightblue.
1:54
Save.
2:01
Refresh.
2:02
And that's a little better, but I think I
like the white better.
2:04
Another thing you might want to try and
play around with is the margin in padding.
2:07
Margin applies space outside of an
element.
2:12
Padding works in a similar way,
2:15
only padding applies space inside of an
element before the border.
2:17
Using margins and
2:22
padding are a great way of adding space
between elements on a webpage.
2:23
Feel free to play with these values a bit
on your own and come back for
2:28
a quick quiz before moving into colors and
fonts in the next video.
2:32
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