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 Margins

Now that we have an understanding of IDs, Classes and DIVs, we can explore some of the style definitions that allow us to customize the look of our html elements.

We will begin with Margins. Margins allow you to add spacing around the perimeter of your element. A margin can be added to any one side or a combination of sides.

Let's add some margins to the <div> we created in the last lecture. In order to see the bottom margin, we will need to place a line of text, underneath the <div>. Enter a line of text in a new <div>, underneath your original.

<div>This is another sample line of text</div>

Now to apply the margin, we need to add the margin definition to our div1 ID, since we are adding a margin to div1.

We can add a margin on all sides of the <div>, by entering:

Margin: 10px; - This adds a 10 pixel margin around each side.

Save the file and preview it in your web browser. The <margin> has been added on all sides of the <div>.

Say for example we only wanted to apply the <margin> to the bottom and left side. Then we would need to add the following to our definition:

Margin: 0px 0px 10px 10px;

The first value is the top margin, followed by the right, bottom and left. Here we have added a 20pixel margin to the bottom and left side.

Save and preview the file to see the final result.