CSS Text Color

CSS Text Properties

This page contains the properties in the text namespace (properties with the word text in their name), as well as some other related properties.

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.

In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.

CSS Text Color

For more information, see the color property.

CSS Text Align

For more information, see the text-align property.

CSS Text Indent

Indents the first line of the paragraph. For more information, see the text-indent property.

CSS Letter Spacing

For more information, see the letter-spacing property.

Читайте также:  Число обусловленности матрицы python

CSS Word Spacing

For more information, see the word-spacing property.

CSS Text Decoration

For more information, see the text-decoration property.

CSS Text Transform

For more information, see the text-transform property.

CSS Text Direction

For more information, see the direction property.

CSS unicode-bidi

For more information, see the unicode-bidi property.

Use this in conjunction with the property to determine the direction of the text. Possible values: , , , and .

CSS Text Shadow

For more information, see the text-shadow property.

CSS White Space

Tells the browser how to handle white space. Possible values: normal , pre , and nowrap .

For more information, see the white-space property.

Источник

CSS Text Formatting Properties

CSS TEXT properties are various type like text color, text-align, text-decoration, letter-spacing and many more properties.

Using this properties you can change the text formatting style.

Following are some CSS text properties listed. Using these properties you can play with text formatting style.

CSS Color

CSS color property use to set the Text color. The color value can be specified following three types:

     

CSS text color name orange

CSS text hexadecimal code #FFA500

CSS text RGB color code rgb(255,156,0)

CSS text-align

CSS text-align property use to set the horizontal alignment of text.
text-align possible value center, left, right, or justify.
When you set text-align property value justify than the effect is both width (left or right) equal like newspaper or books type.

     

CSS text align right

CSS text align center

CSS text align left

Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type.

CSS text-indent

CSS text-indent property is used to set the paragraph first line left side leave the blank space.

     

This paragraph is example of CSS text-indent property and value set 35px (pixel).So it means paragraph first line left side leave blank space end of blank space start a first line paragraph text.

CSS text-decoration

CSS text-decoration property use to decorate the text.

CSS text-decoration possible value underline, overline, blink, through etc.

     

Text is underline decorate

Text is overline decorate

Text is blink decorate

Text is line delete decorate

Text is nothing any decorate value

CSS text-transformation

CSS text-transformation property use to text transform.

CSS text-transformation possible value capitalize, lowercase and uppercase in a text.

CSS text-transformation property value capitalize, it means first letter capital for all word.

     

This text transform to capital.

This text transform to lowercase.

This text transform to uppercase.

CSS letter-spacing

CSS letter-spacing property set blank space between each two letter.

     

This text is represent letter spacing.

CSS word-spacing

CSS word-spacing property set blank space between each two word.

     

This text is represent word spacing.

CSS white-space

CSS white-space property use to set a predefine task. CSS white-space possible value is ‘normal’, ‘pre’.

     

This text is represent predefined text predefined area another text

CSS text-shadow

CSS text-shadow property is use to decorate text and apply shadow effect style.

     

This text is represent text shadow effect.

Источник

CSS Text Properties

This page contains the properties in the text namespace (properties with the word text in their name), as well as some other related properties.

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.

In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.

CSS Text Color

For more information, see the color property.

CSS Text Align

For more information, see the text-align property.

CSS Text Indent

Indents the first line of the paragraph. For more information, see the text-indent property.

CSS Letter Spacing

For more information, see the letter-spacing property.

CSS Word Spacing

For more information, see the word-spacing property.

CSS Text Decoration

For more information, see the text-decoration property.

CSS Text Transform

For more information, see the text-transform property.

CSS Text Direction

For more information, see the direction property.

CSS unicode-bidi

For more information, see the unicode-bidi property.

Use this in conjunction with the property to determine the direction of the text. Possible values: , , , and .

CSS Text Shadow

For more information, see the text-shadow property.

CSS White Space

Tells the browser how to handle white space. Possible values: normal , pre , and nowrap .

For more information, see the white-space property.

Источник

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. The color can be specified by:

  • name — a color name, like «red»
  • RGB — an RGB value, like «rgb(255,0,0)»
  • Hex — a hex value, like «#ff0000»

The default color for a page is defined in the body selector.

Example

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

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

It can also be used to decorate text:

Example

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

Text Indentation

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

Example

More Examples

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

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

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

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

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

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

All CSS Text Properties

The number in the «CSS» column indicates in which CSS version the property is defined (CSS1 or CSS2).

Источник

Оцените статью