Common ways to style your texts with HTML and CSS3

Align text

You can align text in a container by adding the text-align property to that container. The most popular values of this property are shown next.

text-align: justify; 
/* Causes all lines of text except the last line to meet the left and right edges of the line box */

text-align: center; 
/* Centers the text */

text-align: right; 

text-align: left; 

.

Make text bold

I want <strong>this text</strong> to be bold. 

.bold_text {
	font-weight: bold;
}

.

Underline text

I want <u>this text</u> to be underlined. 

.underlined_text {
	text-decoration: underline;
}

.

Italicize text

I want <em>this text</em> to be italicized. 

.ictalicized_text {
	font-style: italic;
}

.

Make strikethrough text

I want <s>this text</s> to be strikethrough. 

.strikethrough_text {
	text-decoration: line-through;
}

.

The text-transform property

It’s a way to make a text looks consistent, using capital letters when they are required. The most popular values of this property are shown next.

text-transform: lowercase; 
/* Result: hello world */

text-transform: uppercase; 
/* Result: HELLO WORLD */

text-transform: capitalize; 
/* Result: Hello World */

text-transform: initial; 
/* The property uses the default value */

text-transform: inherit; 
/* The property uses the value assigned to the parent element */

text-transform: none; 
/* The original text will be displayed */

.

Adjust the thickness of a text

The font-weight property sets how thick or thin characters are in a container.

#title {
	font-weight: 20px;
}

.

Adjust the line spacing

The line-height property changes the amount of vertical space between the lines of a text in a container.

#my-article {
	line-height: 15px;
}