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;
}

You may also like...