Adding CSS to a Page

[Deep Dive: CSS Foundations, Adding CSS to a Page with Guil Hernandez] 0:00 CSS can be added to a page several different ways, 0:07 each with its own advantages or disadvantages. 0:09 In this video we'll review the different methods we can use to apply CSS to our pages. 0:12 So, let's get started. 0:17 Here we have a simple HTML document containing headings, paragraphs, 0:19 and an unordered list. 0:23 Besides the default browser styles, no author styles have been applied. 0:26 So, let's go ahead and start adding styles to our page. 0:30 The first way we can add styles to a page is with inline styles. 0:33 Inline styles mix content with presentation, 0:37 and to add them we use the style attribute inside the HTML element 0:40 we want to apply a style to. 0:44 So, if you add a style attribute to the body of the page, you can apply a style. 0:47 Here we will give it a background color. 0:51 Refresh the page, and you'll notice how our page has a background color of light blue. 0:57 If we add another style to the attribute of a paragraph-- 1:03 this time we'll give it a font-weight property with a value of bold. 1:10 Now we see how the text inside the first paragraph is now bold. 1:20 In-line styles are at the lowest level possible of the cascade. 1:24 That means they will override any styles declared in external or internal styles sheets. 1:28 In-line styles are not really considered good practice, 1:35 and should be used sparingly, because if we need to make any changes, 1:38 it means we need to go directly into our markup. 1:41 We're not really separating content from presentation, 1:44 making maintenance difficult and impractical. 1:48 In-line styles might be good for creating quick HTML and CSS mockups and prototypes 1:51 or for temporary styles not meant to be shared with other elements on the page. 1:56 Next, we have internal styles. 2:01 Internal styles are included in the head section of the document 2:04 and are defined using the style tag. 2:08 With this method, we can write all of our CSS rules within the HTML document. 2:10 Inside of our head element we'll add the style tag, 2:15 and here we'll add a style to our heading 1. 2:22 We'll give it a color of white 2:25 and a background color of red. 2:33 In the browser when we refresh, we see the new color and background styles 2:38 have applied to our heading 1. 2:42 This method might be useful if you're creating a small scale, one-page site-- 2:45 a coming soon landing page or for temporary use while, say, 2:50 testing a new feature or small iterations. 2:53 The downside to using this method on larger websites 2:56 is that since the styles are on the same page, they are required to be downloaded 2:59 each time the page is loaded. 3:04 It also means that we may need to duplicate a lot of the same styles 3:06 across multiple pages. 3:10 With an external stylesheet, we can change the look of an entire site or application 3:13 with just one file and then reference in the head section of the docement, 3:18 using the link element. 3:23 So, in our head section we'll add a new link tag. 3:25 Here, the rail attribute specifies the relationship between the current document 3:30 and the link document, which in this case is a stylesheet. 3:35 The type attribute specifies the media type of the link document. 3:39 Here it's describing the style sheet. 3:42 However, in HTML5 this attribute is no longer necessary. 3:44 So, we can go ahead and remove this. 3:49 Finally, the href attribute points to the location of the file. 3:52 We'll be pointing to a file I created earlier named style.css. 3:56 We'll go ahead and add style.css for our href attribute. 4:01 Over in styles.css we'll just add a few styles to our h2 4:08 and underordered list elements. 4:14 Here we'll give our h2 a color of green and the unordered list a color of white 4:17 with a background color of blue. 4:21 When we refresh, we know see how our new styles have affected our page. 4:25 The advantage to using this method is flexibility. 4:29 We keep our CSS rules in a separate file from our markup, 4:32 so any changes or additions we need to make can be done on that one file. 4:35 Another advantage is that the stylesheet is often times cached by the browser, 4:41 which saves on download time throughout the site or repeat visits, 4:45 because the stylesheet only needs to download one time. 4:49 Another method is using the @import rule, 4:51 which can be used in external or internal stylesheets. 4:56 This method allows us to import CSS from other files, 5:00 so it shares some of the same advantages as link in a stylesheet, 5:03 such as browser caching and maintenance efficiency. 5:07 When using this method, it's important we remember that 5:10 the @import statement must precede all other declarations 5:13 in order for it to work properly. 5:17 So, we can go ahead and remove this. 5:19 We'll create a new style tag. 5:24 Here we'll add the @import rule 5:29 and specify the path to the file we want to import. 5:33 Earlier I created a file named more_styles.css 5:38 containing simple layout and color styles, 5:42 so we can see how the files get applied to the page once imported. 5:44 Here we'll add the name of our new stylesheet --more_styles.css. 5:48 We'll save out our HTML file. 5:57 When we refresh the browser, we know see how the page 5:59 has imported the styles from more_styles.css. 6:04 We can also import a stylesheet from within a stylesheet. 6:07 Let's remove the @import statement from HTML page 6:11 and add it to the top of style.css. 6:15 When we save both files and refresh, 6:25 notice how nothing has changed, because we're still importing the same CSS file. 6:29 This method can make CSS more modular by splitting it 6:33 into different files. 6:37 So, while the page might link to one stylesheet, 6:39 the style sheet can import other stylesheets for reset, layout, typography, and so forth. 6:42 The drawback to using the @import method is performance. 6:50 Each @import statement is also a new HTTP request. 6:54 Now that we're familiar with the various methods of including CSS to a page, 6:59 we're ready to select HTML elements and begin applying styles to them. 7:03 In the next video, we will go over some fundamental CSS selectors we can use 7:07 to style our elements. 7:11 [treehouse] 7:14

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

Sign up