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

The float property is used to wrap images around html elements such as images, as shown in this example.

In this tutorial we will create this effect.

First we will need to setup our basic html page structure. Once complete save your file as float.html.

Now we will need to enter a block of text in our body. Make sure the block of text is long enough so that there is enough text to wrap around the image you are inserting.

Next we will insert the image that will be used. You can use your own image, or use the one provided in the downloads folder corresponding to this lesson.

<img src="beach.jpg" alt="mywebsite.com" width="200" height="200">

Now to create the float effect create your style sheet and insert the following style declaration.

<style>
img {
float: right;
margin: 0 0 10px 10px;
}
</style>

float: right;, means the image will appear on the right of the text. We could also use float; left; if that was our intention. In that case the image would appear on the left side of the text.

We have also added a margin so there is a space on the left and bottom side of the image.