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 Transparency

We can define the level of transparency or opaqueness of an image using the opacity declaration.

Before we begin, setup your basic html structure and save the file as opacity.html.

Now, create a <div>, and insert the image in the downloads folder corresponding to this lecture.

Next, setup a style sheet, and insert the following declaration:

img {
opacity: 0.4;

This will set the opacity of the image in the <div> to 40%.

We can add additional effects using the opacity declaration as well. Let's create a hover effect so that the image goes from 40% opacity to 100% when your mouse is hovered on top of the image.

Add the following declaration in your style sheet:

img: hover {
opacity: 1.0;