CSS Divisions are yet another very important part of CSS Development and are represented by the
In order to understand the function of a
<div>, let's refer back to the web page we developed using tables. When we created the web page, all the content including text and images were nested in table cells. As we determined, we did not have much flexibility in the positioning of these objects within the cell, or the table itself for that matter.
Divs are similar to table cells, in that they can contain content such as text, images or media objects. The key difference is that Divs offer a much higher degree of customization in formatting and positioning. This includes things like rounded corners, transparency, layering, and complete flexibility in positioning down to the pixel.
Before we begin this tutorial, please open your text editor and setup your basic html page structure as shown. Save the file as div.html on your computer.
Let's go ahead and create a
<div> in our document and fill it with some basic text content.
Enter the following line in your html body:
<div>This is a div, with some text content</div>
Now save your html file and preview the page in your web browser. You will see the line of text appears.
Think of it as a line of text contained within a table cell. If this were a table, it would be a table with one column and one row, equating to one cell.
So far, we have not done any CSS formatting to this
<div>, and we will be exploring that in the next lecture.