knystrom18 Posted October 14, 2011 Share Posted October 14, 2011 I set a CSS rule: html, body {... ...font-size: 14px;} And the header tags all scaled down in size from their default styling, but not to 14px. Why is that? Is there a goal within browsers rendering to keep headers and text proportionately sized? Link to comment Share on other sites More sharing options...
Ingolme Posted October 14, 2011 Share Posted October 14, 2011 The headers use "em" as a unit. ems are units that are relative to the font size of the parent. Link to comment Share on other sites More sharing options...
knystrom18 Posted October 14, 2011 Author Share Posted October 14, 2011 Then according to my rule above, since (to my knowledge, there is no parent to html) 1em would be equal to 14px? If I were to set the font to 10px, would then 1em be 10px? Link to comment Share on other sites More sharing options...
Ingolme Posted October 14, 2011 Share Posted October 14, 2011 Yes.And 1.2 ems would be 1.2 * 14. Link to comment Share on other sites More sharing options...
knystrom18 Posted October 14, 2011 Author Share Posted October 14, 2011 If there were no default font size set in a stylesheet, the browser's default font size, or users set default font size would take over (let's say 16px for both). So then 1em would be 16px, right? I think there can be something like a ".5em", but can there be negative em's like "-1em"? Link to comment Share on other sites More sharing options...
Ingolme Posted October 14, 2011 Share Posted October 14, 2011 No, there are no negative ems. I can't imagine how that would work. You can use 0.5 in order to make the font half its current size. Link to comment Share on other sites More sharing options...
knystrom18 Posted October 15, 2011 Author Share Posted October 15, 2011 So now I've got these rules: html, body { font-size: 10px;} ... h1 {font-size: 2em;}h2 {font-size: 1.8em;}h3 {font-size: 1.6em;} Can that be simplified in any way without using something like less.js? Link to comment Share on other sites More sharing options...
Ingolme Posted October 15, 2011 Share Posted October 15, 2011 What is "less.js"?It can't be simplified, but if you're keeping all your CSS in an external file it is good. Link to comment Share on other sites More sharing options...
knystrom18 Posted October 15, 2011 Author Share Posted October 15, 2011 less.js is above me, but very basically it severely cuts down on how much/many CSS rules you have to write. - http://lesscss.org/#synopsis All my CSS is in one external sheet. I learned that the hard way years ago, haha. Link to comment Share on other sites More sharing options...
Ingolme Posted October 15, 2011 Share Posted October 15, 2011 I wouldn't use that. It simplifies writing CSS, but does not make your page any more efficient, and it requires the user to have Javascript enabled. Link to comment Share on other sites More sharing options...
knystrom18 Posted October 15, 2011 Author Share Posted October 15, 2011 I don't because I don't know how. Thankfully, now I don't think I will for quite some time. I like pure CSS solutions anyways. Link to comment Share on other sites More sharing options...
thescientist Posted October 15, 2011 Share Posted October 15, 2011 The implementation seems pretty simple. It doesn't seem too hard to use. But for more advanced users, you can bypass the JS imposition by compiling it on the server side using Node. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.