Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

CSS Text (Text)


May 03, 2021 CSS


Table of contents


CSS Text text format

With the Text property of CSS, you can change the color of the page Chinese, character spacing, align text, decorate text, indent text, and so on, and you can observe a paragraph below that simply applies the CSS text format.

The text format

This text is styled with some text formatting properties. T itles use text alignment, text conversion, and color properties. P aragraphs are indented, aligned, and specify the spacing between characters. The underscore will be removed from the Try it link.

Text Color

Color properties are used to set the color of text.

Color is specified most frequently by CSS:

  • Heteen values - e.g. "#FF0000"

  • One RGB value - "RGB (255,0,0)"

  • Name of color - such as "red"

See CSS Color Values View full color values.

The background color of a Web page refers to the selection within the subject:

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

Try it out . . .

CSS Text (Text) For W3C standard CSS: If you define color properties, you must also define background color properties.


The alignment of the text

Text arrangement properties are used to set the horizontal alignment of text.

Text can be centered or aligned to left or right, with both ends aligned.

When text-align justify each line is expanded to equal width, with left and right margins aligned (such as magazines and newspapers).

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

Try it out . . .

Tip: If you want to "indent" the first line of an element in a row, you can create this effect with the left inner margin or margin.


Text decoration

text-decoration is used to set or remove the decoration of text.

From a design text-decoration is primarily an underscore used to remove links:

a {text-decoration:none;}

Try it out . . .

You can also decorate the text like this:

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

Try it out . . .

CSS Text (Text) We do not recommend highlighting text that is not linked, as it often confuses users.


Text conversion

Text conversion properties are used to specify capital and lowercase letters in a text.

Can be used for all words to become capital or lowercase letters, or for capital letters of each word.

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

Try it out . . .

Text indentation

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

CSS text-indent property, which makes it easy to indent text.

By text-indent property, the first line of all elements can be indented to a given length.

p {text-indent:50px;}

Try it out . . .

Text interval

word-spacing property can change the standard interval between words. Its default normal is the same as setting a value of 0.

The space between the specified segment words should be 30 pixels:

p
{
word-spacing:30px;
}

Try it out . . .

CSS Text (Text)

More instances

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

Specifies the space between rows
This example shows how to specify space between lines in a paragraph

Sets the text orientation of the element
This example shows how to change the text direction of an element.

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

Disable text wrapping within an element
This example shows how to disable text wrapping within an element.

Align the image vertically
This example shows how to set up a vertically aligned image of text.

Add a text shadow
This example shows how to set a text shadow.


All CSS text properties.

Property Describe
color Set the color of the text
direction Set the text orientation.
letter-spacing Set the character spacing
line-height Set the row height
text-align Align the text in the element
text-decoration Add decorations to the text
text-indent The indented element Chinese line of the book
text-shadow Set the text shadow
text-transform Controls the letters in the element
unicode-bidi Set or return whether the text is overrided
vertical-align Set the vertical alignment of the elements
white-space Sets how white space in the element is handled
word-spacing Set the word spacing