CSS Text

CSS has many properties to control how text looks and where it sits in its box.

Property	Use
color	Text colour
text-align	left, right, center or justify
text-decoration	none, underline, overline, line-through
text-transform	uppercase, lowercase, capitalize
text-indent	Indent of the first line
letter-spacing, word-spacing	Space between letters and words
line-height	Height of each line
white-space	How spaces and line breaks are handled
text-overflow	What to show when the text is too long

---

Examples

h1 { text-align: center; text-transform: uppercase; letter-spacing: 3px; }
a  { text-decoration: none; }
p  { line-height: 1.6; text-indent: 30px; }
.del { text-decoration: line-through; }

---

Line height

A line-height of 1.5 to 1.7 (without a unit) makes body text comfortable to read. Without a unit the value is a multiple of the font size.

---

One line with ellipsis

To cut a long text and show three dots, you need three properties together.

.title {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

---

Summary

• Use text-align, text-transform and text-decoration to change the look of text.
• Set line-height around 1.6 for paragraphs.
• For fonts, see CSS Fonts.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.