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;
.
I want <strong>this text</strong> to be bold.
.bold_text {
font-weight: bold;
}
.
I want <u>this text</u> to be underlined.
.underlined_text {
text-decoration: underline;
}
.
I want <em>this text</em> to be italicized.
.ictalicized_text {
font-style: italic;
}
.
I want <s>this text</s> to be strikethrough.
.strikethrough_text {
text-decoration: line-through;
}
.
text-transform
propertyIt’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 */
.
The font-weight
property sets how thick or thin characters are in a container.
#title {
font-weight: 20px;
}
.
The line-height
property changes the amount of vertical space between the lines of a text in a container.
#my-article {
line-height: 15px;
}