Solved

CSS

Posted on 2011-09-08
7
192 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Question 5 39
Add animation to your css 12 32
stop navigation from wrapping 7 56
Put glyphicon in my input button 4 28
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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).

910 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now