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:- you will be able to apply CSS positioning to align content on a web page.
Activities
- Open the index.html file with your text editor.
- The 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
) can be assigned its own unique styles. Some
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. - 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 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:
"list">
We chose the name "list" for our class, but any word would serve this purpose.
- Now that we've created two divs, and assigned them to the "list" class, we can stylize them using CSS. Add the following style definition to your style... Read More
