+ 2

Font-size as the base styling for all the html document

https://code.sololearn.com/Wux57anUvzCn Font size with a base size for the wholw html document. But elements that are inside the container double themselthes. How to avoid it ? I tried to use inherit as a solution. By the way I started with 150% and not with px because I want to stak to the browser default setting wich is commonly 16px.

html css font-size

17th Apr 2017, 2:25 PM

זוהר צ'יפרוט

6 Answers

+ 7

The 'inherit' property value inherit the value of the same property of parent... The only parent of the unique element <body> is the <html> element ( the document ). So, by defining 'font-size:inherit;', you simply get the default value ^^ As @Yaroslav Pieskov suggest, I think you made mistake with your 'b*' css selector: it's not valid... Did you think that you select all element starting by 'b'? It's not the case. A '*' alone target all elements, a 'b *' ( with a space between ) target all element child of all <b> elements... For changing all elements font-size, you need to declare a 'font-size' to the <body> only ( as default font-size for almost elements, except <form> and <hn> elements, is 'inherit' by default, so you must define 'font-size' for <input> and others <form> kind of elements ). Font-size of <hn> ( h1 to h6 ) are defined by defaut as a percentage of the inherited font-size: so, without specific redefining of their value, they are bigger than base text ( body font size )... to get same value, you need to define '100%' ( of inherited font-size -- if the size of the parent is redefined, may differ from body size ), '1rem' ( equals 100% of base/body font size ). WARNING: By redefining font-size of <form> family elements, you don't redefine size of checkbox, radio button, and so on... So, for too much different size from default, these elements aren't still good designed: you could redesign them, but it's not simple at all, and for some things can be limited regarding of differents browsers possibility ( in general, you should use prefixed property specific to each browsers -- moz, o, ms, webkit... )

17th Apr 2017, 3:58 PM

visph

+ 2

well, how could you put inherit, into body font-size method? (the comment code) the elements inside the body tag that should have the inherit

17th Apr 2017, 2:41 PM

Welliton Malta

+ 1

@visph not sure if we're think about same things and not so sure about different brosers default settings,but. You can try to reset every option in css (google reset css or try link down here,it's just first I found :D) https://meyerweb.com/eric/tools/css/reset/ But...on practice it's not realy usefull...if you have problem - just go for it's place and fix instead of making so much code for nothin' mostly.

10th May 2017, 10:46 PM

Rose Sevenyears