CSS Text and Font Tutorials

CSS properties allow you to define the presentation of text with the use of text and font properties.

Font Size

The "font-size" property is used to control the size of fonts.

The code below shows you how to set the font-size of text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { font-size: 15px; } .two { font-size: 1.5em; } .three { font-size: 150%; } </style> <html> <body> <p class="one"> This is the first paragraph. </p> <p class="two"> This is the second paragraph. </p> <p class="three"> This is the third paragraph. </p> </body> </html>

The code above shows creates the three paragraphs below.

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

Font Family

The "font-family" is used to specify fonts.

The web browser will go through the list of fonts, each seperated by commas, until it finds one that it can display.

The code below shows you how to specify the font family.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> p { font-family: arial, verdana; } </style> <html> <body> <p> This is a paragraph. </p> </body> </html>

The code above shows creates the three paragraph below.

This is a paragraph.

Font Weight

The CSS "font-weight" property sets a font as either bold or not bold.

The code below shows you how to set the boldness of a font.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> p { font-weight: normal; } p.bold { font-weight: bold; } </style> <html> <body> <p> The font weight of this text is normal. </p> <p class="bold"> The font weight of this text is bold. </p> </body> </html>

The code above shows creates the paragraphs below.

The font weight of this text is normal.

The font weight of this text is bold.

Font Style

The "font-style" property is used to specify whether a text is either italic or not italic. It can have the values: normal, italic or oblique (which is "leaning" text, similar to italic).

The code below shows you how to specify whether a text is italic or not italic.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> p.one { font-style: normal; } p.two { font-style: italic; } </style> <html> <body> <p class="one"> The text in this paragraph is not italic. </p> <p class="two"> The text in this paragraph is italic. </p> </body> </html>

The code above produces the paragraphs below.

The text in this paragraph is not italic.

The text in this paragraph is italic.

Text Decoration

The "text-decoration" property is primarily used to add and remove underlines from text links.

The code below shows you how to use the "text-decoration" property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> h2 { text-decoration: underline; } a { text-decoration: underline; } a:hover { text-decoration: none; } </style> <html> <body> <h2> This is a heading </h2> <p> This is a <a href="http://learncssandxhtml.com/">text link</a>. </p> </body> </html>

The code above creates the heading and text link below. Hover over the text link and notice the underline is removed when the mouse hovers over it.

This a heading.

This is a text link.

Text Color

The "color" property is used set the color of text. There are 3 ways to set color text with CSS.

  • name - specifying a specific color name, for example: "red"
  • RGB - specifying an RGB value, for example: "rgb(255,0,0)"
  • Hex - specifying a hex value, for example: "#ff0000"

There are 17 valid pre-defined colour names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow and also transparent.

The three values in the rgb format are from 0 to 255, with 0 being the lowest level (no red) and 255 being the highest level (full red).

rgb values can also be expressed as a percentage.

Hexadecimal color values are preceded by a pound sign (#) and can be either three or six digits in length. Hexadecimal color value are based on a 16 character numbering scheme, that is expressed in a combination of letters and numbers, from 0 (zero) to f.

In the three digit color value, the first value is rgb is red, the second is green and the third is blue.

Note: if you want your CSS code to be W3C compliant, you must define the background color property if you define the color property.

The code below shows you how to set the color of text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { color: red; } .two { color: #ff0000; } .three { rgb(255,0,0); } </style> <html> <body> <p class="one"> This is a paragraph. </p> <p class="two"> This is a paragraph. </p> <p class="three"> This is a paragraph. </p> </body> </html>

The code above produces the paragraphs below.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Text Alignment

CSS allows you to align text horizontaly with the use of the "text-align" property. Text can be aligned to the left, right, centered or justified.

The use of the text-align property with the value of "justify" automatically lines up the text on the left side and right side.

The code below shows you how to align text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } </style> <html> <body> <p class="left"> The text in this paragraph is aligned to the left. </p> <p class="center"> The text in this paragraph is centered. </p> <p class="right"> The text in this paragraph is aligned to the right. </p> </body> </html>

The code above produces the paragraphs below.

The text in this paragraph is aligned to the left.

The text in this paragraph is centered.

The text in this paragraph is aligned to the right.

Text Indention

CSS allows you to indent the first line of a paragraph to a given length or percentage with the "text-indent" property.

The code below shows you how to use the text-indent property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { text-indent: 100px; } </style> <html> <body> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p class="one"> This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. </p> </body> </html>

The code above produces the paragraphs below.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented. This paragraph is indented.

Text Transform

CSS allows you to specify uppercase and lowercase letters in a text with the use of the "text-transform" property. It can have one of 4 values: capitalize, uppercase, lowercase and none.

  • "text-transform: capitalize" converts the first letter of every word into uppercase
  • "text-transform: uppercase" converts every letter into uppercase
  • "text-transform: lowercase" converts every letter into lowercase
  • "text-transform: none" leaves all of the letters as they are in the text

The code below shows you how to use the "text-transform" property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { text-transform: capitalize; } .two { text-transform: uppercase; } .three { text-transform: lowercase; } </style> <html> <body> <p class="one"> This is some text on LeanCSSandXHTML.com. </p> <p class="two"> This is some text on LeanCSSandXHTML.com. </p> <p class="three"> This is some text on LeanCSSandXHTML.com. </p> </body> </html>

The code above produces the paragraphs below.

This is some text on LeanCSSandXHTML.com.

This is some text on LeanCSSandXHTML.com.

This is some text on LeanCSSandXHTML.com.

Letter Spacing

CSS allows you to control the space between characters with the "letter-spacing" property.

The code below shows you how to control the space between characters.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { letter-spacing: 3px; } .two { letter-spacing: -1px; } .three { letter-spacing: 1.5em; } </style> <html> <body> <p class="one"> This is a paragraph. </p> <p class="two"> This is a paragraph. </p> <p class="three"> This is a paragraph. </p> </body> </html>

The code above produces the paragraphs below.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Word Spacing

CSS allows you to control the spacing between words in a text with the use of the "word-spacing" property.

The code below shows you how to control the spacing between words in a text with the use of the "word-spacing" property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { word-spacing: 10px; } .two { word-spacing: 30px; } </style> <html> <body> <p class="one"> This is a paragraph. </p> <p class="two"> This is a paragraph. </p> </body> </html>

The code above produces the paragraphs below.

This is a paragraph.

This is a paragraph.

Line Spacing

CSS allows you to control the line height of a text with "line-height" property.

The code below shows you how to control the line height of a text with the use of the "line-height" property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { line-height: 90%; } .two { line-height: 200%; } .three { line-height: 22px; } </style> <html> <body> <p class="one"> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p class="two"> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p class="three"> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> </body> </html>

The code above produces the paragraphs below.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

Disable Text Wrapping

CSS allows you to disable text wrapping inside of an (X)HTML element with the use of the "white-space" property.

The code below shows you how to disable text wrapping.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .one { white-space: nowrap; } </style> <html> <body> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p class="one"> This text has text wrapping disabled. This text has text wrapping disabled. This text has text wrapping disabled. This text has text wrapping disabled. This text has text wrapping disabled. This text has text wrapping disabled. </p> </body> </html>

Web Hosting Resources

Free Website Templates