Part of Lesson Plan: Text, Divisions, Borders and Rounds with CSS

Activity Overview / Details

Have all students look at their web pages that they made yesterday.  Have them open the web page up in Notepad or other basic text editor and also in their web browser they have available.  Note that the last objective, rounded borders, will not be available in Internet Explorer 8 and older, but will be with IE9 and later and just about all the other browsers.  They should also go to a CSS tutorial/demo web site on the Internet like http://www.w3schools.com/css/

Take a look at your first MUSIC page made with CSS yesterday.  It’s not that great looking yet, is it but at least we learned some CSS.  It’s going to get better, a lot better.

Now turn off you monitors and watch my screen.  Here’s my OLD music page, I call it "music1.htm" and now here’s how my final music page is going to look, my "music.htm" page.

(Show them the "music.htm" file.  See resources.  This is a new file with new CSS.  Note, the background picture of clouds must be in the folder called “images” for this to work.)

This is QUITE an improvement, right?  Notice all the things I’ve done.  I’ve made divisions to house different parts of the web page:  a container that holds everything, a header, sidebar and a place for the main content.  I’ve made the main container of the web page to be 1000 pixels wide.  And I’ve made a division to hold the paragraphs together to look more uniform and easy to read.  I’ve also made rounded corners for all the divisions and containers.  Perhaps overused here, at least it demonstrates how they can be used. 

Even though this looks like a lot of objectives to learn in 1 or 2 days, you’re going to learn the following:

1. Text:  Alignment, size and font family.
2. Centering a web page but using a set width for the container of the web page.
3. Divisions:  The importance of using divisions in a web page and how to make and use divisions such as Container, Header, Sidebar, Main Content.
4. Borders:  how to change the appearance of borders.
5. Giving your divisions some outside white space, called “margin” and interior space, called “padding.”
6. How to add a new style of borders called “rounded edge.”  You’ll see what browsers this works with and which ones it doesn’t work with.

This is all really quite simple if you are careful to follow the rules.  So be careful but also don’t hesitate to experiment with the possibilities.  This is design and artwork here so please don’t be afraid to express yourself (after you learn the basics).