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 Padding

Padding creates spacing between the perimeter of an html element and the content contained within it.

In this tutorial we will add padding around the text contained within our <div>.

Similar to margins, padding can be added around all four sides of an element, or only specified sides.

First we will add padding around all sides. To do that, type the following style definition in your div1 ID.

padding: 10px;

Save the file to see the results in you web browser. The spacing has increased from our text - to the perimeter of the <div>.

Increase the padding to 20px to see the difference.

Now let’s add 30px padding to only the top and left.

padding: 30px 0px 0px 30px;