Finally, another method of using an external style sheet is with

a CSS import statement.

So, the @import statement let's us import CSS from other style sheets.

So, it shares some of the same advantages as linking a style sheet,

like browser caching and maintenance efficiency.

So, back inside the head section of our page, right underneath the link tag,

let's create a new style tag like we did earlier.

[BLANK_AUDIO]

And inside the style block I'm going to

write @import followed by a set of quotes and a semicolon.

And inside the set of quotes,

we'll specify the path to the CSS file we want to import.

So in our workspaces CSS directory, we should see a file named importStyles.css

containing simple layout background and color styles.

Again, don't worry about these styles right now,

we just wanna see how this import statement will affect our page.

So now we'll go ahead and specify the path to that CSS file by

writing css/import-styles.css.

So now we will save our index.html file.

And when we refresh our preview,

we now see how the page has imported the styles from importStyles.css.

Cool.

We can also import a style sheet from within a style sheet.

So let's go ahead and remove.

The import statement from our html file.

So I'm going to select it.

Then cut it from the style block and now we can go ahead and

delete these style tags since we no longer need them.

Then we'll save our index.html file.

And move over to our style.css file.

And here, we can paste the import statement at the very top

of our style sheet.

Now it's important to remember that the import statement must precede all

other CSS styles in a style sheet in order for it to work properly.

So always keep the import statement up top.

Like we're doing here.

Now because our style.css file is already inside the CSS directory,

we don't need to include the directory name in our path.

So I'll just go ahead and remove the css/ and

we'll just keep the file name inside the quotation marks.

[BLANK_AUDIO]

All right. So

when we save our style sheet and refresh the browser preview,

notice how nothing has changed, because we're still importing the same CSS file.

The difference is that we're importing it from our style sheet instead of

our HTML file as we were doing earlier.

So this import method can make our CSS more modular,

by letting us separate our CSS into different styles.

So, while the page may link to one main style sheet, the style sheet can import

other style sheets for say, base styles layout, typography and so forth.

Now the drawback to using this at import method is site performance.

As each of these import statements requires a new request to the server.

So if we have too many, they can be expensive in terms of load time.

So let's quickly review some of what we've learned so far about CSS.

CSS is a stylesheet language that handles the presentation layer of a web page.

There are three different ways we can add CSS, but the most common and

most efficient method is with an external stylesheet that's linked from the head of

the document.

And the .css file extension is what tells the browser that the file is

a style sheet.

The styles written in a style sheet can be shared across multiple web pages.

Coming up next we'll learn the different ways we're able to

target HTML elements and apply styles to them with CSS selectors.