Latest web development tutorials

CSS Text (text)

text format

The this text IS styled the with some of at The text Formatting Properties. At The heading the uses at The text-align = left, text-the Transform, and Color Properties. At The paragraph IS indented, The aligned, and at The Space the BETWEEN characters IS specified. At The underline IS removed from at The " try " Link.

Text Color

Color attribute is used to set the color of the text.

Color is most often specified by CSS:

  • Hexadecimal values ​​- such as "# FF0000"
  • An RGB value - "RGB (255,0,0)"
  • Color names - such as "red"

See CSS color values view complete color values.

A background of the page is in the main body of the selection means:

Examples

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

try it"

Remark For the W3C standard CSS: if you define the color property, you must also customize the background color attributes.

Alignment of the text

Text-align property is used to set the horizontal alignment of the text.

Text can be centered or aligned to the left or right justified.

When text-align is set to "justify", each line has been expanded to the same width, left and right margin are aligned (such as magazines and newspapers).

Examples

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

try it"

Text-decoration

text-decoration property is used to set or remove decorative text.

From a design point of view is mainly text-decoration property is used to remove the underlining of links:

Examples

a {text-decoration:none;}

try it"

You can also decorate this text:

Examples

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

try it"

Remark We do not recommend to emphasize that the text is not a link, because it is often confused with the user.

Text Converters

Convert text attribute is used to specify uppercase and lowercase letters in a text.

Initials can be used for everything into uppercase or lowercase letters, or each word capitalized.

Examples

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

try it"

Text-indent

Text-indent property to indent the first line is used to specify the text.

Examples

p {text-indent:50px;}

try it"

Examples

More examples

Designated space between characters
This example demonstrates how to increase or decrease the space between characters.

Specifies the space between the rows and rows
This example demonstrates how to specify the space between rows in a paragraph

Setting text orientation element
This example demonstrates how to change the direction of the text element.

Increase the blank space between words
This example demonstrates how to add a blank space between words in a paragraph.

Disable text wrapping in the element
This example demonstrates how to disable a text element within the surround.

Vertical alignment image
This example demonstrates how to set the vertical alignment of the text image.

Adding text shadows
This example demonstrates how to set text shadows.

All CSS text attributes.

Attributes description
color Set the text color
direction Setting text orientation.
letter-spacing Setting character spacing
line-height Setting row height
text-align Align text in the element
text-decoration Adding modifications to the text
text-indent Indent the first line of the Chinese elements
text-shadow Set the text shadow
text-transform Control element letters
unicode-bidi Sets or returns whether the text is rewritten
vertical-align Set the vertical alignment of elements
white-space Blank set element is handled
word-spacing Word spacing settings