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

CSS allows many different text formatting options. We have worked with some of them in the past, but others will be new to you.

We will go through a number of them in this lecture. To begin please open the exercise file located in the downloads folder, corresponding to this lesson.

Once open, preview the file in your web browser. The file consists of a number of paragraphs of text.

Each block of text is contained within a <div> tag.

We also have a style sheet that contains a number of classes relevant to text formatting.

We will go through each definition contained within the classes, to explain what they are used for.

The first class, contains a color style declaration. We have worked with this in the past. The color declaration will change the color of the text it is applied to.

Let's apply this class to the first paragraph element.

Now save your file and load the page in your browser to see the results. The first paragraph is now red.

The next two classes, are almost identical to the first. They are color declarations. The difference is these two declarations use color codes. The first declaration uses a web color code, and the second uses an RGB color code. If you are unsure what this means, please review our lecture on color codes.

We can change our class to any of these to see the difference.

The next class, has a letter-spacing property. This allows us to adjust the amount of space between each character in word, sentence or block of text. This property has a value of 10px. You can increase this value for more spacing or decrease it for less.

Let's apply this class to the second paragraph, and see the results.

Save the page and reload it in your browser.

In addition to letter-spacing, we also have the word-spacing declaration. This allows us to adjust the spacing between words rather than letters.
Apply this to the third paragraph to see the results.

The next class property text-align allows us to align our text, using left, right, center or justify, values. The default, is left. Change this to center and see what happens.
Apply this class to the third paragraph to see it's effect.

Next we have the text-decoration property. We have worked with this one before. The value for this property is underline. Other possibilities include, overline, line through and blink.

You can replace the underline with each one and apply the class to a paragraph to see the results.

We also have the text-transform property which allows us to change text to capitalize all letters in the text it is applied to. You can also change the value to lowercase, to do the opposite.