CODEWITHSUNDEEP
htmlcss
Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Applying tag twice result in different css style

This <h1>Some text <small><small>here</small></small></h1>

results

enter image description here

and this <h1>Some text <small>here</small></h1>

results

enter image description here

and i want first one with small here word, but without double <small> tags, so is there can be written any rule to apply style twice without creating new rule or touching existing for element? Currently used rule for <small> tags is

h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small { font-size: 65%; } Note: The point of question is possibility to apply style twice without creating or touching existing style of element. For example lets say <a>Foods</a> and <a class="twice">Cars</a> would become enter image description here

So twice can be used anywhere to apply double style (make font smaller twice or bigger twice, or transparensy level twice, or brightess twice, padding twice and etc.)

Upvotes: 2

Views: 1541

Answers (2)

pavel
pavel

Reputation: 27082

Small has default font-size set to 75%, when you have two smalls, result font-size is .75*75%.

Using two small elements isn´t the right way, use class to set extra-small font, or whatever. Not two small elements.

If you want to use your current HTML, just reset the font-size for inner small:

small small {font-size: 1em}

Upvotes: 1

giorgio
giorgio

Reputation: 10202

I don't see the CSS ofcourse, but most probably (and definitely when browser agent styles are used) the <small> tag is defined as an em value, which is a relative value. So you basically say to the browser: make this text 80% of 80% of the original (or whatever the em value is).

Now, if you want to have only one small tag, and have the same result, you should apply a style to it:

CSS

small.extra-small { font-size: 0.2em; /* some extra small font size value */ }

HTML

<small class="extra-small">This text is tiny!</small>

And your question was: can I do this without changing anything? The answer is no. Because nowhere in the world you can change something without touching it (or you should be God ;)).

Upvotes: 1

Related Questions