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 Font Properties

In this lecture we will explore the font property to set various style declarations for text, such as font-family, style, size and line-height.

We will be working on the same file we worked with in the last lecture.

To begin, we need to create a class that will be used to change the font style of a paragraph of text in our body.

Let’s call this style textstyle.

There are several style properties we can use when it comes to font styling. We will create the properties then explain what each one is used for.

font-family: Verdana, sans-serif;
font-size: large;
font-style: oblique;
Line-height: 200%

The first property is font-family. This allows us to change the font-face of the text. The reason we specify a font-family, is because your website visitors browser, may not support the first font specified, in this case Verdana. If not, the browser will use the second font, and so on.

The next declaration is font-size. Tthis allows us to change the size of the font. There are many possible values, ranging from xx-small to xx-large.

font-style allows us to make the text, italic or bold.

Line-height allows us to change the spacing between each line of text in a paragraph. The default line height in most browsers is about 110% to 120%. So any value above this amount will increase the spacing, and any value below will decrease it.

We will add this class to the sixth paragraph. Before we do, let’s see what the original looks like in our browser.

Now let’s add the class, and see the final result.