07/11/2011

CSS Text Properties

by Cyle
Categories: css
Tags: ,
Comments: Leave a Comment

Formatting text with CSS can make things much easier. Below are all the CSS text properties with examples. You can click on a property below or scroll down to it.



 

Text Color

The text color can be changed using the color property. Colors can be a HEX value (#ff0000), an RGB value (rgb(255,0,0)), or a color name (“red”).

body {color:#ff0000}
h1 {color:rgb(0,255,0);}
h2 {color:blue;}

To comply with W3C you need to specify background-color if you use the color property.

 

Text Alignment

The text-align property is used to align the text. The options are centered, right, left, and justified. Justified is like a magazine or newspaper where the spacing changes to make the side margins straight. If you have not noticed, this paragraph is “justified”, and the left and right margins should be close to straight.
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

 

Text Decoration

The text-decoration property is used to set or unset text decorations.

CSS Result
a {text-decoration:none;}
This is a link without the underline.
p {text-decoration:overline;}
This text has an overline.
p {text-decoration:underline;}
This text has an underline.
p {text-decoration:line-through;}
This text has a line through it.
p {text-decoration:blink;}
This text is blinking.

Note: “blink” is not supported in IE, Chrome, or Safari

 

Text Transformation

The text-transform property is used to make all text capitalized or lower-case or just capitalize the first letter.

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

 

Text Indention

The text-indent is pretty self explanatory. It sets the indention of every first line of a paragraph.

p {text-indent:15px;}

 

Letter Spacing

The letter-spacing property sets the space between each character.

CSS Result
div {letter-spacing:3px;}
A lot of spacing.
div {letter-spacing:-1px;}
A little spacing.

 

Line Height

The line-height property is like the letter-spacing property except it spaces the lines and not each character.

CSS Result
div  {line-height:110%;}
This is normal line height spacing.
This is normal line height spacing.
This is normal line height spacing.
div  {line-height:85%;}
This is less line height spacing.
This is less line height spacing.
This is less line height spacing.
div  {line-height:125%;}
This is more line height spacing.
This is more line height spacing.
This is more line height spacing.

 

Vertical Alignment

The vertical-align property has to do with images and text together. It tells the image how to line up with the text. Bottom alignment is default.

CSS Result
img  {vertical-align:text-top;}
This is an image with top alignment.
img  {vertical-align:text-bottom;}
This is an image with bottom alignment.

 

White Space

The white-space property specifies how much white space is allowed inside of an element.

div {white-space:nowrap;}

Below are the different options:

  • normal : Text will wrap when necessary. (default)
  • nowrap : Text will never wrap. Text will all be on the same line until a <br /> tag is encountered.
  • pre : Text will only wrap on line breaks like <pre>.
  • pre-line : Several white spaces will collapse into one. No line breaks, and text will wrap when necessary.
  • pre-wrap : White space is preserved by browser. Will wrap when necessary and on line breaks.
  • inherit : Inherits property from parent.

 

Word Spacing

The word-spacing property decreases or increases the space between each word.

p {word-spacing:20px;}
The above CSS produces this. These words are 20px apart.
And these words are -2px apart.

 


Leave a Reply

Your email address will not be published. Required fields are marked *



user-avatar
Today is Sunday
06/25/2017