UNIT 3 > MODULE 2

Lesson 1: Layout With CSS

Overview

In this module, you will learn two techniques for controlling the layout of content on your web page: using CSS and HTML tables. So far in this course, your content has been displayed in a single column, and most content has been aligned on the left side of the page. So far in this unit, you have mostly been using CSS to decorate text. In the current lesson, we will explore some additional techniques using CSS to arrange content into multiple columns.

Using CSS you will arrange the two list (Required Projects and Client Sites) to be side by side in two columns.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Open the index.html file with your text editor.
  2. The <div> tag, short for "division", is a special tag that is particularly useful for applying styles to blocks of text within an HTML document. It is often used to divide a web page into multiple sections. Then each section (or <div>) can be assigned its own unique styles. Some <div> sections might be assigned a particular background or border, or have special formatting that sets their text apart. Some may appear on the left side of the page, while others appear on the right.
  3. Your page currently has two lists, a Required Projects list and a Client Sites list. Each list has a heading immediately above it. Let's say we want to add a border around each list, and include the heading inside the border. First, you must surround each list with an opening and closing <div></div> tag. Since we want each of these lists to have a similar look, we'll assign a class to each list, and will later define the style that class using CSS. Your opening div tag should looks something like this:

    <div class="list">

    We chose the name "list" for our class, but any word would serve this purpose.

  4. Now that we've created two divs, and assigned them to the "list&quot class, we can stylize them using CSS. Add the following style definition to your style sheet (in the <style> section of your document. Note that in CSS, each class is preceded by a period (.) :
    .list {
     border: thin solid green;
     margin: 2%;
     padding: 2%;
     width: 45%;
     overflow: hidden;
     }
  5. Save, refresh, and check your web page. Try manipulating the style definition that you just entered to see what changes result.
  6. Now, let's position these two divs beside one another in two columns. In order to do this, we'll be defining a style for one div that's different than the style of the other div. So, we're going to have to assign a unique id to each div. The opening tag for each div will then look something like this:

    <div class="list" id="leftlist">

    <div class="list" id="rightlist">

    Again, the id's we chose are just labels - they can be anything, as long as we remember them so we can stylize them in the next step.

  7. To display the lists side by side instead of on top of one another, all you need to do is " float" one of the div's to the left or right of the other one. See below for how to accomplish this using CSS. Note that in CSS, each id is preceded by a # symbol. Can you guess what your page will look like before you save, refresh, and look?
    #leftlist {
    float: left
    }
    #rightlist {
    background: #ff9;
    }
  8. Experiment with other CSS properties to the class and both id's that you created. Get creative and explore the power of CSS!
  9. When finished, save you new improved index.htm file.

Exploring Further

The topic of using CSS for positiong is a huge subject and there is much more to learn than is covered in this lesson. For students who want to take this a step further, there are many resources and tutorials available online.

As a starting point, we have provided a Boring Looking CSS Resource List. As the title implies, this is a boring looking page with plenty of good resources for learning more about CSS. To learn about CSS, follow the links on the page, then apply what you learn to the boring-looking resource list to see if you can make it look more attractive.

If you get stuck, we have also provided Better Looking CSS Resource List. Feel free to study our source code to see how we've attained the new and improved look and feel.

Handouts/Online documents

All done?

Show your instructor your results before starting the next lesson.