CSS Lesson 4: Text

0
25

Introduction to Text

You have learned in detail about how to add text in HTML Text Lesson. However, in that lesson we haven’t taught you about styling them. In this lesson you will learn the different CSS properties to format the Text.

Text Decoration

Don’t worry! Text decoration in CSS is not as complex as home decoration! It’s very simple, and you’ll learn it within a couple minutes. By default, Text Decoration value is none. Usually, Text Decoration has the following values:

  • Line-Through – Wanna Stroke out your Text? Line-through value can make it possible for you.
  • Over-Line – Draw a line over your text using over-line value.
  • Under-line – Have you ever seen a text look like a link but it on doesn’t work like a link? Under-line value is the answer.
Source Code Output

This text has line through.

This text has over line.

This text has underline.

This text has no line.

Did you know? You can use both over-line and under-line values for a text. Check out the example:

Look! This text has underline and overline.

Interesting, isn’t it?

Text Color

CSS facilitates formatting text color. You can easily change the text color using CSS property color.

You can define color in three formats:

  • RGB value: rgb(255,0,0)
  • HEX value: #ff0000
  • Color name: red”

In case you forgot what the HEX values are and how you can calculate them, check out the HTML Colors lesson and update your knowledge.

Source Code Output

CSS Text Color HEX property

CSS Text Color RGB property

CSS Text Color name property

Did you know? We have setup a Color Chart for you to pick up colors. Check it out.

Text Alignment

You can align your text using the CSS text-align property. By default, browsers align the text to the left. But you can alter this:

Source
Output

This text is aligned center using CSS text-align Property

This text is align right using CSS text-align Property

 

CSS text-align values.

Here are the complete list of CSS text-align values

Value Description
left Use to align the text to the left
right Use to align the text to the right
center Use to align the text to the center
justify Use to stretch the text to fit width of content/area

Text Indent

You can use the CSS text-indent property to indent the first line of your paragraph. Usually, the first line of a paragraph in a book or magazines is indented. This property is very handy for you in formatting.

Source
Output

CSS is the language for modifying the presentation of Web pages, including colors, layout, and fonts. It also allows the designer to modify the presentation of the website to different types of devices, such as large screens (laptops, tv), small screens (mobile, Iphone, tablet), or printers. CSS is independent of HTML and can be used with any XML-based markup language.

You can see that the text is intended 40 px from left.

Text transform

This CSS property helps you to transform the text quickly in order to capitalize or not for uppercase and lowercase letters. By default the text-transform is none.

Source Code Output

wikiprogramming css tutorial.

wikiprogramming css tutorial.

Wkiprogramming css tutorial.

Letter Spacing

You can increase the spacing of a letter of the text using CSS letter-spacing property. Letter spacing is even more simple to apply in CSS than any word formatting software! Check it out

Source Code Output

WikiProgramming CSS tutorial.

Word Spacing

You can increase the spacing among words of the line using CSS word-spacing property.

Source Code Output
{word-spacing: 5px;}

Summary

  • Format the text with CSS properties
  • Add line through, over and under the text with Text-decoration.
  • Color the text using color property.
  • Use text-align for alignment of text to left, center, right and justify.
  • Intent first line of paragraph with text-indent property.
  • Transform the text into capital, undercase and lowercase using text-transform property.
  • Adjust spaces between letters with letter-spacing property.
  • Use word-spacing to adjust spaces among words.

Next Lesson

Text without font is like a fish without water! In the Next Lesson you will learn about the Font.

Leave a Reply