CODEWITHSUNDEEP
htmlcss
Evik Ghazarian
Evik Ghazarian

Reputation: 1791

Change a tag font size in relation to it's current font size

Not sure if this is actually possible to do. Is it possible to increase/decrease a specific HTML tag (h1,p,...) based on their current size; Only using CSS and HTML? I know the JavaScript way.

The percentage of smaller/larger will be determined by the user. it might be for instance 97%. Then it should be 97% of the font-size of the element.

Example:

CSS:

h1 { font-size: 2rem }

HTML:

<h1 style="font-size: (20% larger)"></h1>

Upvotes: 1

Views: 70

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

From your example, CSS var() and calc() could help

h1 {
  --font-size: 2rem;/* set a var for your font-size. --font-size is a valid name for a CSS var() */

/* use that var() */

font-size: var(--font-size);
}
<h1 style="font-size: calc( var(--font-size) *  1.2 )">Enlarge 20%</h1>
<h1 style="font-size: 2.64rem">2.2rem x 1.2 = 2.64rem </h1>
<h1 style="font-size: var(--font-size);">2rem</h1>
<h1 style="font-size:2rem;">2rem</h1>
<h1>from the sheet</h1>

Upvotes: 2

Related Questions