CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS text properties

With CSS text properties, you can define how text is displayed. You can specify the color of text, alignment of text, and more.

This tutorial focuses on:

Setting text color

Text color is set with the color property. You can specify the color of text with a color name, an RGB value, or a hexadecimal value.

Example:
<html> <head> <title>Background properties</title> <style type="text/css"> h1 {color: green;} p {color: #00008b;} p.text{color: rgb(47, 49, 49);} </style> </head> <body> <h1>This text is green</h1> <p>This text is darkblue</p> <p class="text">This text is darkslategray</p> </body> </html>
Output:

This text is green

This text is darkblue

This text is darkslategray

Aligning text

The alignment of text in an element is set with the text-align property. With this property, you can set text to align to the left, right, or center.

Example:
<html> <head> <title>Background properties</title> <style type="text/css"> h1 {text-align: left;} h2 {text-align: right;} p {text-align: center;} </style> </head> <body> <h1>This text is aligned to the left</h1> <h2>This text is aligned to the right</h2> <p>This text is aligned to the center</p> </body> </html>
Output:

This text is aligned to the left

This text is aligned to the right

This text is aligned to the center

Decorating text

Text decoration is set with the text-decoration property. With this property, you can set text to be underlined, have an overline, and more.

Example:
<html> <head> <title>Background properties</title> <style type="text/css"> p {text-decoration: underline;} a {text-decoration: overline;} h2 {text-decoration: line-through;} h1 {text-decoration: blink;} </style> </head> <body> <p>This text is underlined</p> <a href="http://www.landofcode.com">Landofcode.com main page</a> <h2>This text has a line through it</h2> <h1>This text is blinking</h1> </body> </html>
Output:

This text is underlined

Landofcode.com main page

This text has a line through it

This text is blinking

Setting letter spacing

Letter spacing is set with the letter-spacing property. You can increase or decrease the letter spacing between text with this property. The letter-spacing property takes the value "normal" for normal spacing between text characters or a numeric attribute specified by pixels followed by "px" for a fixed space between text characters.

Example:
<html> <head> <title>Background properties</title> <style type="text/css"> p {letter-spacing: normal;} p.two {letter-spacing: 5px;} p.three {letter-spacing: 10px;} p.four {letter-spacing: 15px;} </style> </head> <body> <p>The characters in this paragraph have normal spacing</p> <p class="two">The characters in this paragraph have a spacing of 5 pixels</p> <p class="three">The characters in this paragraph have a spacing of 10 pixels</p> <p class="four">The characters in this paragraph have a spacing of 15 pixels</p> </body> </html>
Output:

The characters in this paragraph have normal spacing

The characters in this paragraph have a spacing of 5 pixels

The characters in this paragraph have a spacing of 10 pixels

The characters in this paragraph have a spacing of 15 pixels

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information