Text Formatting in html

Text formatting is a crucial aspect of web design, adding flair and emphasis to your content. In this chapter, we'll explore various text formatting techniques in HTML, ensuring your words not only convey meaning but also captivate your audience.

text formatting

Mastering the Art of Text Styling

Bold and Italics

To make text bold, use the <strong> tag, and for italics, use the <em> tag.

				
					<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>

				
			

Underline and Strikethrough

The <u> tag adds an underline, and the <s> tag creates a strikethrough effect.

				
					<p><u>Underline</u> this text, and <s>strikethrough</s> this.</p>

				
			

Superscript and Subscript

Use <sup> for superscript and <sub> for subscript.

				
					<p>10<sup>2</sup> is 100 (superscript) and H<sub>2</sub>O is water (subscript).</p>

				
			

Font Color and Size

Style text with color using the color attribute and adjust size with the font-size attribute.

				
					<p style="color: blue; font-size: 18px;">This text is blue and 18 pixels in size.</p>

				
			

Text Alignment

Set the text alignment using the text-align property.

				
					<p style="text-align: center;">This text is centered.</p>

				
			

Text Transformation

Transform text to uppercase or lowercase using text-transform.

				
					<p style="text-transform: uppercase;">This text is in uppercase.</p>
<p style="text-transform: lowercase;">This text is in lowercase.</p>

				
			

In mastering text formatting, you've unlocked the ability to enhance your web design. Experiment with these techniques to find your style. Remember, effective text formatting not only communicates information but also adds a visual rhythm to your webpage. Keep practicing, and soon you'll be weaving text into a design masterpiece. Happy coding !❤️

Table of Contents