CSS Text

Last Updated Jul 21, 2015, 12:00:06 PM




What is CSS Text Formating

CSS text properties used to specify line-height, alignment, transformation, and more

First, we'll cover the line-height property.

CSS line-height Property

CSS line-height specifies the vertical spacing between lines of text.

If the page has long paragraphs with many lines, a larger than normal spacing makes it easier to read, so the line-height property sets the height of an entire line of text.

If the page has long paragraphs with many lines, a larger than normal spacing makes it easier to read, so the line-height property sets the height of an entire line of text. The difference between the font size and the line-height is equivalent to the leading.

Line-height can accept 5 types of values.

The value normal, a unitless number value, a pixel value, also an M or a percentage value.

A common value for the line-height property is a unitless value of 1.5. The browser multiplies this number by the font size to determine the line height.

Example

It will set the line-height in percent

Try It Now

CSS Text Color

CSS text-color is used to style the text with different colors.

We can set colors in three different ways. Let's look at each of them.

HEX Value: For Example "#00ff00;"

RGB Value: For Example"rgb(255,0,0)"

Color name:For Example "green"

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

Note:

If you define the color property, you must also define the background-color property.

Example

If you run the above example the body color will changed to red, h2 color will be orange and paragraph color will be black others respectively.


Watch GIF Try It Now

CSS Text Alignment

The CSS text-align property allows us to control the horizontal alignment of text.

CSS text-align property is used to place the text on the web page in right order. Like I say, you can align the text wherever you want to!. That being said, you can align the text in center or left or right or justify Each alignment has different meaning

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

Example
Try It Now

text-align can accept 1 of 4 values, left, right, center, and justify. The left value aligns the text to the left of its parent. The right value aligns the text to the right. The center value allows us to center the text on the page. With the value justify, every line of the paragraph,



CSS Text Decoration

The CSS text-decoration property allows us to set the line decoration of text to none, underline, overline, or line-through. It's commonly used to remove underlines and links.

CSS text-decoration property is used to decorate the text or remove the decoration for the text. CSS text-decoration property is mostly used to set or remove the underlines on the web page.

In many case, when you wish to have no decoration for the text you can simply say text-decoration: none;. That makes the text have no decoration .

See the below example for more understanding

CSS text-decoration Example



Watch GIF Try It Now

The value of underline adds the text underneath the text,

The value overline adds the line over the text, and the value line-through adds the line through the text. For normal text, none is the default value.




CSS Text Transform

CSS text-transform property allows us to change the case of text. So with this property, we can control the capitalization of our text.

We can make text appear in all uppercase, all lowercase, or with each word capitalized.

CSS text-transform Example


Watch GIF Try It Now

CSS text-indent Property

CSS text-indent property, is used to indent the first line of text.

We can control the indentation by specifying value in either length units or percentages.

Text indent can also accept a negative value if you choose to use one.

CSS text-indent Example

Try It Now

Practice with our Interactive Live Editors and Take your CSS Skilss to the next level

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM