The @import rule is used to import external style sheet in your HTML document.
Create a Web Page named importrule.html
<!doctype html>
<head>
<title>Working with @import rule in CSS</title>
<style type="text/css">
@import url("example.css");
p{color:blue;}
</style>
</head>
<body>
<h1>The font size of heading tag is 20pt</h1>
<p>The font size of this paragraph is 13pt</p>
<table>
<tr>
<th>living being</th>
<th>shelter</th>
</tr>
<tr>
<td class="code">lion</td>
<td>lion lives in the den</td>
</tr>
<tr>
<td class="code">man</td>
<td>man lives in the houses </td>
</tr>
<tr>
<td class="code">fish</td>
<td>fish lives in water </td>
</tr>
<tr>
<td class="code">bird</td>
<td>bird lives in nest </td>
</tr>
</table>
</body>
</html>
Create a CSS file named example.css
*{margin:0;}
body
{color:#ff0000;
background-color:#ffff00;
font-family:Arial;
}
h1{font-size:18pt;}
p{font-size:12pt;}
table
{background-color:green;
border-style:solid;
border-width:3px;
border-color:blue;
}
th
{background-color:#CVB000;
font-weight:bold;
padding:4px;
}
td
{padding:4px;
}
td.code
{
font-family:sans-serif;
font-weight:bold;
}
The Browser view of above document:
Create a Web Page named importrule.html
<!doctype html>
<head>
<title>Working with @import rule in CSS</title>
<style type="text/css">
@import url("example.css");
p{color:blue;}
</style>
</head>
<body>
<h1>The font size of heading tag is 20pt</h1>
<p>The font size of this paragraph is 13pt</p>
<table>
<tr>
<th>living being</th>
<th>shelter</th>
</tr>
<tr>
<td class="code">lion</td>
<td>lion lives in the den</td>
</tr>
<tr>
<td class="code">man</td>
<td>man lives in the houses </td>
</tr>
<tr>
<td class="code">fish</td>
<td>fish lives in water </td>
</tr>
<tr>
<td class="code">bird</td>
<td>bird lives in nest </td>
</tr>
</table>
</body>
</html>
Create a CSS file named example.css
*{margin:0;}
body
{color:#ff0000;
background-color:#ffff00;
font-family:Arial;
}
h1{font-size:18pt;}
p{font-size:12pt;}
table
{background-color:green;
border-style:solid;
border-width:3px;
border-color:blue;
}
th
{background-color:#CVB000;
font-weight:bold;
padding:4px;
}
td
{padding:4px;
}
td.code
{
font-family:sans-serif;
font-weight:bold;
}
The Browser view of above document:
No comments:
Post a Comment