Text manipulations in HTML and CSS
Make text stand out
In HTML and CSS, you can accentuate certain text areas in various ways. We will explain the various ways you can use to accentuate text.
Make text Bold
If you want to make text bold in HTML, note that ‘bold’ is achieved by adding <b> in front of the text that you want bold and </b> at the end of that text.
<p>this text is normal.</p>
<p><b>this text is bold</b>.</p>
In CSS, you can make text bold like this:
p {
font-weight: bold;
}
Make text Italics
If you want to make text italic in HTML, note that ‘italics’ is achieved by adding <i> in front of the text that you want in italics and </i> at the end of that text.
<p>this text is normal.</p>
<p><i>this text is in italics</i>.</p>
In CSS, you can itacilize text like this:
p {
font-style: italic;
}
Make text Underlined
If you want to underline a text in HTML, note that ‘underlined’ is achieved by adding <u> in front of the text that you want underlined and </u> at the end of that text.
<p>this text is normal.</p>
<p><u>this text is underlined</u>.</p>
In CSS, you can underline text like this:
p {
text-decoration: underline;
}
Make text Strikethrough
If you want to StrikeThrough a text in HTML, note that ‘strikethrough‘ is achieved by adding <del> in front of the text that you want to strike through and </del> at the end of that text.
<p>this text is normal.</p>
<p><del>this text is underlined</del>.</p>
In CSS, you can strikethrough text like this:
p {
text-decoration: line-through;
}
Combining multiple text manipulations
Oftentimes two or three of these elements are used together. For example:
<p> this text is normal.</p>
<p><b><u>this text is bold and underlined</u></b>.</p>
<p><b><i>this text is bold and in italics</i></b>.</p>
In CSS, you want to do this:
.bold-underline {
font-weight: bold;
text-decoration: underline;
}
.bold-italic {
font-weight: bold;
font-style: italics;
}