CSS tag to increase font size
Is there any method for creating a css tag that increases the font size? Something like:
<style>
p {
font-size: 100%;
}
lrg {
font-size: +40%;
}
</style>
<p>Hi <lrg>Tom</lrg>!</p>
In the example above, the default text size is 100%, but the text inside the tag is 140% (100 + 40).
Is there a way to get similar results?
source to share
You can use em
units:
span {
font-size: 1.4em; /* 40% bigger than the parent */
}
<p>Hi <span>Tom</span>!</p>
source to share
The correct way to do the following:
<style>
p {
font-size: 100%; /* This is actually redundant as it does not change the font size */
}
.lrg {
font-size: 140%; /* 40% increase */
}
</style>
Then use it like this:
<p>Hi <span class="lrg>Tom</span>!</p>
Think of it this way: multiplying percentages and setting a value higher 100%
increases the previously set font size, while setting a value lower 100%
decreases the previously set font size.
The same goes for using units em
. Use the number above 1.0em
to increase and the number below 1.0em
to decrease the font size.
source to share
In addition to other answers, use font-size: larger
. However, you cannot accidentally create your own HTML tags. For classes :
/* Define a CSS class that makes the font larger */
.lrg { font-size: larger; }
<!-- Use a span tag with the new class -->
<p>Hi <span class="lrg">Tom</span>!</p>