Using @import in CSS

Asked

Viewed 443 times

1

I would like to know about the use of @import to import style sheets within another style sheet, for example:

Inside the archive css style.:

@import url("css/layout.css");

body{
    background: #F0F0F0;
}

.container{
    width: 80%;
    margin: 0 auto;
... 
}

  • I need to declare something else so I can use the styles of css layout., as in HTML for example?

  • It slows the loading of pages this way compared to the direct declaration in the head?

css

  • Using @importcan have a negative impact on your site’s performance. According to a post by Steve Sounders, unlike the <link> tag, if you have multiple @importcommands in sequence, they may not be loaded in parallel at the time your page opens. Source https://answall.com/questions/8763/como-utilizar-import-em-um-arquivo-css

1 answer

1

According to the website of Mozilla, all these forms are correct:

Examples

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Some forms already include the included media query to define whether the CSS will only be for some specific type of screen or for printing.

As already said, this form is not ideal to import a style sheet and should be used only in the latter case. The best way to link style sheets is still by <head> of html.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.