CSS Text Manipulation

The text manipulation properties of CSS allow you to manipulate text in your HTML document the same way as you use a word processing application. You can manipulate text in a variety of ways, from making the text bold, italic, underline, space between letters in words of text, making text capital etc...

Text Properties

I do not use all of these text properties in my desings. The most text properties that I use in my designs are:

Text Colour

The colour property is used to set the colour of the text. The colour can be specified by: name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000".

Example:

h1
{
     color:#055b92;
}

The text-align Property

The text-align property is used to set the horizontal alignment of a text. Text can be centred, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight.

Exmaple:

p
{
     text-align:justify;
}

The text-decoration Property

The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes. The following outlines the text-decoration property and its values:

Text-decoration – none | underline | overline | line-through | blink.

Examples: in my HTML I have given an ID to each paragraph as described below.

p#underline
{
       text-decoration:underline;
}

p#overline
{
       text-decoration:overline;
}

p#line-through
{
       text-decoration:line-through;
}

The above CSS codes produce the following results:

I am underline text

I am overline text

I am line-through text

Note: It is not recommended to underline text that is not a link, as this often confuses users.

Please note that Safari and IE do not support the blink keyword.

By default, HTML hypertexlinks are underline in blue colour. If you do not want your HTML hypertextlinks to be underlined, you can use CSS property text-decoration to remove the underline.

Exmaple:

a
{
       text-decoration:none;
}

The text-transform Property

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. The following outlines the text-decoration property and its values:

Text-transform – none | capitalize | uppercase | lowercase

p
{
       text-transform:uppercase;
}

You can experiment some of the above CSS text properties in your design.

Fonts

CSS includes a variety of properties that change the face, size, and style of a font.

font - Sets all the font properties in one declaration.

font-family - Specifies the font family for text.

font-size - Specifies the font size of text (12px, 50px etc..).

font-style - Specifies the font style for text (italic or normal.

font-variant - Specifies whether or not a text should be displayed in a small-caps font.

font-weight - Specifies the weight of a font (bold, bolder, normal).

Examples:

p
{
       font-size:16px;
       font-style:italic;
       font-weight:bold;
}

The above codes produce the following text.

I am a paragraph, font size 16px, font style italic and font weight bold.

In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial").