HTML text styling is a foundational skill in web development, essential for creating visually appealing and readable content. From basic font changes to advanced CSS effects, these exercises will guide you through various methods to style text in HTML.
Let's explore over 30+ exercises, progressing from beginner-friendly techniques to more advanced styling methods.
To add text in bold in HTML, the <b> and <strong> tags are used.
HTML Code:
<p>
<b>Bold Text</b>
or <strong>Important Text</strong>
</p>
CSS Code:
b, strong {
font-weight: bold;
}To italicize text in HTML, the <i> and <em> tags are used.
HTML Code:
<p>
<i>Italic Text</i>
or
<em>Emphasized Text</em>
</p>
To emphasize a word in HTML, the <em> tag should be used.
HTML Code:
<p>This is an <em>important</em> word!</p>
To create different heading levels in HTML, the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags are used.
HTML Code:
<h1>This is a big heading!</h1>
<h2>This is a smaller heading!</h2>
The <br> is used to add a line break within a paragraph in HTML.
HTML Code:
<p>This is the first line.<br>This is the second line.</p>
The <strong> tag makes text important and bold, while <b> just makes it bold.
To center-align text in HTML, use the <div> or <p> tag with the style attribute.
HTML Code:
<p style="text-align: center;">This text is centered!</p>
An ordered list are the list which uses numbers, like 1, 2, 3, while an unordered list uses dots or bullets. Use <ol> for ordered and <ul> for unordered lists.
HTML Code:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
To change the text color using inline CSS, use the style property
HTML Code:
<p style="color: blue;">This text is blue!</p>
The font size in CSS is used to change the size of the text.
HTML Code:
<p style="font-size: 20px;">This text is big!</p>
To underline text in CSS, use the text-decoration property with the value underline.
HTML Code :
<p style="text-decoration: underline;">This text is underlined!</p>
The font-family property is used to change the font of text in HTML.
HTML Code :
<p style="font-family: Arial;">This text uses Arial font!</p>
To make text uppercase with CSS, use the text-transform property with the value uppercase.
HTML Code:
<p style="text-transform: uppercase;">This text is now uppercase!</p>
14. Which property would you use to capitalize the first letter of each word?
To capitalize the first letter of each word, use the text-transform property with the value capitalize.
HTML Code:
<p style="text-transform: capitalize;">this text has capitalized words.</p>
To indent the first line of a paragraph in CSS, use the text-indent property.
HTML Code:
<p style="text-indent: 20px;">This first line is indented!</p>
To create text with a 3D shadow effect in CSS, use the text-shadow property with multiple shadow values.
HTML Code:
<h2 class="shadow3d-text">3D Shadow Text</h2>
CSS Code:
.shadow3d-text {
color: black;
text-shadow: 2px 2px 0px gray, 4px 4px 0px lightgray;
}The font-weight property in CSS controls the thickness or boldness of text.
HTML Code:
<p class="bold-text">This is bold text!</p>
CSS Code:
.bold-text {
font-weight: bold;
}The line-height property in CSS increases the space between lines of text, making it easier to read.
HTML Code:
<p class="spaced-paragraph">This is a paragraph with better spacing!</p>
CSS Code:
.spaced-paragraph {
line-height: 1.5;
}The letter-spacing property in CSS is used to add space between letters.
HTML Code:
<p class="spaced-letters">This text has spaced-out letters!</p>
CSS Code:
.spaced-letters {
letter-spacing: 2px;
}Responsive text resizing with viewport units (vw, vh) adjusts the text size based on the viewport's width (vw) or height (vh).
HTML Code:
<p class="responsive-text">This text size changes with the screen!</p>
CSS Code:
.responsive-text {
font-size: 5vw;
}21. What’s the Benefit of Using Google Fonts in an HTML Document?
The benefit of using Google Fonts in an HTML document is that it allows you to easily use a wide variety of custom fonts in our HTML Document.
HTML Code:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<p class="google-font">This text uses a Google Font!</p>
CSS Code:
.google-font {
font-family: 'Roboto', sans-serif;
}You can apply multiple text decorations in CSS by using the text-decoration property with a space-separated list of values.
HTML Code:
<p class="decorated-text">This text is underlined and overlined!</p>
CSS Code:
.decorated-text {
text-decoration: underline overline;
}The <code> tag is used to display a line of code properly in HTML.
HTML Code:
<code>console.log("Hello World!");</code> To add a gradient effect to text with CSS by using the background-image property along with -webkit-background-clip.
HTML Code:
<h1 class="gradient-text">Colorful Gradient Text</h1>
CSS Code:
.gradient-text {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}The text-overflow property in CSS is used to control how text is displayed when it overflows its container, tyy by adding ellipsis (...) or clipping the text.
HTML Code:
<div class="overflow-text">This is some really long text that will not fit!</div>
CSS Code:
.overflow-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}CSS variables simplify text styling by allowing you to define a value once and reuse it multiple times throughout the document.
HTML Code:
<p class="variable-text">This text uses a CSS variable for color!</p>
CSS Code:
:root {
--main-color: blue;
}
.variable-text {
color: var(--main-color);
}To create a responsive font size that changes with screen width, use the vw (viewport width) unit.
HTML Code:
<p class="responsive-font-size">This text size changes with the screen width!</p>
CSS Code:
.responsive-font-size {
font-size: 3vw;
}To add strikethrough text in HTML, use the <s> or <strike> tag.
HTML Code:
<p>This is <s>struck out</s> text!</p>
To use custom fonts in HTML, link to a font from a service like Google Fonts or import a font file.
HTML Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<p class="custom-font">This text uses a custom font!</p>
CSS Code:
.custom-font {
font-family: 'Open Sans', sans-serif;
}To create text with a typing animation effect in CSS, use @keyframes to animate the width and overflow properties.
HTML Code:
<div id="typing"></div>
JavaScript Code:
const text = "Hello, welcome to my website!";
let i = 0;
function type() {
if (i < text.length) {
document.getElementById("typing").innerHTML += text.charAt(i);
i++;
setTimeout(type, 100);
}
}
type();
31. How to Create Text with Neon Glow Effect?
To create text with a neon glow effect in CSS, use the text-shadow property with multiple shadow values.
HTML Code:
<h1 class="neon-text">Neon Glow Text!</h1>
CSS Code:
.neon-text {
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}To create transparent text with an image background, use the background-image property along with the background-clip property.
HTML Code:
<h1 class="transparent-text">Transparent Text!</h1>
CSS Code:
.transparent-text {
font-size: 60px;
color: transparent;
background: url('your-image.jpg') no-repeat;
-webkit-background-clip: text;
background-clip: text;
}33. How to Animate Text Color on Hover?
To animate the text color on hover, use the transition property along with the :hover pseudo-class.
HTML Code:
<p class="hover-text">Hover over me!</p>
CSS Code:
.hover-text {
color: blue;
transition: color 0.5s;
}
.hover-text:hover {
color: red;
}To create a bouncing text animation, use the @keyframes rule to animate the transform property with translateY.
HTML Code:
<h2 class="bounce-text">Bouncing Text!</h2>
CSS Code:
.bounce-text {
display: inline-block;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
}To create a text-reveal effect, use @keyframes rule to animate the width or clip-path of the text, making it appear progressively.
HTML Code:
<div class="reveal-text">Hover to reveal the secret text!</div>
CSS Code:
.reveal-text {
color: transparent;
background-color: black;
transition: color 0.5s;
}
.reveal-text:hover {
color: white;
}
Similar Reads
HTML Image Exercises HTML is a fundamental skill for web development, and learning how to use images properly is an important part of creating engaging websites. The <img> tag allows you to embed images in your web pages, and with attributes like src, alt, width, and height, you can control how these images appear
8 min read
HTML Table Exercises This HTML Table Exercise provides practical questions and will cover all possible questions based on HTML Tables to ace you in the interview.1. What is the basic HTML tag used to create a table?The <table> tag is used to create a table in HTML. This tag starts the table structure.<table>
7 min read
HTML Style Tag The HTML <style> tag in HTML defines CSS for document styling. The <style> element is placed in the <head> section of the document.Syntax:<style> /* CSS properties applied inside this style tag */ .divtag{ color: blue }</style>Attributes:AttributesDescriptionmediaIt tak
3 min read
How to define style information of a document using HTML5 ? In this Article, we define style information for a document by using the <style> element in the document. It is used to change our text, viewed on the page. This change includes changing font-size, font-family, font-color, etc. Not only the texts but you can also change the style of a body or
1 min read
HTML and CSS This article aims to provide you with a thorough understanding of how to use HTML and CSS to construct websites or web pages. Here, we present a complete overview to kickstart your journey in learning HTML and CSS. What is HTML?HTML, an acronym for HyperText Markup Language, is the standard language
4 min read
Design an Event Webpage using HTML and CSS Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What We’re Going to CreateWe’ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will includeA header introducing the ev
5 min read