The @import is a rule allowing you to import one style sheet into another.When you are working on a complex website and stuck to managed many stylesheet, then @import is very helpful .The @import rule is another way of loading a CSS file.

In this tutorial we are going to explain,How we can use @import  for importing one style sheet into another.

Loading a CSS file using @import you can do this by two ways.The simplest way is load CSS file within the header of your document, like so:

@import with in header

Here we are importing style.css file in index.html header section.

 

CSS file : Style.css

Copy the below code on your style.css file

#box{

width:200px;
height:200px;
background-color:rgb(14, 179, 142);

}

HTML file : index.html

In index.html we are importing style.css in header section inside style tag

<!DOCTYPE html>
<html>
<head>
<title>CSS @Import</title>
<style type="text/css">

@import url('css/style.css');

</style>

</head>
<body>

<div id="box"> </div>

</body>
</html>

Note : That is not a best method for keeping @import inside HTML. @import very useful when we import a style sheet  within another stylesheet. if you want to use any css file on HTML page, then use below style for importing them.

<link rel="stylesheet" type="text/css" href="css/style.css" />

@import with in another style-sheet

Here we are importing style_for_text.css and style_for_border.css in style.css file and linking style.css in index.html

css import more files

 

CSS file : style_for_text.css

copy below code in style_for_text.css

#box{

font-size:20px;
color:white;

}

CSS file : style_for_border.css

copy below code in style_for_border.css

#box{

border: 5px solid gray;
border-style: ridge;
padding:5px;

}

CSS file : style.css

Here we are importing style_for_text.css and style_for_border.css in style.css

@import url('style_for_text.css');
@import url('style_for_border.css');
#box{

width:200px;
height:200px;
background-color:rgb(14, 179, 142);

}

HTML file : index.html

In index.html linking, style.css file

<!DOCTYPE html>
<html>
<head>
<title>CSS @Import</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>

<div id="box">
CSS @import example
</div>

</body>
</html>

Conclusion:

In this tutorial we have learned about, how we can use @import in header and within another style sheet . Hope you have benefited from it. Keep visiting our websites for more knowledge and information.

For more related blogs check below –