How to Import one css file to another( use of @import )
In css, You can import a css file into another css file using @import.
So, let’s start with @import demo My Directory Structure Is :
Here In Css Folder One other css file that name is Other.css.
Now Show Example HTML file is :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
@import url('Css.css');
</style>
</head>
<body>
<div class="test1" align="center">
Text1 Is Here
</div>
<div class="test2" align="center">
Text2 Is Here
</div>
</body>
</html>
Css.css File Is :
@import url('CSS/Other.css');
.test1 {
margin:10px;
padding:10px;
background:#EEAC48;
color:#000000;
border:2px solid #fff;
border-radius:3px;
box-shadow:0px 0px 3px #999;
font-size:36px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Other.css Is :
.test2 {
margin:10px;
padding:10px;
background:#EEAC48;
color:#000000;
border:2px solid #fff;
border-radius:3px;
box-shadow:0px 0px 3px #999;
font-size:36px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Output Is :
So, let’s start with @import demo My Directory Structure Is :
Now Show Example HTML file is :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
@import url('Css.css');
</style>
</head>
<body>
<div class="test1" align="center">
Text1 Is Here
</div>
<div class="test2" align="center">
Text2 Is Here
</div>
</body>
</html>
Css.css File Is :
@import url('CSS/Other.css');
.test1 {
margin:10px;
padding:10px;
background:#EEAC48;
color:#000000;
border:2px solid #fff;
border-radius:3px;
box-shadow:0px 0px 3px #999;
font-size:36px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Other.css Is :
.test2 {
margin:10px;
padding:10px;
background:#EEAC48;
color:#000000;
border:2px solid #fff;
border-radius:3px;
box-shadow:0px 0px 3px #999;
font-size:36px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Output Is :
Comments
Post a Comment