CSS Superscript & Subscript
- The superscript(<sup>) text appears in a smaller font and the half character above the normal line(like x2 + y2 = r2).
- The subscript(<sub>) text appears in a smaller font and the half character below the normal line(like H2O, H2SO4).
Example- Superscript:
<!DOCTYPE html>
<html>
<head>
<style>
#super{
vertical-align:super;
font-size: medium;
}
h3{
color:red;
}
</style>
</head>
<body>
<h1> Vertical-align: super; </h1>
<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>
OUTPUT:
Example- Subscript:
<!DOCTYPE html>
<html>
<head>
<style>
#sub{
vertical-align: sub;
font-size: medium;
}
h3{
color:red;
}
</style>
</head>
<body>
<h1> Vertical-align: sub; </h1>
<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>
OUTPUT:
