CSS Styling Text

Monday, March 12, 2012

tags CSS

Prior to having the ability to use CSS so style your text, you were very limited in your presentation. Without CSS, you were able to use the <font> element (now deprecated) to change the color and typeface of the text, other styles such as changing the size of your text was not as flexible. Other styling options such as bold and underline were only possible in only through the use of additional HTML elements. With CSS we now have complete control of styling text in a simple and very effective manner.

Text Color

The color property is used to set the color of the text. With CSS, you have three options to set the color property:

  1. HEX Value - "#F0F0F0"
  2. Color Name - "Blue"
  3. RGB Value - "rgb(0,255,0)"

The examples in this guide are referencing uses of CSS within in an internal (within the meta element) or external style sheet. Inline styles are handled with the style property.

h1 {color:blue;}
h2 {color:#FF00FF;}
h3 {color:rgb(0,255,0);}

Text Decorarion

The text-decoration property is used to set or remove decorations from text such as none, overline, underline, and line-through. Blink is another value which can make text blink on and off, but is not supported by most browsers and generally annoys most users. It is common to use this property for removing the default underline from links.

p {text-decorarion:none;}No text decoration
p {text-decorarion:overline;}Overline decoration
p {text-decorarion:underline;}Underline decoration
p {text-decorarion:line-through;}Line-through decoration

Text Alignment

The text-align property is used to set the horizontal alignment of a text. By default, text on your website is aligned to the left. However, sometimes you may require a different alignment and it can be specified using the text-align attribute. Text can be centered, aligned to the left, aligned to the right, or justify.

p {text-align:center;}

Center aligned

p {text-align:left;}

Left aligned

p {text-align:right;}

Right aligned

p {text-align:justify;}

Justify aligned

Text Indent

The text-indentation property is used to specify the indentation of the first line of text. It is commonly used to style the paragraph element.

p {text-indent:20px;}This text would be indented in the paragraph.

Text Transformation

The text-transform property can be used to set all text in uppercase or lowercase letters, or capitalize the first letter of each word.

p {text-transform:none}This text is not transformed.
p {text-transform:lowercase}This text is in lowercase.
p {text-transform:uppercase}This text is in uppercase.
p {text-transform:capitalize}This text has every first letter capitalized.

Line Height

The line height property specifies the height between the lines.

div {line-height:.75px}Small line height.
Small line height.
div {line-height:1.75px}Bigger line height.
Bigger line height.

Word Spacing

With word-spacing, you are able to specify the exact value of the spacing between your words. Word-spacing should be defined with exact values.

p {word-spacing:20px}This paragraph's words are spaced by 20px.

Letter Spacing

With the letter-spacing property, you are able to specify the exact value of the spacing between your letters.

p {letter-spacing:3px}This paragraph's letters are spaced by 3px.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS: The Complete Reference HTML CSS and JavaScript Editor CSS: The Missing Manual