Solved

CSS

Posted on 2011-09-08
7
195 Views
Last Modified: 2012-05-12
See attached CSS.

I changed the font size in body to 1.2 em (it was previously 0.95 em).

After doing this, the font size on <h4> changes too.

Why? I want <h4> & all the other <h> to say as they are specified.
style1.css
0
Comment
Question by:Richard Korts
  • 3
  • 3
7 Comments
 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 36504053
h4s are still a part of the body so anything that you do to the body will affect the h4s.
0
 

Author Comment

by:Richard Korts
ID: 36504087
to haloexpertsexchange:

So the fact that <h4> has it's own font specified does NOT override <body>?

How can I force it to do what I want?

Do I have to put some kind of "container" around the body & specify the font there? Then will <h4>, etc., override that?

Thanks
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36504111
Yes, specify a font for h4 to override that
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 36504113
it depends on the order that you have them declared in your css file.
if you have h4 declared first and then have the body declared the body will overwrite the css specified for the h4.
Also if you don't have a size declared for the h4 but do have one on the body it will take the one from the body even if you have other font attributes declared for the h4.
0
 

Author Comment

by:Richard Korts
ID: 36504223
To haloexpertsexchange:

Please look at the css file attached to the original posting.

I did not write this css myself, I inherited it.

Note that <body> precedes <h4> and <h4> has it's own font specification (which does not seem to apply).
Maybe I have to use in-line style where I want it?
0
 
LVL 13

Accepted Solution

by:
haloexpertsexchange earned 500 total points
ID: 36504286
I think the reason that all of your fonts are getting bigger is because you are using ems.
http://w3schools.com/cssref/css_units.asp

ems are relative font sizes so if you made your main font size larger it would stand to reason that if the h4 is .9 em of the overall standard font size that if you make the body font size larger you get a larger h4 and any other font-size declarations would also be proportionately larger.

from w3schools       
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
0
 

Author Closing Comment

by:Richard Korts
ID: 36505796
I changed all the em designations to px or pt.

Works perfectly.

Thanks
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question