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
With an external style sheet we can change the look of an entire website with one file.
Linking to an external style sheet
<link rel="stylesheet" href="css/style.css">
- The
relattribute specifies the relationship between the HTML document and the linked document - The
hrefattribute points to the location of the CSS file.
So, now let's take a look at more
efficient methods of adding CSS to a page.
0:00
In the previous lesson we learned that
inline styles and
0:05
internal styles, while they get the job
done and they have their use.
0:08
They're not exactly beneficial to us when
working on larger projects.
0:13
Because we're not separating the content
from the presentation and
0:17
depending on the size of our project it
can make overall development and
0:21
maintenance quite difficult.
0:25
So instead of writing our CSS inside the
HTML file the most common and
0:27
efficient way of adding CSS to a page is
with an external stylesheet.
0:34
And that's because when we use an external
stylesheet,
0:38
we can change the look of an entire
website with just one file.
0:42
So let's see how that works.
0:46
So first we'll need to create a stylesheet
and that's where we'll write our styles.
0:48
So in our workspace we'll create a new
file by going over to File > New File.
0:53
Then we're going to name our file
style.css.
0:59
And to keep our files nicely organize we
want to save it in our css folder.
1:04
You can actually just click and drag the
file inside the folder.
1:10
And don't worry about the import styles
file just yet.
1:15
We're gonna get to that later in this
video.
1:18
So the .css extension is what tells the
browser that the file is a stylesheet.
1:20
So make sure you always add that .css
extension to every stylesheet you create.
1:28
[BLANK_AUDIO]
1:33
So next we'll need to link the stylesheet
to our HTML file and
1:38
we can do that with HTML's link element.
1:42
So we'll go over to the head section of
our HTML file and
1:45
right beneath the title tag we'll create a
link tag.
1:50
At the very least we'll need to add two
attributes to this link tag in order for
1:54
our CSS file to link correctly.
2:00
So first we'll include the rel attribute.
2:03
And this is an important attribute that
specifies the relationship between
2:07
the current HTML document and the link
document.
2:12
So, its value needs to be stylesheet,
because that's what we're linking to.
2:16
So this sort of tells the browser, hey,
we're linking to a stylesheet right here.
2:22
And keep in mind that if this rel value is
misspelled, so for
2:26
instance if we write stylesheets instead
of stylesheet the browser will
2:30
not link to the stylesheet, so make sure
that it always reads stylesheet.
2:35
So after the rel attribute we need to add
an href attribute and
2:41
the href attribute is what points to the
location of the CSS file.
2:47
So we know that the new CSS file recreated
is inside the folder named css.
2:52
So we need to write the path to the CSS
file as css/style.css.
2:59
So now we can save our index.html file,
and go over to
3:10
our new style.css file where we'll write a
few styles for some of our elements.
3:14
So first let's style the body of the page
by
3:20
writing the word body followed by a space
and a set of curly braces.
3:24
And inside the curly braces, we'll write
text-align followed
3:29
by colon and a space, then the word center
and a semicolon.
3:35
Right below that, let's style the h1
element.
3:41
So we'll write h1 followed by a space and
a set of curly braces.
3:44
And inside the curly braces we're going to
type font-size, followed
3:49
by a colon and a space then 72px and a
semicolon.
3:55
And below that let's also write color
colon space and the word white, semicolon.
4:02
Next, let's give our header an orange
background color, by writing header.
4:10
Then, inside the curly braces, we're going
to
4:17
type background-color: space, then the
word orange, and a semicolon.
4:21
And finally, let's add styles to our
paragraph by writing p, then
4:27
we're going to write font-size: space
followed by 20px and a semicolon.
4:34
Again, don't worry if you're not sure what
these styles mean right now.
4:43
We're gonna cover that part really soon.
4:46
All you need to understand here is the
concept of separating
4:49
content from presentation.
4:52
So now let's save our stylesheet.
4:55
And go over to the browser preview.
4:58
And when we refresh the page we can see
how
5:01
the external stylesheet affects the page.
5:04
So, compared to the previous methods we
use to add CSS,
5:07
the advantage to using this external
stylesheet method is flexibility.
5:11
We may have multiple HTML files linked to
the stylesheet, but
5:15
as long as we keep our CSS in a separate
file any styling changes or
5:19
additions we need to make are done in one
file.
5:23
Another advantage is that the stylesheet
is often cached by the browser after
5:27
the first request which saves on download
time throughout the site or repeat visits.
5:31
Because the stylesheet only needs to
download one time.
5:37
And if you're wondering why we write CSS
or
5:40
link to stylesheets from the head section
of the HTML document.
5:43
Well that's more for page loading
purposes.
5:48
Even though CSS will still load if it's
written or
5:51
linked outside the head section.
5:55
It's a standard practice to link to
stylesheets from the head of the document.
5:58
That way, the browser loads and
6:03
parses the stylesheet first, before any of
the body elements.
6:05
And this way, when our website is up on a
web server and a user visits our site,
6:09
the HTML is nicely styled right before
it's presented to the user.
6:14
And we can use more than one link tag if
we need to link to different stylesheets.
6:19
Just keep in mind that each one requires a
new request to the web server.
6:24
I suggest linking no more than three
stylesheets, even on large, complex sites.
6:29
I'll usually try to keep it at one or two
linked stylesheets.
6:34
You need to sign up for Treehouse in order to download course files.
Sign up