ANNOTATED INSTRUCTIONAL DOCUMENTATION

External Styles Sheets Using DIVs for Page Layout

Using External Styles to create faster loading web pages.

Claudia Faulk Trudy Pachon Mike Pottbebaum Brett Berish

Instructional Aid Documentation for External Style Sheets Using DIVs for Layout Course
Material

edtec 5 7 2 : tec h n o l o g y f o r c o u r se delive r y

Instructional Aid: Objectives

By the end of this series of Lectures the student will be able to:
Build a CSS external style sheet
Attach a CSS external style sheet to a series of documents
Build pages with IDs and DIVs
Create horizontal and vertical navigation using CSS to control the rollovers

Instructional Aid: Outcomes

Mastering these objectives the learner will be able to:
Create webpages that are lean on HTML and styled with CSS so that they load quickly
Create a templete page and use it to build a series of pages off of the one CSS page.

Teaching Tips are provided on each page to provide specific instruction for the
individual Powerpoint Slides

CSS: Using IDs to place DIVs throughout your pages

DIVs are used as containers that you can put information into. You generally nest them. They have
some qualities similar to tables except each piece is a separate element. It will all make more sense as
you follow along and try out the lecture and view the demo.

IDs are selectors that you use to identify each unique part of your web page, like a banner, your
navigation, or main content area. They are similar in some ways to classes, you can define them in
your CSS. One important difference is that each ID can only be used once on each page. A class can
be used multiple times. We previously used IDs when we worked with jumplinks.

When we define an ID in CSS, you use the hash mark # to denote that it is an ID. For example:
div#banner {text-align: left;}

You do not use the hash mark in the HTML coding. You would write it like this:
<div id=banner> Your banner information would go here and then close the tag. </div>

Teaching Tip:
DIVs have certain names that are commonly used. Talk about this.
#container - for a DIV that holds all the information on a page
#banner - might hold the header and top navigation
#header - would be a nested DIV located inside the Banner that holds your logo information
#topnav - might be located under the the header and hold your main navigation if you chose to use a
horizontal style navigation

#content might be the middle section of your pages. It could hold the
#leftcol - a column of infomration that floats to the left. You can use this for vertical navigation
#rtcol - a column that might contain most of your text and images that floats to the right

Implementing DIVs and IDs:

Start an HTML document as usual and also an external style sheet. Be sure to link the style sheet to
the HTML document so you can test as you go along. Add each part one step at a time so you can see
how it works.
I named my external style sheet: divstyles.css
So I will write out my style sheet link like this (be sure to place in the head of your document):

<link rel=stylesheet type=text/css href=divstyles.css>

The first item we will define in our style sheet will be our body tag. I want my page to be at teh top of
the page when it is viewed in the browser window
/* my CSS page starts here */

body {background-color: #cccccc;

margin: 0;
padding: 0; }
I have no margin and no padding so the page will start right at the top of the window.
Pretty awesome. And powerful.

Teaching Tip:
Margin and padding usage can be confusing. Be sure to give examples of how each one effects the
content.

The Container
The first DIV tag and ID we will use will be a container that will hold all of the rest of the content for
our page. We will give it the ID of container. You can use whatever name you want, but remember - if
the name makes sense you will be able to figure out what it stands for easily when you look back at
the code.
Define it in your style sheet and then place it in your html document.
In the CSS:
#container {background-color: #ffffff;
text-align: left;
width: 760;
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
By using text-align: left in our container, our actual text will align to the left. Using the auto margins
right and left also centers our page.

Teaching Tip:
You can shorten the writing in certain selector styles by writing all in one line starting with the
positions
Top, RIight, Bottom and then Left (clock-wise)

margin: 0 auto 0 auto

Auto means whatever amount of space there is outside the container div will be broken in to two
equal pieces, automatically. Or automagically.

Placing the information in the HTML

HTML:
<body>
<div id=container>

</div>
</body>
</html>
Add this code inside the opening and closing body tags. Try it in your browser and you should see a
white box on a grey background. The white box is our container. We will add more information inside
of it - nested div tags - 3 sections: A header, a main content area and a footer.

Teaching Tip:
Be sure to create the pages while you are reading the lecture. It helps to visualize and actualize.

Defining the Header

CSS:
#header {background-color: #dddddd;
height: 200px;}

Add this code to your CSS page and save. I added a color and an height so you can see where the
header is once you add it to your html document.

HTML:
<div id=header>

</div>

Add this code INSIDE the container div tags. Test in the browser and you should see the medium grey
outside the white box with a lighter grey band at the top. Your body code should look like this now:

<body>
<div id=container>
<div id=header>
</div>
</div>
</body>
</html>

Teaching Tip:
Container, header, banner, topnav, content, leftcol, rightcol, and footer are all common names for
DIVs.
Use tabs to indent your content. It makes opening and closing DIVs easier to track.

Banners and Navigation

I indent the header div tags so I know it is nested within the container div tags. Next we will add a
banner div and a navigation div. These will nest inside the header div.

#banner {height: 125px;

text-align: center;
padding-top: 30px;}

#nav {background-color: #eeeeee;

text-align: center;
height: 25px;
padding-top: 10px;
padding-bottom: 10px; }

HTML code:

<div id=banner> <h1>We can put a BIG BANNER here</h1>

</div>

<div id=nav>
This is our space for navigation.
<a href=DIVtest.html> Our Div Page</a>
</div>

This code should nest inside the header div tags. I added a little text to make it more interesting.

Teaching Tip:
Be sure to be typing in the demo as you talk to your live class. Go back and forth between both
documents and the Browser window to check for changes.

The Content Section

Now we will add the main section of our page.

CSS:
#content {margin-top: 0px;
padding-top: 0px;}

HTML:
<div id=content>

</div>

Place this code UNDERNEATH the closing header div tag. We will nest two div columns inside of this
div.

Teaching Tip:
The content area is the section that will change on each page.

The Left and Right Columns:

CSS:
#leftColumn {background-color: #dddddd;
float: left;
width: 200px;
padding-bottom: 15px;
padding-left: 10px;}

#rightColumn {background-color: #ddddee;

float: right;
width: 520px;
padding-bottom: 15px;
padding-left: 10px;}

HTML:
<div id=leftColumn><h3>SUBHEAD</h3>
Put some text in here.
</div>

<div id=rightColumn><h3>SUBHEAD</h3>
Put some text in here.

Teaching Tip:
Explain float. Left and right. Very useful piece of CSS.

I added padding to keep the

text from the edge. Make sure
the width of your columns is
less than the total width of
your container div. If you add
margins, you must add those
amounts as well. You can set
absolute heights or delete the
colors - they are mainly so you
can see where the pieces are.

Your HTML Page Should look like this:

Add these two divs inside the content divs. They are nested divs. Your body sections should look like
this now:
<body>
<div id=container>
<div id=header>
<div id=banner> <h1>We can put a BIG BANNER here</h1>
</div>

<div id=nav>
This is our space for navigation.
<a href=DIVtest2.html> Our Div Page</a>
</div>
</div>

<div id=content>
<div id=leftColumn><h3>SUBHEAD</h3>
Put some text in here.
</div>

<div id=rightColumn><h3>SUBHEAD</h3>
Put some text in here.
</div>
</div>
</div>

</body>
</html>

The Footer -- at the bottom of the page

The footer is used to place copyright information, navigation, etc.

CSS:
#footer {background-color: #efefef;
margin-top: 12px;
margin-bottom: 12px;
padding-top: 5px;
height: 25px;
clear: both;
text-align: center;}

HTML:
<div id=footer>You can put copyright info here or bottom links
</div>

Add this after the closing content div. And you are done.
Check it out. Add more copy. Or images. Adjust any of the parts. I will upload the example I made so
you can see if yours matches. It will be in the Exercise 8 demos.
Have fun but KEEP It SIMPLE. Add slowly, test often.

Teaching Tip:
Remind them to take it one step at a time, rather than adding a large quantity of information and
having a mistake appear.

Review Questions:
What are some commonly used DIV names?
What symbol must be placed before the DIV selector name (#)
Do you use the # mark in the HTML?
how often can you use a specific ID on a page?