Midterm Review cont.

In class today, we went created an html 5 document that is linked to an external css. This post was the result of that document.

First the html page:


<title>My Layout</title>

<meta charset=”utf-8″ />

<link rel=”stylesheet” href=”style.css”

type=”text/css” />



<section id=”box”>


<h1>This is smy header</h1>

<p>Welcome to my page</p>


<nav>these are my links</nav>

<section id=”content”>


<p>This is my content</p>


<section id=”ads”>

these are my ads



this is my footer



Now the css page:

body {

background-color: tan;

font-size: medium;


#box {

border: 1px dotted blue;

width: 506px;

margin-left: auto;

margin-right: auto;

header {

display: block; (if browser doesn’t support html 5)

border: 1px solid blue;

text-align: center;

width: 504px;

height: 50px;

line-height: .5em;

letter-spacing: .1em;


h1 {

font-size: 120%

margin: 0;

padding: 0;


header h1, h2 {

font-family: “Arial”, sans-serif; }

p {margin: 0;}

nav {

display: block; (if browser ‘  ‘)

border: 1xp solid blue;

width: 100px; or 25%;

height: 300px;

float: left;


section {display: block;}

#content {

border: 1px solid blue;

width: 300px;

height: 300;

float: left;


#content h1 {


#ads {

border: 1px solid blue;

display: block;

height: 300px;

width: 100px;

float: left;}

footer {

display: block;

border: 1px solid blue;

clear: both;

width: 504px; }


About cruxstew

I'll update this when I get a chance.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s