CSS UNITS!!! there are so many of them: px, em, ex, rem, rex, %, vw, vh, ch, hold on, we're almost done, pc, pt, even milimeters, centimeters, and inches!
right now those are just a bunch of letters, but i want to talk about what's what and which i actually think are most useful.
disclaimer: while i aim to have accurate information on what units are what and how they work, some of this article will be my personal opinion! for a quick and complete guide to css units, check my readmore!
this tutorial assumes:
i need to use pixels more. px is the simplest unit in css. though my site may not currently live by these rules, pixels are the best unit for elements/attributes you want to give a static or absolute size. for example: font-size, or border-size.
ironically, one css pixel does not always mean one single physical screen pixel. this is to help ensure consistent display across different resolutions. again, more info here!
pixels are fairly self-explanatory. however, understanding them is important to understanding how to use other more advanced units.
an "em" [not to be confused with the html element <em>] is a relative measurement in css. this unit goes back to newspaper printing and physical typography, when it once represented the width of the widest letter [most often "M"!]. today in css, 1em is equal to the size of the font. for example:
html {
font-size: 11px; /* whereas 16px is the default in most browsers! */
}
.shouting {
font-size: 2em;
}
with the above css, the root font size is 11 pixels, just a little smaller than the default 16. however, elements with the shouting class are multiplied by 2, making their font size 22 pixels!
this relativity is great for heading elements [<h1>, <h2>, so on], as those are given their power by their relativity to other elements.
but hold on! what about "rem"?? let's look at another example.
html {
font-size: 11px;
}
.shouting {
font-size: 2em;
}
div#jumbotron {
font-size: 30px;
}
now, we want to have a section on our html page that's even louder. putting a 22px-sized font won't stand up to 30px... but we're NOT using 22px, we're using 2em! so if our html looks like this:
<div id="jumbotron">
<p>exciting announcement everyone!</p>
<a href="#" class="shouting">buy product here!</a>
</div>
the <a> element with the shouting class will be twice the size of its sibling <p>, at 60 pixels!
em is relative to the parent's font-size attribute. rem, on the other hand, is shorthand for "root-em", meaning that it's relative to the <html> element's font size. this allows you to have a little more control over the css rules you write, and specify your exceptions.
i still struggle with all the info i've dished so far! these next units are simpler, and expand on the same concept.
similar to the origin of "em"s, an "ex" is the height of a little-x in a font, which was often half the height of a capital M. therefore, an "ex" is half of an "em", and an "rex" is half of an "rem"!
i don't have any examples for this one. imagine the previous example, but using 4ex's instead!
the last four units i've talked about, em, rem, ex, and rex are all relative to the font's pixel size. these next units i talk about are going to be relevant to the dimensions of parent elements!
try this!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>worm boy tutorial babey!</title>
<style>
div {
background-color: mediumaquamarine;
width: 50%;
}
</style>
</head>
<body>
<div>
<p>text here :]</p>
</div>
</body>
</html>
it does what you would expect--the <div>'s width is about half of your total document's width. it's a little more complicated for height, so we'll use width as an example for now... now try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>worm boy tutorial babey!</title>
<style>
html {
background-color: white;
}
body {
background-color: violet;
margin: 0 auto; /* no top or bottom margin -- but an equal right and left margin.*/
width: 60%;
}
div {
background-color: mediumaquamarine;
width: 50%;
}
</style>
</head>
<body>
<div>
<p>text here</p>
</div>
</body>
</html>
oh. the world just got a little scarier.
for anyone not coding along:
where the turquoise is our <div>, and the pink is our <body> peeking out from behind.
this above scrap of code demonstrates not only relativity, but how little and malleable your body element is. yes! our div is still half the width of our body, we have proved that the % is relative to the immediate parent element's corresponding dimension, whether that is the <html> element, <body>, or even <div>. and nobody is surprised that our body is 60% the width of our total html, as we announced that rather plainly.
however, where is our body's height!? why is there that white strip at the top?? what is going on? what would happen if you set your body's height to 100%, you ask? nothing! there is no height measurement of the <html> element to be relative to!
this brings us to...
oh god more letters, and they're scary letters.
"vw" and "vh" very simply stand for "viewport width" and "viewport height"! where the "viewport" is the screen space available displaying your web page. 1vw is equal to 1% of your total viewport width, and 100vw is equal to the total 100% of your viewport width.
the relationship between % and vw/vh is similar to that of em and rem. where % is relative to the immedate parent element, vw and vh are relevant to the <html> element.
so let's return to the issue of height... add min-height: 100vh; to your <body> element.
awesome! now the pink body stretches the whole height of the viewport.
but hold on: why is there that white strip above the body? and WHY is there a SCROLLBAR if the height is supposed to be exactly matched the the viewport height!
removing the white background styling for our <html> element will turn the whole page pink! the gap in the above example will remain, however...
this is a weird quirk of css -- though the <body> element is a child of the <html> element, the <html> element can inherit from the <body> element if it doesn't have its own defined property.
this.. is another quirk of css that i don't quite understand: the gap comes from the <p> elements built-in 1em top and [and bottom] margin. try changing that <p> to <span> and watch the gap vanish! it's odd that the paragraph's margin isn't contained by the <div>, but i have a solution: add so much as a single pixel of padding to the <div>, and it'll snap to the margin needs of the <p> element.
this page... this page is beautiful. the <body> stretches from top to bottom. the <div> is contained totally. the <p> has the space it needs.
weird... but now! now, we have a setup for a page with no confusing height stuff, no hidden margins. this is how i am learning to style my <body> cleanly for this site!:
body {
margin: 0;
min-height: 100vh;
overflow: hidden;
... /* then all the fun settings. */
}
some quick notes:
margin: 0; is personal preference/needs! but be warned! there is a default 8px margin for the <body> element! this adds to the height of your total webpage if your min-height is set to 100vh!<html>'s background unset, your body's background will automatically cover the entire viewport, in whatever way you have it set to do so.in that last section, i didn't talk much about vw. so far, i don't use them much. setting your page's min-width to 100vw is in fact redundant, and sometimes only further complicates things.
check out some links below for more information, and what taught and inspired me to write all this!