Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding CSS to HTML: External Stylesheets

5:44 with Anwar Montasir

In previous lessons, we’ve learned about inline styles and internal styles. And while both are valid ways to add CSS, they’re not recommended on larger projects. Neither of these methods separates content from presentation, and they can make overall development and maintenance quite difficult. Instead of writing our CSS inside the HTML file, the most common and efficient way of adding CSS to a page is with an external stylesheet. That's because when we use an external stylesheet, we can change the look of an entire website with just one file. Let's see how that works.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In previous lessons, we've learned about inline styles and internal 0:01
    styles, and while both are valid ways to add CSS, 0:06
    they're not recommended on larger projects. 0:09
    Neither of these methods separates content from presentation and 0:13
    they can make overall development and maintenance quite difficult. 0:17
    Instead of writing our CSS inside the HTML file, the most common 0:23
    and efficient way of adding CSS to a page is with an external 0:28
    style sheet. That's because when we use an external style sheet, 0:34
    we can change the look of an entire website with just one file. 0:38
    Let's see how that works. 0:43
    First, let's delete the internal styles we wrote previously. 0:46
    Then, we'll need to create a style sheet, and that's where we'll write 0:54
    our styles. In our workspace, we'll create a new file and 0:59
    name it style.css. To keep our files nicely organized, 1:05
    we'll drag that until it lands in our CSS folder. The .css 1:11
    extension is what tells the browser that the file is a style sheet. 1:17
    Make sure you always add the .css extension to every style sheet 1:24
    you create. Next, we'll need to link this style sheet to our HTML file, 1:30
    and we can do that with HTML's link element. 1:36
    We'll go over to the head section of our HTML file, 1:41
    and right beneath the title tag, we'll create a link element. 1:45
    At the very least, we'll need to add two attributes to this link tag 1:51
    in order for our CSS file to link correctly. 1:56
    First we'll include the rel attribute. 2:01
    This is an important attribute that specifies the relationship 2:07
    between the current HTML document and the linked document. 2:12
    So its value needs to be stylesheet because that's what we're linking to. 2:17
    This tells the browser, hey, we're linking to a stylesheet right here 2:22
    in line seven. Keep in mind that if this rel value is misspelled–for 2:27
    instance, if we write style sheets instead of style sheet– 2:32
    the browser will not link to your stylesheet. 2:37
    Next, the href–or hypertext reference–attribute 2:43
    is what points to the location of the CSS file. 2:48
    We know it's in a folder called css. 2:53
    So we need to write the path to the CSS 2:56
    file as css/style.css. In our new style.css file, 2:59
    we'll write a few styles for some of our elements. 3:09
    Again, don't worry if you're not sure what these styles mean right now. 3:36
    We're going to cover that part soon. 3:40
    All you need to understand here is the concept of separating 3:44
    content from presentation. In the workspace preview, 3:46
    we can see how the external style sheet affects the page. 3:52
    Compared to the previous methods we used to add CSS, 4:00
    the advantage to using this external style sheet method is flexibility. 4:05
    We may have multiple HTML files linked to this stylesheet, but 4:11
    as long as we keep our CSS in a separate file, any styling 4:16
    changes or additions we need to make are done in one file. 4:21
    Another advantage is that after the browser first loads the stylesheet, 4:27
    the style sheet file gets cached or kept in temporary storage by 4:32
    the browser. This saves on download time throughout the site and 4:37
    on repeat visits because the style sheet only needs to download one time. 4:42
    If you're wondering why we link to style sheets from the head section 4:49
    of the HTML document, that's standard practice for more efficient loading. 4:52
    Linking to a style sheet from the head of the document ensures the browser 4:59
    loads and parses the stylesheet first, before any elements in the body. 5:04
    This way when our website is up on a web server, and a user visits our site, 5:09
    the HTML is styled before it's presented to the user. 5:15
    You might also be wondering if you can link multiple style sheets in the 5:20
    head by using more than one link tag. 5:25
    You can, and sometimes you will. 5:28
    But keep in mind that each stylesheet requires a new request to the 5:31
    web server. Even on large, complex sites, 5:36
    you'll want to keep these additional requests to a minimum. 5:39

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up