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 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

Lecture Notes

Course: CSS Fundamentals View Course Outline

Created by:





1h 47m 20s

Skill Level:




Students Enrolled:




Certification Type:

Completion Certificate

Lecture: CSS Display Properties

We can use the display property to change the visibility or positioning of an element, relative to another.

On this html page, we have setup four style definitions.

One for each <div> that we have in our html <body>.

The first definition is for the container <div>.

It specifies the <div> will have a width and height of 400px and a 1px black border.

Inside the container, we have three additional divs, with id div1, div2, and div3.

Each nested <div> has a width and height property set to 50px.

If we take a look at this file in our browser, we can see that by default each nested <div> falls below the other.

Though, what if we wanted each <div> to be displayed next to the other, in a line.

To do that we can add the display property to each <div>, and set the value to inline-block.

Let's refresh our page to see the result.

Now they are all in line.

We can also set the display property to none, if we want to make an element invisible.