CSS Superscript and Subscript
CSS is all about presentation. Discover how CSS Superscript and Subscript works to transform plain HTML into a premium user experience in the guide below.
In HTML, we utilize the <sub> and <sup> tags to specify subscript and superscript text. Superscript text is displayed in a reduced font size and positioned half a character above the regular text line. This formatting is commonly applied in mathematical expressions (such as x2 + y2 = r2), footnotes, and various other contexts.
Unlike superscript, subscript text is displayed in a reduced font size and positioned half a character below the regular text line. Subscript is commonly applied in writing chemical equations or formulas like H2O, H2SO4, and so on.
In CSS, the vertical-align attribute serves a similar purpose, allowing us to define the positioning of superscript and subscript text. This particular CSS property determines the vertical alignment of text content.
Now, let's explore how to accomplish superscript and subscript styling by utilizing the vertical-align property.
Syntax
vertical-align: baseline | super | sub ;
Property values
The baseline represents the default value that positions the text in alignment with the parent element's baseline.
It is the superscript feature that elevates the text.
sub: It is the subscript that lowers the text.
When the values "super" and "sub" are utilized for this property, the text will appear as superscript or subscript.
Example- Superscript
<!DOCTYPE html>
<html>
<head>
<style>
#super{
vertical-align:super;
font-size: medium;
}
p{
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1> Using vertical-align: super; </h1>
<p> Exponen ts (powers of a number), mathematical equations or formulae are the common uses of superscripted text. </p>
<h3>x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3>
<h3> (a + b)<span id="super">2</span> = a<span id="super">2</span> + b<span id="super">2</span> + 2ab </h3>
<h3>5<span id="super">th</span></h3>
</body>
</html>
Example- Subscript
<!DOCTYPE html>
<html>
<head>
<style>
#sub{
vertical-align: sub;
font-size: medium;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1> Using vertical-align: sub; </h1>
<p> Its common examples are chemical equations. </p>
<h3> Chemical formula of Water is: H<span id="sub">2</span>O</h3>
<h3> Ch emical formula of Sulphuric acid is: H<span id="sub">2</span>SO<span id="sub">4</span></h3>
</body>
</html>
