Html text property name

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.

Источник

HTML Text Properties

HTML text has a couple of properties. When these properties change, the looks and feel of the website changes too. For example, here I’ve already told you how to change the color of the text in HTML.

Text Alignment

The css property text-align is intended for text alignment. It can be used to align text:

• left — left-aligned (default option)
• right — right-aligned
• center — in the center
• justify — stretch to the full width of the element

In practice, all options could be used like this:

p style="text-align: left;"> Left alignment p> p style="text-align: right;"> Right alignment p> p style="text-align: center;"> Center Align p> p style="text-align: justify;"> Justify to width p> 

Text Decoration

With CSS you can add decoration to the text or accentuate a particular word using the property text-decoration :

p style="text-decoration: none;"> There will be no effects. Default value p> p style="text-decoration: underline;"> Text will be underlined p> p style="text-decoration: overline;"> A line will be drawn over the text p> p style="text-decoration: line-through;"> Text will be strikethrough p> 

You can also specify the shape or color of the line, in addition to its type. Let’s look at an example of underline :

p style="text-decoration: underline solid;"> The text will be underlined with one line. It's the default behaviour p> p style="text-decoration: underline dotted;"> Text will be underline with the black dots p> p style="text-decoration: underline dotted red;"> Text will be underlined with red dots p> p style="text-decoration: underline double blue;"> Text will be underlined with two blue lines p> p style="text-decoration: underline dashed rgb(0, 0, 0);"> Text will be underlined with black strokes p> p style="text-decoration: underline wavy #000000;"> The text will be underlined with a black wavy line p> 

The shape and color of the line can also be set using separate properties — text-decoration-style and text-decoration-color :

p style = " text-decoration: underline; text-decoration-style: dashed; text-decoration-color: rgb(0, 0, 0); " > The text will be underlined with black strokes p> 

First line indent

The first line of the paragraph should often be indented. For example, when writing an article or a book. In CSS this is done using the text-indent property:

p style = "text-indent: 100px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium urna, ut ornare odio luctus a. Sed laoreet, velit nec luctus pharetra, eros est condimentum urna, hendrerit malesuada sem mi ac lectus. p> 

If you set the indentation in percent, then it will be calculated relative to the width of the HTML element.

p style="text-indent: 30%"> Proin at risus vel lectus pretium ultrices. Integer et orci condimentum, viverra tortor a, vehicula orci. Quisque pretium, nulla et dapibus tempor, tellus felis mollis mi, bibendum malesuada lacus ex in magna. Mauris rhoncus id massa ac viverra. Ut ante ligula, dignissim pellentesque gravida at, condimentum a erat. In dignissim consequat mollis. p> 

Text transformation

The text-transform property controls the size (case) of letters. There can be four values in total:

• none — no changes
• capitalize — all words start with a capital letter
• uppercase — all characters turned to the uppercase
• lowercase — all lowercase

p style="text-transform: none;"> All letters will be displayed as entered by the developer. Default value p> p style="text-transform: capitalize;"> All words will be capitalized p> p style="text-transform: uppercase;"> All letters of all words will be in uppercase p> p style="text-transform: lowercase;"> All letters of all words will be displayed in lowercase p> 

Space between characters

To set the spacing between characters, use the letter-spacing property.

The default is normal. In this case, the browser will do everything for you and, depending on the font typeface and its size will set the distance between the characters.

If you want to control everything yourself, you can explicitly specify the number of pixels between characters:

p style="letter-spacing: 20px;"> Text with 20px spacing p> 

The distance between characters can be made negative. In most cases, this will make the text unreadable:

p style="letter-spacing: -4px;"> Text that is very difficult to read. p> 

Space between words

You can set the spacing between words, in the same way as you set the spacing between characters. The only difference will be in the property name — word-spacing . All other rules are preserved:

p style="word-spacing: 200px;"> Text with huge spacing between words p> 

IMPORTANT! If we also decide to add the CSS property text-align: justify , then the distance between words will be determined by the browser, but will not be less than the value of word-spacing :

p style="text-align: justify; word-spacing: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium urna, ut ornare odio luctus a. Sed laoreet, velit nec luctus pharetra, eros est condimentum urna, hendrerit malesuada sem mi ac lectus. Proin at risus vel lectus pretium ultrices. Integer et orci condimentum, viverra tortor a, vehicula orci. Quisque pretium, nulla et dapibus tempor, tellus felis mollis mi, bibendum malesuada lacus ex in magna. Mauris rhoncus id massa ac viverra. Ut ante ligula, dignissim pellentesque gravida at, condimentum a erat. In dignissim consequat mollis. p> 

Источник

CSS Text

In addition to font properties, there is a separate set of properties provided by CSS that can help you style your web page’s text. In this chapter, you will get to know about various text properties of CSS.

CSS Text Properties

Let us discuss these in detail and see how to implement them and how it looks in the browser.

CSS Text Color

• By using the color name, such as red, aqua, blue
• By using the HEX value, such as #ff0000, #ffff00
• By using the RGB value, such as rgb(255,0,0), rgb(255,255,0)

Here is a code snippet of how to implement:

CSS Text Alignment

It is to be noted that when the text-align property is assigned with a justify value, the line is stretched to fit the page where the right and the left margins become straight.

CSS Text Decoration

This property of CSS is implemented to add or remove decorations from your text. When the text-decoration value is set to none, it is often employed for removing underlines from links, which looks something like this:

CSS Text Transformation

This CSS property is implemented for specifying the uppercase as well as the lowercase letters of your text. The transformation can be either converting every text to lowercase or upper case or capitalize the starting letter of every word.

h2.uppercase < text-transform: uppercase; >h3.lowercase < text-transform: lowercase; >h4.capitalize

CSS Text Indentation

The text-indent property of CSS is implemented to specify the indentation of the initial line of your text.

CSS Line Height

This CSS line-height property is applied to assign space between lines:

CSS Letter and Word Spacing

The letter-spacing property is implemented for specifying the space involving the characters within your HTML text. And the word-spacing property is implemented for specifying the space involving the words between your texts.

CSS Text Shadow

The text-shadow property of CSS allows including shadow to your text. Here is a code snippet:

Here, in the example above, the first position value designates the horizontal shadow (2px), and the second parameter value shows the vertical shadow (1px). The last value designates the color of your shadow. Note that space separates each of these values.

Источник