CSS Properties 2 – Text and All About It


In the previous article CSS Properties 1 – Units and Colors, we focused on some of the basics of CSS. That article must have furnished you with the foundation of CSS and you should now be able to have a firm grasp of measuring units and be eager to start with some real CSS.

In today’s class, we shall learn how to manipulate text using simple CSS. For that, we’ll take a look at the codes and properties related to Text in CSS.
All websites have some sort of text on them and it is therefore crucial to understand how many shapes you can create and how will CSS text properties affect the visual result of your site.

Heading on to the second part of our CSS guide, let’s tackle Text Properties today.

Let’s begin with the basic sum of Text Properties:

Tips for Beginners

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Now that we know what lies ahead of us, let’s begin with…

Word Spacing



Possible values

You are obliged to use a length value, preferably em or px. You can also make the text look more cramped by using values below zero.


body {word-spacing: 0.5 em;}

Letter Spacing



Possible Values

  • normal
  • length units

Does exactly the same as Word Spacing, but for individual letters.


h3 {letter-spacing: 0.05em;}

Text Decoration



Possible values

  • none
  • underline
  • overline
  • line-through
  • blink

One of the most fancy properties in the Text Family, Text Decoration allows you to use five different techniques in order to highlight your text.


a:visited {text-decoration: line-through;}

Vertical Alignment



Possible Values

  • baseline
  • middle
  • super (= superscript)
  • sub (= subscript)
  • top / bottom (the top / bottom of a particular element aligns with the highest / lowest element on the line)
  • text-bottom / text-top
  • percentage

The first and also the only one more complicated property in the Text Group, so don’t panic! Simply put, Vertical Alignment takes care of the vertical position of an element in relation to:

  1. parent element
  2. element’s line

You can use the percent value, but for that you also need to understand the Line Height, so I’ll talk about it when we get to that particular property.

And finally, you can utilize Vertical Alignment by using the keywords written in the list above.


.index {vertical-align: sub }

Text Transformation



Possible Values

  • none
  • capitalize
  • uppercase
  • lowercase

This property should be used solely for visual effects and you should bear grammar in mind while using it. The way I see it, the most appropriate way to use this property is to e.g. set your Blog Title or some of the headings in Uppercase.


h2 {text-transform: capitalize;}

Text Alignment



Possible Values

  • left
  • right
  • center
  • justify

Does exactly what it sounds like, can be used only with block level elements.


h5 {text-align: right;}

Text Indentation



Possible Values

  • units of length
  • percentage

This property gives you a neat opportunity to organize your text. You can either set a fixed length of the indentation or choose to base it on the parent width of the text.


h2 {text-indent: 2.5em;}

Line Height



Possible Values

  • normal
  • number
  • unit of length
  • percentage

Determines heights of individual baselines. All the values are very straight forward, perhaps except number – that stands for a fold of the basic line height.


h2 {line-height: 1.5;}


The ability to make text appear on the website as you like is pivotal in order to create a clean and astonishing design. But to understand the Text completely, it is also necessary to become familiar with the Fonts – which will be naturally our next destination. See you until then and…

Thank you for reading!

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved