CSS @import

Method Type: User (.CSS)
(this means that the method is handled by the webmaster)

Introduction:

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document. Its main purpose is to separate the document's content elements like layout, fonts and colors.

How the "CSS @import" works:

The CSS @import allows CSS to import other CSS. @import looks like this:

<style>
@import url(B.css) ;
</style>

When @import is used the web browser will not start downloading the imported CSS before it has first downloaded, parsed and executed the initial CSS. Once the web browser finds out about the imported.css it will start downloading it but the delay coming from the inability of the web browser to download both stylesheets in parallel is diminishing the load speed of the page.

Avoiding CSS @import provides the following Advantages:

• Stylesheets can be downloaded in parallel
• Reduced page load time

How to avoid CSS @import:

Avoiding @import when using external CSS is a good way to increase the loading speed of a page. As the web browser cannot download stylesheets in parallel you will need another way to reference your CSS without using @import.

To avoid using @imported you can use the LINK tag for each CSS as shown below:

<link rel='stylesheet' type='text/css' href='A.css'>
<link rel='stylesheet' type='text/css' href='B.css'>

In a very few cases, you can use @imported to download in parallel with the following syntax, however this might cause JavaScript errors.

<style>
@import url('A.css');
@import url('B.css');
</style>

Bear in mind that this is only usable when you are not referring to the external CSS via an inline CSS.