CSS Superscript and Subscript

Introduction

Superscript and subscript are used to change the font size and position of text in HTML documents. A superscript is a letter or number that is slightly above the normal line of text. A subscript is a letter or number that is slightly below the normal line of text. These effects are commonly used in scientific and mathematical formulas and chemical equations.

In this article, we will discuss how to apply superscript and subscript to HTML text using CSS.

CSS Superscript

To create a superscript in CSS, we can use the vertical-align property with a value of super. This will shift the text upwards by a small amount, making it appear as a superscript.

sup {
  vertical-align: super;
}

To use this in HTML, we can wrap the text we want to make superscript in a sup tag.

The speed of light is 3 x 10<sup>8</sup> m/s.

This will produce the following output:

The speed of light is 3 x 10⁸ m/s.

CSS Subscript

Similarly, we can create a subscript in CSS by using the vertical-align property with a value of sub. This will shift the text downwards by a small amount, making it appear as a subscript.

sub {
  vertical-align: sub;
}

To use this in HTML, we can wrap the text we want to make subscript in a sub tag.

The chemical formula for water is H<sub>2</sub>O.

This will produce the following output:

The chemical formula for water is H₂O.

Conclusion

In this article, we’ve discussed how to apply superscript and subscript to HTML text using CSS. By using these effects, we can make our scientific and mathematical formulas more readable and professional-looking.