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
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.