CSS - The web

Typography and Styling in CSS



In CSS, text can be styled using various properties. Using the list discussed in this article, you can learn how to use each CSS text property and what it looks like in a browser.

Our list of Text properties goes thus:

  • Text color
  • Text size
  • Text Alignment
    • Text Align
    • Text Align Last
  • Text Decoration
  • Text Transformation
  • Text Indentation
  • Letter Spacing
  • Line Height
  • Text Direction
  • Word Spacing
  • Text Shadow
  • Text Overflow
  • Tab Size

Text color

The color property is used when we want to set the color of texts in one or more selectors. Basically, we can set text color value to one of the lists:

  • a color name – like “green”
  • a HEX value – like “#008000”
  • an RGB value – like “rgb(0,128,0)”

Let’s see that in action.

See the Pen
wbJepB
by Obadimu Ismail (@cradoe)
on CodePen.

We used the three basic values of the color property to change the font color of .text-1, .text-3 and .text-4. Do you also notice we didn’t do anything with .text-2? Yea we just leave it to inherit the parent’s default color.

Text Alignment

With CSS, we can define where and how we want our text to be aligned.

text-align

This is used to set the horizontal alignment of text and it can be either

  • Left – This is the default one, content is aligned to the left side of its container.
  • Right – When set, content is aligned to the right side of its container.
  • Center – When the center is used, contents are aligned horizontally to the center of its container.
  • Justify – Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.

Let’s see that in action.

See the Pen
The CSS text-align property
by Obadimu Ismail (@cradoe)
on CodePen.

text-align-last

By default, the last line of a paragraph is aligned following the text-align value. To change this behavior, we can use this property.
Let’s see that in action:

See the Pen
The CSS text-align-last property
by Obadimu Ismail (@cradoe)
on CodePen.

Text Decoration

We can set how text are being decorated with the .text-decoration property. The possible values include:

  • underline – adds a line below the text.
  • overline – adds a line above the text.
  • none: removes either or both underline and overline from the text.

Note: Links are set to underline by default.

Let’s see that in action

See the Pen
The CSS text decoration property
by Obadimu Ismail (@cradoe)
on CodePen.

Text Transformation

We can change the default case which our text is being displayed with the .text-transform property. And the value can be:

  • uppercase – This changes all text to capital letters.
  • lowercase- Unlike the uppercase, this changes the text to small letters.
  • capitalize: This value capitalizes the first letter of each word.

Let’s see that in action

See the Pen
The CSS text transform property
by Obadimu Ismail (@cradoe)
on CodePen.

Text Indentation

We can indent the first line of a paragraph by length, percentage or the paragraph width with the text-indent property.
Let’s see that in action.

See the Pen
The CSS text indent property
by Obadimu Ismail (@cradoe)
on CodePen.

Letter Spacing

Increase or decrease the length of space within a word with the letter-spacing property.
Let’s see that in action

See the Pen
The CSS letter spacing Property
by Obadimu Ismail (@cradoe)
on CodePen.

Line Height

We can change the height of a line using the line-height property. Each line of text has a certain font height, but then there is additional spacing vertically between the lines. That’s the line height:
Let’s see that in action

See the Pen
The CSS line height property
by Obadimu Ismail (@cradoe)
on CodePen.

Text Direction

And so you might be working with languages like Arabic, you can set the direction of your text with the direction property. The value can be:

  • ltr- This is the default, sets the direction from left to right.
  • rtl – This sets the text direction from right to left.

Let’s see that in action

See the Pen
The CSS direction property
by Obadimu Ismail (@cradoe)
on CodePen.

Word Spacing

We discussed letter spacing earlier on, and so we can also specify the length of space between words with the word-spacing property.
Let’s see that in action.

See the Pen
The CSS word spacing property
by Obadimu Ismail (@cradoe)
on CodePen.

Text Shadow

The text-shadow property applies a shadow to the text. When not set, the text has no shadow by default.

This property accepts an optional color and a set of values that set

  • the X offset of the shadow from the text
  • the Y offset of the shadow from the text
  • the blur radius

If the color is not specified, the shadow will use the text color.
Let’s see that in action

See the Pen
The CSS text shadow property
by Obadimu Ismail (@cradoe)
on CodePen.

Text Overflow

Sometimes, a word might too long to fit a line, in this case, the word can overflow outside of the container. The property overflow-wrap (sometimes used as word-wrap) can be used to change this behavior.

The default behavior set by the browser is overflow-wrap: normal

To break the word at the exact length of the line, we can use
overflow-wrap:break-word or use overflow-wrap: anywhere

However, if the browser sees there’s a soft wrap opportunity somewhere earlier. No hyphens are added, in any case.

Let’s see that in action

See the Pen
The CSS overflow wrap property
by Obadimu Ismail (@cradoe)
on CodePen.

Pneumonoultramicroscopicsilicovolcanoconiosis is a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis – Wikipedia

Tab Size

By default, the length of the tab character is 8 but you can set that to your own integer value with the tab-size property.

Use p{ tab-size:3; }


Leave a Reply

Your email address will not be published. Required fields are marked *