"Interactive Web Pages with JavaScript" was retired on March 17, 2017. You are now viewing the recommended replacement.

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

Treehouse Club: JavaScript

Well done!

You have completed Treehouse Club: JavaScript!

Sign up for Treehouse Back to Library

Linking an External Style Sheet

2:15 with Joy Kesten

Why you want to use an external stylesheet and how to use the file tree.

Code for copy/paste:

/* Background Color */

html { 
   background:#3D475F; 
}


/* Body */

body { 
  margin: 0 auto;
  max-width: 800px; <br>
}

/* Images */

img { 
  width: 100%;
}

.car {
  display:block; 
  margin: 100px 0 50px 0; 
  padding: 0; 
}


/* Links */ 
a { 
  background: transparent; 
  border: 0; 
  display: block; 
  float: left; 
  margin: 0;
  outline: 0; 
  padding: 0; 
  width: 33%; 
}

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 this video we're gonna talk about how to link and 0:00
    edit the style sheet, to ensure everything looks the way you want it to. 0:03
    Let's get started. 0:07
    In our code we have an index.html file, 0:09
    that holds all of our html and JavaScript for our page. 0:11
    I've also connected an external style sheet for our CSS. 0:17
    It's good practice to use an external style sheet as you 0:21
    start making websites with multiple pages. 0:24
    To link to our style sheet, 0:27
    we'll have to start an html document, up here in the head. 0:28
    I've labelled the link to the style sheet with a comment, so you can find it easily. 0:32
    As expected it has an href attribute, which defines the path to the style sheet, 0:37
    and a row attribute with a value of style sheet. 0:43
    This attribute specifies the relationship between the current document and 0:47
    the linked document. 0:51
    In this case, you can see that I've put my style sheet into the folder called CSS. 0:53
    To describe this path, you use the folder name, CSS, followed by a forward slash. 0:59
    If I expand and contract this file in my file tree, you can see that my style.css 1:07
    is nested inside of my CSS folder, and the href is telling us the same thing. 1:14
    If I left off the folder by accident, save it, 1:20
    and refresh the page, you can see the raw images without any styling. 1:26
    While you experiment with this, you might wonder why the sounds still work. 1:31
    And that's because the sound is written into the HTML document, 1:36
    which is the only page our browser is reading right now. 1:40
    If you correct the link by adding CSS/saveit and refresh the page, 1:44
    you can see that the spacing is back and the background color has returned. 1:53
    >> While you're styling, adding pictures, and connecting the external style sheet, 1:59
    it's always important to double-check the paths you've described. 2:04
    Especially if things aren't looking the way you expect. 2:08
    Let's see what you've picked up with a quick quiz. 2:12

    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