CSS - @import rule


Import permit to add an extern CSS file into a CSS file.

The @import rule allows users to import style rules from other style sheets

You can also import a css file through the HTML link element

This statement has a cost as it seems to make always an an HTTP request.


@import "mystyle.css";
@import url("mystyle.css");


Import of bootstrap:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

// Add a custom rules here
.container {
    margin-top: 10px;
<!-- And we can use the bootstrap CSS rules -->
<button type="button" class="btn btn-info">A bootstrap Button</button>

Documentation / Reference

Discover More
CSS - Media Type (Screen, Paper, ) - Medium

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use: on a screen, sans-serif fonts when displayed when printed, and...
CSS - Preprocessor

A preprocessor takes an arbitrary source file and converts it into something that the browser understands. Preprocessors implements features that browser doesn't support natively such as: variables...
HTML - The link element (inter-document relationships)

The link represents metadata that expresses inter-document relationships. hyperlink The link element can be used only within the head element. where: media is a list of media query separated...
Javascript Module - Import (Es Module)

This page is the import statement defined in the es module specification The ES6 import is: a function for dynamic import (performed at runtime time) or a statement for static import (performed...
Media Query - Targeting a styling rule to a screen device

A media query permits to target precisely the characteristics of a device to the styling rules
WebPack - Module

in Webpack Webpack modules support the following module dependency definition statement: import statement of ES2015 require() statement of CommonJS define and require statement of an AMD ...

Share this page:
Follow us:
Task Runner