Chapter 3 and 4 were all about CSS. It taught how to use spans and divs, style sheets, specific comands for borders, image editing as well as more.
Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Chapter 4</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper1">
<h1>Chapter 4 website</h1>
<div id="wrapper2">
This is random text which has been placed here to add content to the page
<h2>Definition lists</h2>
<dl>
<dt>Definition<dt>
<dd>This is an example</dd>
<dt>Lists</dt>
<dd>This is an example</dd>
</dl>
<p>
<h2>Ordered lists</h2>
<ol type="A">
<li>Ordered</li>
<li>List</li>
</ol>
<p>
<h2>Unordered lists</h2>
<ul type="square">
<li>Un-</li>
<li>Ordered</li>s\
<li>List</li>
</ul>
<p>
<h2>Physical style elements</h2>
<b>Bold</b><br>
<u>Underlined</u><br>
<i>Italics</i><br>
<p>
<h2>Hyperlinks</h2>
<a href="http://google.com%22%3egoogle%3c/a%3E%3Cbr>
<a href="http://google.com%22%3egoogle%3c/a%3E%3Cbr>
<p>
<h2>Images</h2>
<img src="image.JPG" />
<p>
<p id="footer">This is an example footer</p>
</div>
</div>
</body>
</html>
here is the css:
body
{
background-color: #FFCCCC;
color: #000000;
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
margin: 0px;
}
h1
{
background-color: #CC0033;
font-size: 30px;
padding-left: 5px;
padding-top: 15px;
border-bottom: 1px dashed #000000
}
h2
{
font-size: 16px;
border-bottom: 1px dashed #000000;
}
dt
{
font-weight: bold;
}
a
{
font-weight: bold;
font-color: #000000;
}
.dashedborder
{
border: 1px dashed #000000
}
#footer
{
font-size: 8px;
font-style: Italic;
}
#wrapper1
{
width: 800px;
margin-left: auto;
margin-right: auto;
padding-bottom: 5px;
background-color: #FF9999;
border: 1px solid #000000;
}
#wrapper2
{
width: 780px;
margin-left: auto;
margin-right: auto;
}
No comments:
Post a Comment