Formatting Text in HTML and CSS

HTML tutorials

Formatting Text in HTML and CSS
Formatting Text in HTML and CSS
Formatting text in HTML and CSS is very important to lean. You have to have good command over how to format text in HTML using CSS. You will be using text in every website you develop. So you have to present the text well to your visitors. In this post we will be discussing HTML formatting text size, HTML text formatting color, line height CSS and many more. Let us explain you formatting text in HTML and CSS.

How to format text in HTML using CSS

CSS font-family property

CSS font family property is used to tell the browser to use the given set of fonts in a fall back pattern. You can provide a single font as well to be used as the font for your pages. See the HTML code example below to understand more.

body {

font-family: Georgia, “Times New Roman”, Times, serif;

}

In the code above you can see that we are using a fall back strategy for the text font. You can see that the Times New Roman is in double quotes it is because it is more than one word. The browser will first look for the Georgia font on the client’s machine. If it is not installed it will look for the next font Times New Roman. If it is not installed then it will look for Times. If all the first three fonts are not found, then it will go for the default serif font on the machine.

CSS font-size property

Font size is used for defining the size of the text on a page or site. CSS provides many options for defining font size. See the code below to understand more.

h3 {

font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

}

The above code is showing you that you can use font sizes with an absolute value, relative size value, length value, percentage value or an inherit value. The absolute or fixed sizes are given in pixel (px) values. The relative size can be given with percentage value (%). The relative units will be going to be displayed relatively on the screen.

Font-weight | Font-style

Font weight property is used to make font bolder or lighter etc. Font style CSS property is used to make the font italic or oblique in a document. See the code below to grape the concept more.

h2{

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;

font-style: normal | italic | oblique | inherit

}

We have shown you that how many options you can use for defining font weight and font style.

Text-Transform CSS Property

You can use text transform to transform fonts in different styles. See the code below to understand it.

h2{

text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

}

None is used for no capitalization. The text renders as it is and it is default. By using capitalize we are transforming the first character of each word to uppercase. Uppercase will transforms all characters to uppercase. On the other hand lowercase will transforms all characters to lowercase. The initial options will set this property to its default value. As you know that the inherit property inherits from its parent element.

Text-align CSS Property

This property is used to align text in a document. It is used as follows in CSS:

p{

text-align: left | right | center | justify | initial |inherit;

}

Text-indent CSS Property

This property helps us to indent text as we want it to be. See how we can use the property:

p{

text-indent: length | %| initial | inherit;

}

The length is specified in fixed length using px, ex, em etc. The % is used for setting the indentations by a percentage (%) value.

Letter-spacing CSS Property

It is used to create or erase space between letters in a document. See how we can use it:

p{

letter-spacing: normal | length | initial |inherit;

}

Word-spacing CSS Property

It is used to increase or decrease white space between words in a document. See how we can use it:

p{

word-spacing: normal | length | initial |inherit;

}

Line-height CSS Property

It is used to increase or decrease line height in line of text in an element. How it is used we explained below:

p{

line-height: normal | number | length| initial | inherit;

line-height: 90% | 10px | 0.5;/*=== example=== */

 

}

Comments