CSS Text Styles

Texts in a webpage are formatted using CSS.

CSS provides properties to format and style the texts in a webpage.
Below are the properties used for text formatting.

Text Color

The text color is set using the color property:

In CSS, a color is usually specified by:

• a HEX value - e.g #FF00FF
• an RGB value - e.g "rgb(255,0,0)
• a color name - like green
• a HSL - like hsl(240,100%,50%)

p {
color: blue;
}

div {
color: #FF0000;
}

a { 
color: rgb(0,159,0);
}

span {
color: hsl(240,100%,50%);
}

Text Align

The horizontal alignment of text is determined by the text-align property.
The text alignment can either be centered, aligned left or right side, or justified.

Examples

body {
text-align: justify;
} 

div {
text-align: center;
} 

p {
text-align: right;
}

  Do It Yourself

Text Decoration

The text-decoration property is used to decorate a text in a webpage.

It carries values like (line-through, overline, underline, and none). The none value is used when you want to remove all text-decorations and make a text plain.

Examples

a {
text-decoration: none;
}

h1 {
text-decoration: underline;
}

span {
text-decorattion: overline;
}

  Do It Yourself

Text Indent

The text-indent property is used to specify a space to the left of the first line of a text.

Example

p {
text-indent: 50px;
}

  Do It Yourself

Text Transform

The text-transform property is used to specify the case type of a text.

You can used this property to specify that either a text should be uppercase, lowercase or capitalize (setting the first letter of each word to uppercase).

Example

a {
text-transform: uppercase;
} 

div {
text-transform: lowercase;
}

h1 { 
text-transform: capitalize; 
}

  Do It Yourself

Text Shadow

The text-shadow property is used to specify the shadow around the text.

The following example specifies a white text having a black shadow round it.

Example

h1 {
color: white;
text-shadow: 0px 0px 3px black;
}

  Do It Yourself

What You Should Know at the End of This Lesson

• You should be able to tell briefly what CSS Text Styling is all about.
• You should be able to style a text using the CSS Text Styling proerties.
• You should be able to remove a decoration from a text with using the text-decoration property.