This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The @import statement lets us import CSS from other style sheets. It shares some of the same advantages as linking a stylesheet, like browser caching and maintenance efficiency.
Using @import
@import 'reset-styles.css';
The @import statement must precede all other CSS rules in a style sheet in order for it to work properly.
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
You need to sign up for Treehouse in order to download course files.
Sign up