How to reset <small> tag in CSS

Question

Hi, I would also like to reset the font-size of <small> tag too normal HTML elements.

Like I want the content in small tag to be 13px of what other tags are.

How do I do this ?

Answer 1

Add this to your CSS:

small
{
    font-size: 13px !important;
} 

Answer 2

First, it's hard to tell what you're asking. Here's how to set the font-size of those tags to 13px.

small {
  font-size: 13px; /* you can use !important, but I wouldn't recommend it */
}

Second, 13px is not a very small size, unless the rest of your text is enormous. That fact, together with your phrasing ("I want the content in small tag to be 13px of what other tags are") leads me to suspect that what you really mean is you want the <small> text to be a percentage of the rest of the text. You can do this as follows:

small {
  font-size: 13%;
}

However, this seems rather small. If you really want a percentage, I'd suggest something between 60% and 80%.

Answer 3

If you want to make it 13px exactly, Keltex's answer will do it for you.

If you want to reduce the size by 13 pixels from the base font-size of its parent, you have the following options as there is no "make it exactly 13 pixels less" operator available:

1. If you know the base font-size, hardcode a value that is your 13 pixels less in your selector.

2. Rely on percentages or ems to size it down appropriately. For instance, instead of "13 pixels less" think of it as being a given percentage of the base font-size. i.e.

   p{ font-size: 24px; }

   small{ font-size: 45% /* Will make it approximately 13 pixels smaller */ }

Answer 4

Your question is hard to understand. Do you want to make text in small tags the same size as the rest of the text? I'll assume that.

small {
  font-size: 100%;
}

This will make the small tag have the same font-size as the rest of the text.
Why you would want such a thing is beyond my comprehension, but you have your answer.

[edit] this has the same effect as @notJim's answer - if the parent's font-size changes, this one adapts accordingly and adopts that new size.

Answer 5

I think a better way is to do

small {
   font-size:inherit;
}

This way, the small tag will be the same size as whatever element it's contained in, so if for some reason you have:

<h1>This is some <small>small</small> text</h1>

The word "small" would be the same size as its surrounding words.

The one caveat with this is that I'm not sure if it will work in IE. I suspect that it will, but you'd have to try it to be sure.

You might want to look into using a CSS reset that takes care of this and similar issues for all tags.