code padding: 2px;
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
code {
font-family: courier;
}
code.foreground {
color: #000000;
display: block;
font-size: smaller;
background-color: #d6d6d6;
padding: 2px;
margin: 5px;
}
code.background {
display: block;
padding: 2px;
margin: 5px;
}
body {
font-family: arial, verdana, sans-serif;
background-color: #ffffff;
}
p.abstract {
font-weight: bold;
}
div.figure {
font-weight: bold;
padding-bottom: 12px;
padding-left: 12px;
}
</style>
</head>
<body>
<h1>Modularized Style Sheets</h1>
<p class="abstract">You can use the <code>@import</code> rule to help develop
modular style sheets that enable re-use and save bandwidth.</p>
<p>In order to include rules from a different style sheet, you have to
import the whole other style sheet into the one you are writing. Therefore smaller
style sheets make for more reusable chunks.</p>
<p>The following line imports a style sheet called codeStyles.css</p>
<code class="foreground">@import "codeStyles.css"</code>
</body>
</html>
Related examples in the same category