Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements
×
More

Lecture Notes

Course: CSS Fundamentals View Course Outline


Created by:

YouAccel

Lectures:

32

Duration:

1h 47m 20s

Skill Level:

Beginner

Language:

English

Students Enrolled:

8,206

Rating:

(88)

Certification Type:

Completion Certificate

Lecture: CSS Divisions - DIVs

CSS Divisions are yet another very important part of CSS Development and are represented by the <div></div> tags.

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.