CODEWITHSUNDEEP
css
undo
undo

Reputation: 277

CSS tag to increase font size

Is there any method to create a css tag which increases the font size? Something like:

<style>
p {
    font-size: 100%;
}

lrg {
    font-size: +40%;
}
</style>

<p>Hi <lrg>Tom</lrg>!</p>

In the above example, the default text size is 100% but the text size of that inside the tag is 140% (100+40).

Is there any way to receive similar results??

Upvotes: 3

Views: 307

Answers (3)

alesc
alesc

Reputation: 2782

The correct way to do is 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 about it this way: the percentages multiply and setting a value above 100% increases the previously set font size, while setting a value below 100% decreases the previously set font size.

Same goes for using em units. Use a number above 1.0em to increase and number below 1.0em to decrease font size.

Upvotes: 3

user663031
user663031

Reputation:

In addition to the other answers, consider using font-size: larger. However, you cannot randomly invent your own new HTML tags. That's what classes are for:

/* 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>

Upvotes: 1

Oriol
Oriol

Reputation: 287960

You can use em units:

span {
    font-size: 1.4em; /* 40% bigger than the parent */
}
<p>Hi <span>Tom</span>!</p>

Upvotes: 6

Related Questions