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 :

Comments

Popular posts from this blog

How to create a custom form in wordpress

My new Jquery Plugin name is krDailog