Activity Industry Sector
Information & Communication Technologies

Activity Originally Created By: Dave Niemeyer


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

Activity Overview / Details

I’ll now show you just one more such division:  the header, and then a new selector called a class.  But after that you’re on your own, so pay attention carefully.

We’ll make this web page just like a commercial web page with a header at the top.  A header could contain a business name, logo, picture, etc.  And typically every page at the site will have the same header for the sake of uniformity.  Just for the sake of seeing our divisions, today we’re going to give all our divisions a simple black line border all around.  We can remove them later if you want.

We’ll give the header some space around it; that’s called “margin.”  We’ll make it have about 20 pixels of margin all around.  And then to keep the words from mashing up against the border, we’ll give it some space INSIDE the header.  That inside space is called “padding.”  We’ll give it about 20 pixels of padding.

Here’s the CSS for my header:


#header {

            padding: 20px;

            margin: 20px;

            border: thin solid #000000;



And then to invoke it, down in the HTML after we’ve started the container, we’ll put this:


<div id="header">


  <!--end header-->



That text could be anything you want, but remember, every page in your site about you will have this same header.

And finally you’ll make something new called a “class.”  We’ll put the paragraphs in the main content within a division with a class called “story”  which will have it’s own bold look with a colored background.  Classes can be used over and over.  They’re recyclable.  Use it anytime you need.  Classes start with a dot rather than a hash.   Here’s how to do it:


  1. In the CSS make this rule:


      .story {

            background-color: #E3E4E6;

            font-family: Arial, Helvetica, sans-serif;

            font-weight: bold;

            border: thin solid #333;

            padding: 10px;



     2.  You don’t need your rule for the paragraphs so get rid of it in your CSS.

     3.  And then in the HTML above the first paragraph where you’re talking about your music, put this:

<div class="story">

     4.  Then after your paragraph turn off the div with   </div>

     5.  You can envelop a group of paragraphs, like I did talking about my favorite groups and singers, with this same division but don’t end it until you’re done with all the paragraphs.  That unifies the text into one color background.