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 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 –
- How To Make Simple Responsive Form Using CSS
