Professional Documents
Culture Documents
Teaching Tips are provided on each page to provide specific instruction for the
individual Powerpoint Slides
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
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 */
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)
Auto means whatever amount of space there is outside the container div will be broken in to two
equal pieces, automatically. Or automagically.
</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.
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.
HTML code:
<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.
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.
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.
<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>
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?