Using @import in CSS

Question

Using @import in CSS

Navigation

#1 by (1 votes)

1

I would like to know how to use @import to import style sheets into another style sheet, for example:

Inside the style.css file:

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

body{
    background: #F0F0F0;
}

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

I need to declare something else so that I can use layout.css styles , as in HTML for example?
Is page load slower in this way compared to direct headline declaration?

css

asked by anonymous 21.05.2017 / 18:14

1 answer

What's wrong with this query? How to make two RadioButtons enable and disable fields

score 1 · Answer 1

According to the Mozilla website, all of 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 CSS will only be for some specific type of screen or for printing.

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