<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Hello World Template">
<meta name="keywords" content="html, hello world, template">
<title>HTML Hello World</title>
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body>
<div class="content">
<h1>Hello Title</h1>
<div class="section">
<h2>H2 title</h2>
<p>
Hello world content... <em>Emphasized Text</em> <strong>Strong Test</strong> Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content, Longer content.
</p>
</div>
<div class="section">
<h2>H2 title more</h2>
<p>
1em = 1 standard font size = 16px = h4
</p>
<p>
padding: top right bottom left;
</p>
</div>
<address>
Footer. Copyright (C)
</address>
</div> <!-- class="content" -->
</body>
</html>
common.css:
body {
text-align: center;
}
div.content {
border: solid 1px #5e8eab;
width: 650px;
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
background-color: #c5e1ed;
padding-top: 0.5em;
padding-bottom: 0.5em;
color: #2d444f;
margin-top: 0;
}
h2{
border-left: solid 1.2em #5e8eab;
padding-left: 0.3em;
margin-bottom: 1em;
}
p {
line-height: 1.5em;
color: #555555;
margin-left: 1em;
}
.section {
width: 40em;
padding-top: 0.2em;
padding-left: 1em;
text-align: left;
}
address {
font-size: 0.75em;
font-weight: bold;
font-style: normal;
color: #5e8eab;
border-top: solid 9px #c5e1ed;
padding: 6px 10px 10px 10px;
margin-top: 30px;
text-align: right;
}
No comments:
Post a Comment