CSS Text

4
7/21/2014 CSS Text http://www.w3schools.com/css/css_text.asp 1/4 REFERENCES | EXAMPLES | FORUM CSS Tutorial CSS HOME CSS Introduction CSS Syntax CSS Selectors CSS How To CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS Tables CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attr Selectors CSS3 Tutorial CSS3 Introduction CSS3 Borders CSS3 Backgrounds CSS3 Gradients CSS3 Text Effects CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface CSS Summary CSS Examples CSS Examples CSS Quiz CSS Certificate CSS References CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX « Previous Next Chapter » CSS Text TEXT FORMATTING This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "Try it yourself" link. 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. Example body { color: blue; } h1 { color: #00ff00; } h2 { color: rgb(255,0,0); } Try it yourself » Note: For W3C compliant CSS: If you define the color property, you must also define the background-color property. 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). Example h1 { text-align: center; } p.date { text-align: right; } p.main { text-align: justify; Search w3s WEB UK Res cPan WEB Downloa FREE We Free HTM W3SCHO HTML, C S PHP, jQu ASP C SHARE WEB R Web Web HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE... Select

description

CSS Text training tutorial

Transcript of CSS Text

Page 1: CSS Text

7/21/2014 CSS Text

http://www.w3schools.com/css/css_text.asp 1/4

REFERENCES | EXAMPLES | FORUM

CSS Tutorial

CSS HOME

CSS Introduction

CSS Syntax

CSS Selectors

CSS How To

CSS Backgrounds

CSS Text

CSS Fonts

CSS Links

CSS Lists

CSS Tables

CSS Box Model

CSS Border

CSS Outline

CSS Margin

CSS Padding

CSS Dimension

CSS Display

CSS Positioning

CSS Floating

CSS Align

CSS Combinators

CSS Pseudo-class

CSS Pseudo-element

CSS Navigation Bar

CSS Image Gallery

CSS Image Opacity

CSS Image Sprites

CSS Media Types

CSS Attr Selectors

CSS3 TutorialCSS3 Introduction

CSS3 Borders

CSS3 Backgrounds

CSS3 Gradients

CSS3 Text Effects

CSS3 Fonts

CSS3 2D Transforms

CSS3 3D Transforms

CSS3 Transitions

CSS3 Animations

CSS3 Multiple Columns

CSS3 User Interface

CSS Summary

CSS Examples

CSS Examples

CSS Quiz

CSS Certificate

CSS References

CSS Reference

CSS Selectors

CSS Reference Aural

CSS Web Safe Fonts

CSS Units

CSS Colors

CSS Color Values

CSS Color Names

CSS Color HEX

« Previous Next Chapter »

CSS Text

TEXT FORMATTING

T h i s t e x t i s s t y l e d w i t h s o me o f t h e t e x t f o r ma t t i n g p r o p e r t i e s . T h e h e a d i n gu s e s t h e t e x t - a l i g n , t e x t - t r a n s f o r m, a n d c o l o r p r o p e r t i e s . T h e p a r a g r a p h i si n d e n t e d , a l i g n e d , a n d t h e s p a c e b e t w e e n c h a r a c t e r s i s s p e c i f i e d . T h e u n d e r l i n ei s r e mo v e d f r o m t h e "T r y i t y o u r s e l f " l i n k .

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.

Example

body { color: blue;}

h1 { color: #00ff00;}

h2 { color: rgb(255,0,0);}

Try it yourself »

Note: For W3C compliant CSS: If you define the color property, you must also define the background-colorproperty.

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 marginsare straight (like in magazines and newspapers).

Example

h1 { text-align: center;}

p.date { text-align: right;}

p.main { text-align: justify;

Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

cPanel Hosting

WEB BUILDING

Download XML Editor

FREE Website BUILDER

Free HTML5 Templates

W3SCHOOLS EXAMS

HTML, CSS, JavaScript,PHP, jQuery, XML, and

ASP Certifications

SHARE THIS PAGE

WEB RESOURCES

Web Statistics

Web Validation

HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...

Select Language

Page 2: CSS Text

7/21/2014 CSS Text

http://www.w3schools.com/css/css_text.asp 2/4

}

Try it yourself »

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:

Example

a { text-decoration: none;}

Try it yourself »

It can also be used to decorate text:

Example

h1 { text-decoration: overline;}

h2 { text-decoration: line-through;}

h3 { text-decoration: underline;}

Try it yourself »

Note: It is not recommended to underline text that is not a link, as this often confuses users.

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.

Example

p.uppercase { text-transform: uppercase;}

p.lowercase { text-transform: lowercase;}

p.capitalize { text-transform: capitalize;}

Try it yourself »

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.

Example

p { text-indent: 50px;}

Try it yourself »

Page 3: CSS Text

7/21/2014 CSS Text

http://www.w3schools.com/css/css_text.asp 3/4

« Previous Next Chapter »

More Examples

Specify the space between charactersThis example demonstrates how to increase or decrease the space between characters.

Specify the space between linesThis example demonstrates how to specify the space between the lines in a paragraph.

Set the text direction of an elementThis example demonstrates how to change the text direction of an element.

Increase the white space between wordsThis example demonstrates how to increase the white space between words in a paragraph.

Disable text wrapping inside an elementThis example demonstrates how to disable text wrapping inside an element.

Vertical alignment of an imageThis example demonstrates how to set the vertical align of an image in a text.

Add shadow to textThis example demonstrates how to add shadow to 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 overriddento 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

Top 10 Tutorials

» HTML Tutorial

» HTML5 Tutorial

» CSS Tutorial

» CSS3 Tutorial

» JavaScript Tutorial

» jQuery Tutorial

» SQL Tutorial

» PHP Tutorial

» ASP.NET Tutorial

» XML Tutorial

Top 10 References

» HTML/HTML5 Reference

» CSS 1,2,3 Reference

» CSS 3 Browser Support

» JavaScript

» HTML DOM

» XML DOM

» PHP Reference

» jQuery Reference

» ASP.NET Reference

» HTML Colors

Top 10 Examples

» HTML Examples

» CSS Examples

» JavaScript Examples

» HTML DOM Examples

» PHP Examples

» jQuery Examples

» XML Examples

» XML DOM Examples

» ASP Examples

» SVG Examples

Web Certificates

» HTML Certificate

» HTML5 Certificate

» CSS Certificate

» JavaScript Certificate

» jQuery Certificate

» PHP Certificate

» XML Certificate

» ASP Certificate

Color Picker

Page 4: CSS Text

7/21/2014 CSS Text

http://www.w3schools.com/css/css_text.asp 4/4

REPORT ERROR | HOME | TOP | PRINT | FORUM | ABOUT | ADVERTISE WITH US

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examplesare constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use,

cookie and privacy policy. Copyright 1999-2014 by Refsnes Data. All Rights Reserved.