CODEWITHSUNDEEP
htmlcssfonts
Mark
Mark

Reputation: 3859

Possible to set CSS font-size as a relative % of what the class is defined with using style property?

What I have is a div class="myBox" and "myTitle"

the CSS for .myBox:

{
font-size:14px
}

the CSS for .myTitle:

{
font-size:18px
}

Now in certain scenarios I want these both to scale up or down by a percentage. So I setup a style="font-size:150%" and I simply add that to my HTML

This successfully overrides the CSS class and applies a 150% font size to the classes.

The Problem

Both .myBox and .myTitle are now equally large, they aren't maintaining a relative difference in font size. It seems the 150% is in regards to a global font-size for the page so when I tell it to goto 150% they are the same.

What I was hoping was for:

.myBox would be 150% * 14px = 21px
.myTitle would be 150% * 18px = 27px

Is there a way I can set the font size to scale as a percentage up using only CSS and the style property?

Upvotes: 0

Views: 189

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

This is a job for em. em is a relative unit that is based on the parent's font size. Search about it and you'll find plenty of resources, including it's partner in crime, the rem unit (:root em) https://www.w3.org/WAI/GL/css2em.htm

body {
  line-height: 1;
}

.box {
  font-size: 14px
}

.title {
  font-size: 18px
}

.bigger {
  font-size: 1.5em;
}
<div class="box">box (14px)
  <div class="myBox bigger">mybox (21px)</div>
</div>

<div class="title">box (18px)
  <div class="myTitle bigger">mybox (27px)</div>
</div>

Upvotes: 2

Related Questions