Tuesday, September 29, 2009

File worked on in class

<html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">
<!--
p.this-style {
text-align: center;
font-weight: bold;
}
p.that-style {
text-align: right;
color: blue;
font-family: monospace;
}
p.other-style {
color: red;
font-weight: normal;
font-family: sans-serif;
}
.span-green {
color:purple;
font-weight:normal;
font-style:italic;
font-size:2em;
background-color:pink;
}
-->
</style>
</head>
<body>
<div style="text-align:center;width:80%;">
<div style="width:1px; background-color:silver; padding:20px;float:left;">
<p class="this-style">Here <span class="span-green">three types</span> of paragraph style are identifed in the head.
</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="that-style">This is another style.</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="this-style">Many paragraphs can be styled the same <span class="span-green">without having to repeat the code</span>.</p></div>
<p class="other-style">You can create as many styles as you want. <a href="http://www.google.com">google</a>
</p>

</div>
</body>
</html>

No comments: