HTML Styles, HTML Text Formatting
- Siddharth Sharma
- Feb 4, 2025
- 3 min read
HTML provides various ways to style and format text on a webpage. This can be done using inline styles, internal CSS, or external CSS. Additionally, HTML includes specific tags for text formatting, such as making text bold, italic, underlined, etc.
Let’s break it down into two parts:
1. HTML Styles
HTML styles are used to control the appearance of elements on a webpage. Styles can be applied using the style attribute (inline styles), <style> tag (internal CSS), or by linking an external CSS file.
Inline Styles
Inline styles are applied directly to an HTML element using the style attribute.
Example:
<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>Internal CSS
Internal CSS is defined within the <style> tag in the <head> section of the HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a styled paragraph using internal CSS.</p>
</body>
</html>External CSS
External CSS is defined in a separate .css file and linked to the HTML document using the <link> tag.
Example (styles.css):
p {
color: green;
font-size: 16px;
}HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a styled paragraph using external CSS.</p>
</body>
</html>2. HTML Text Formatting
HTML provides specific tags to format text, such as making it bold, italic, underlined, etc. These tags are used to give meaning or emphasis to text.
Common Text Formatting Tags:
Bold Text:
<b>: Makes text bold (no extra importance).
<strong>: Makes text bold and indicates importance.
Example:
<p>This is <b>bold</b> text and this is <strong>strong</strong> text.</p>
Italic Text:
<i>: Makes text italic (no extra importance).
<em>: Makes text italic and emphasizes it.
Example:
<p>This is <i>italic</i> text and this is <em>emphasized</em> text.</p>
Underlined Text:
<u>: Underlines text.
Example:
<p>This is <u>underlined</u> text.</p>
Strikethrough Text:
<s>: Strikes through text.
<del>: Indicates deleted text.
Example:
<p>This is <s>strikethrough</s> text and this is <del>deleted</del> text.</p>
Superscript and Subscript:
<sup>: Displays text as superscript.
<sub>: Displays text as subscript.
Example:
<p>This is <sup>superscript</sup> and this is <sub>subscript</sub>.</p>
Marked/Highlighted Text:
<mark>: Highlights text.
Example:
<p>This is <mark>highlighted</mark> text.</p>
Small Text:
<small>: Makes text smaller.
Example:
<p>This is <small>small</small> text.</p>
Quotations:
<q>: Adds quotation marks around text.
<blockquote>: Indicates a block of quoted text.
Example:
<p>He said, <q>This is a quote.</q></p> <blockquote>This is a blockquote.</blockquote>
Example Combining Styles and Text Formatting:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1 style="color: blue;">Welcome to My Webpage</h1>
<p>This is a <b>bold</b> text, <i>italic</i> text, and <u>underlined</u> text.</p>
<p>This is <mark>highlighted</mark> text and <small>small</small> text.</p>
<p>This is <sup>superscript</sup> and <sub>subscript</sub> text.</p>
<p class="highlight">This text is styled using CSS.</p>
</body>
</html>Key Takeaways:
Styles are used to control the appearance of elements (colors, fonts, sizes, etc.).
Text Formatting Tags are used to give meaning or emphasis to text (bold, italic, underlined, etc.).
Always use semantic tags (like <strong>, <em>, <mark>) where appropriate to convey meaning, not just for visual effects.
Comments