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:

11,386

Rating:

(86)

Certification Type:

Completion Certificate

Lecture: CSS Classes and Spans

The class selector allows you to apply specific styles to an html element from CSS rules defined in your style sheet. Think of it as setting up a catalog of different styles in your style sheet and referencing these styles when you need to apply them to your html elements.

Let's take a look at an example. In order to create a class we need to define it in our sheet. The syntax to define a class is as follows:

.blueboldtext{
font-size: small;
color: blue;
font-weight: bold;
}

Note that the class begins with a period, followed by the class name. You can give it any name you like.

Let's go ahead and create some other classes as well.

.largegreentext{
font-size: large;
color: green;
font-weight: bold;
}
.underline {
text-decoration:underline;
}

Now let's apply the class to the block of text contained in this column.

We have referenced the class "blueboldtext" and now the text style has changed to reflect this class.

Say for example we wanted to apply a different class to the word "Lorem Ipsum" in our sentence. We can do this using the <span></span> tags.

The updated html code would look as follows:

<p class="blueboldtext"> This is a <span class="largegreentext">sample</span> line of text </p>

Use the <span></span> tags when there is no inline element to apply the class to.

Applying multiple classes can also be easily done by inserting separating the class references with a space.

We will add the underline class to our span.

<p class="blueboldtext"> This is a <span class="largegreentext underline">sample</span> line of text </p>