External Style Sheets

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