Importing Style Sheets with @import

Finally, another method of using an external style sheet is with 0:00 a CSS import statement. 0:04 So, the @import statement let's us import CSS from other style sheets. 0:06 So, it shares some of the same advantages as linking a style sheet, 0:12 like browser caching and maintenance efficiency. 0:17 So, back inside the head section of our page, right underneath the link tag, 0:21 let's create a new style tag like we did earlier. 0:27 [BLANK_AUDIO] 0:31 And inside the style block I'm going to 0:32 write @import followed by a set of quotes and a semicolon. 0:36 And inside the set of quotes, 0:43 we'll specify the path to the CSS file we want to import. 0:44 So in our workspaces CSS directory, we should see a file named importStyles.css 0:50 containing simple layout background and color styles. 0:57 Again, don't worry about these styles right now, 1:02 we just wanna see how this import statement will affect our page. 1:04 So now we'll go ahead and specify the path to that CSS file by 1:10 writing css/import-styles.css. 1:14 So now we will save our index.html file. 1:22 And when we refresh our preview, 1:26 we now see how the page has imported the styles from importStyles.css. 1:29 Cool. 1:33 We can also import a style sheet from within a style sheet. 1:34 So let's go ahead and remove. 1:38 The import statement from our html file. 1:40 So I'm going to select it. 1:43 Then cut it from the style block and now we can go ahead and 1:45 delete these style tags since we no longer need them. 1:49 Then we'll save our index.html file. 1:54 And move over to our style.css file. 1:58 And here, we can paste the import statement at the very top 2:01 of our style sheet. 2:06 Now it's important to remember that the import statement must precede all 2:08 other CSS styles in a style sheet in order for it to work properly. 2:13 So always keep the import statement up top. 2:17 Like we're doing here. 2:19 Now because our style.css file is already inside the CSS directory, 2:22 we don't need to include the directory name in our path. 2:27 So I'll just go ahead and remove the css/ and 2:30 we'll just keep the file name inside the quotation marks. 2:34 [BLANK_AUDIO] 2:39 All right. So 2:41 when we save our style sheet and refresh the browser preview, 2:42 notice how nothing has changed, because we're still importing the same CSS file. 2:47 The difference is that we're importing it from our style sheet instead of 2:52 our HTML file as we were doing earlier. 2:56 So this import method can make our CSS more modular, 2:59 by letting us separate our CSS into different styles. 3:04 So, while the page may link to one main style sheet, the style sheet can import 3:08 other style sheets for say, base styles layout, typography and so forth. 3:14 Now the drawback to using this at import method is site performance. 3:21 As each of these import statements requires a new request to the server. 3:26 So if we have too many, they can be expensive in terms of load time. 3:31 So let's quickly review some of what we've learned so far about CSS. 3:37 CSS is a stylesheet language that handles the presentation layer of a web page. 3:40 There are three different ways we can add CSS, but the most common and 3:47 most efficient method is with an external stylesheet that's linked from the head of 3:51 the document. 3:55 And the .css file extension is what tells the browser that the file is 3:56 a style sheet. 4:00 The styles written in a style sheet can be shared across multiple web pages. 4:02 Coming up next we'll learn the different ways we're able to 4:06 target HTML elements and apply styles to them with CSS selectors. 4:09