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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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