Learn CSS – Part 4: Text Properties

Learn CSS – Part 3: The Font Family and Its Descendants explained all of the font properties used for styling copy for your page. Text properties are different in that it will allow you to add decorations and transformations of your copy.

Learn CSS: Text Properties

Learn CSS – Part 4: Text Properties versus Font Properties

The font property focused on the properties and structure of a font. All fonts have their own characteristics that make them different from one another. That is why there are thousands upon thousands of fonts that have been created to use for various purposes.

Taking copy and moving it to the right, placing a strike through it or MAKING ALL THE TEXT UPPERCASE is how the text properties function

Learn CSS – Part 4: Text Properties – Text-Align

Aligning your copy should be done in a manner that is beneficial to your readers. There should be a method behind the madness and centering copy just because it looks cool, is not a way of keeping your readers interested in the article.

The text-align property has four values:

  • left
  • center
  • right
  • justify

The screenshot below, done in Adobe Dreamweaver, shows how each value looks like.

Text-Align Values

NOTE: The values #pLeft, #pCenter, #pRight, and #pJustify are words that I made up to determine which paragraph will function the way I want. When you get to Learn CSS – Part 2: Other Ways to Write CSS, you’ll learn more about how this works, but for now focus on the content within the <style> section.

Learn CSS – Part 4: Text Properties – Text-Decoration

Similar to the font-weight and the font-style commands, the text-decoration property can make your copy pop by using any of the following values:

  • overline
  • underline
  • line-through

The image below demonstrates each example and uses similar methods I used above for distinguishing each paragraph.

Text-Decoration Code View

Text-Decoration Browser Preview

Learn CSS – Part 4: Text Properties – Text-Transform

Transforming your copy is similar to holding or not holding down the shift key on your keyboard. The text-transform has four values:

  • capitalize
  • uppercase
  • lowercase
  • none

The screenshot below will show you how each value works. The none value doesn’t really do anything unless you are trying to turn off a value that’s been set previously.

Text-Decoration Code View

Learn CSS – Part 4: Text Properties – Line-Height

In your favorite word processing program, the spacing between each line of a paragraph is set to a normal height of about 1. Lowering the number will decrease the spacing between each line and increasing the number will increase the gap.

The example below shows how the line-height looks a little similar to using the breakline tag <br /> tag, discussed in HTML Tags – Part 1: The Structural Elements, but as you can see there is a difference between the two.

Line-Height Code View

Line-Height Browser Preview

Learn CSS – Part 4: Text Properties – Color Property

The last modification you can do to text is change its color using the color property. Below is a simple example showing how to use this command:

color: #FF0;

The value, #FF0, is the hexadecimal equivalent of the color yellow. You can use the word “yellow” as a value but to get a specific color, it’s best to use a hex value.

The Color Property is generally coded for the <body> tag but can be used with the <span> tag, Class, ID or any other HTML Element.

Your Thoughts On Learning CSS

As I wrap up this article, I want get your thoughts…

Reading the explanation of the font and text properties, do you see a strong difference between the two? What other questions do you have about the Text Properties? Leave a comment on my Facebook Page.