CSS Text
========
All CSS Text Properties
-----------------------
Property Description
----------------------------------------------------------------------------------------------------------------
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return whether the text should be overridden
to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
Text Color
----------
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
The default color for a page is defined in the body selector.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
--------------
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, 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 (like in magazines and newspapers).
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 remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
a {text-decoration:none;}
It can also be used to decorate text:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Text Transformation
-------------------
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.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
----------------
The text-indent property is used to specify the indentation of the first line of a text.
p {text-indent:50px;}
Example 1
---------
This is heading 1
This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.
This is a paragraph with class="ex". This text is blue.
Example 2
---------
This is heading 1
This is heading 2
This is heading 3
Example 3
---------
Link to: W3Schools.com
CSS text-align Example
May, 2009
In my younger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'
Note: Resize the browser window to see how the value "justify" works.
Example 4
---------
This is some text.
This is some text.
This is some text.
Example 5
---------
This is heading 1
This is heading 2
Example 6
---------
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
Example 7
---------
This is some text. This is some text.
Example 8
---------
Some text. Default writing direction.
Some text. Right-to-left direction.
Example 9
---------
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
Example 10
----------
An 
image with a default alignment.
An image with a text-top alignment.
An image with a text-bottom alignment.