Hello,
A friend and I are learning HTML and CSS. Our instructional video told us to type the following code to change font size:
h1 {
font-size:2em; }
h2 {
font-size:1.3em; }
h3 {
font-size:1.3;}
It displayed correctly on his browser. However on mine it displayed everything tagged as a h2 or h3 very small. I went back to the code and added em to the 1.6 and 1.3 (as seen in the image) and it matches correctly now.
Can anyone tell me why it displayed correctly on his without the em. Or what problems I may have made that resulted in mine not working?
If you leave off the "em" then the CSS is invalid and should not work. Your friend's shitty browser is making assumptions that it shouldn't be making.
So say I wanted to list ten things each getting smaller.
h1 {font-size:2em; }
h2 {font-size:1.9em; }
h3 {font-size:1.8em; }
h4 {font-size:1.7em; }
h5 {font-size:1.6em; }
h6 {font-size:1.5em; }
h7 {font-size:1.4em; }
h8 {font-size:1.3em; }
h9 {font-size:1.2em; }
h10 {font-size:1.1em; }
Would be the proper way to display that?
>>54499102
his browser probably defaults to em, your probably defaults to pt
moral of the story: always specify a unit
also em is the relative percentage of your browser's default font size
so 1.5 em is 150% size, or 50% larger than default
>>54499405
there is no h7, h8, h9 or h10 tags
>>54499405
no, there are only 6 heading tags in html
>>54499405
that would be one way
bear in mind <h> tags are for headings, if you just want different size text use a proper class
i.e<style>
.bigText { font-size: 2em }
.mediumText { font-size: 1.5em }
.smallText { .8em }
</style>
<p class='bigText'>
some big text here
</p>
>>54499102
>using 'em'
Disgusting...
>>54499478
>bigText
big-text D:<
>>54499437
>also em is the relative percentage of your browser's default font size
no it's relative to the inherited computed font size of the element, rem is closer to what you said since it's root em
>>54499102
The browser needs to know what unit you're using.
It won't know if it's em, px, pt or %, so it'll ignore it because your value is invalid.
>>54499439
>>54499448
it doesn't really matter these days, you can just make up any element name you want and it'll work
>>54499489
it's pretty much the best one to use to guarantee proper text scaling when the user zooms their browser
>>54499495
yeah.. i had to think twice on the convention.. 4chan uses camel case so i stuck with that
Well thank you guys for the help. This made me think of another question though. Say I wanted to make point by saying a small organism could fit two on this period . If someone has there default size set to a very large size it would obviously be a large black O instead of the "normal" size period. Is there a certain way to code and make the browser display it at the standard size?
>>54499520
what
>>54499520
Not really. Then you still have to take into account that a period on a large monitor is not the same as one on a smartphone. "Fitting in a period" isn't a real scientific measurement anyway, but people will still understand it to mean yes, it must be very small.
Sorry, realize that was a little strangely worded.
Say I want a text to be 1" no matter what browser settings the person is using is that possible?
