oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
Now that you know how to measure length, it's time to put that length to use. You may already have guessed these elements from prior examples... but a formal introduction never hurts.
To change the size of text, the font-size property is used. This will always change the height of the text—if you set this value to 20px, the tallest letters in your font will appear 20 pixels tall. The default value in most browsers is 16px, although it can vary, and some people will change it.
html { font-size: 14px; }
h1 { font-size: 3em; }
h2 { font-size: 175%; }
Font size can be set using any length, absolutely or relatively. The most common lengths, of course, are the ones declared above—and in fact, you could use this exact combination of styling in one document with no problem.
It is easiest to use an em measurement for your html element, then use em values or percentages for every font size delcaration after that. If you change one value then everything downstream will change smoothly, unlike with absolute pixel values.
Along with changing font size, you may use line-height to change the spacing between each line of text within paragraphs and everywhere else. This can be left with no unit of measurement, instead being calculated relative to the font-size. The default value in Google Chrome and Mozilla Firefox seem to be different, but in general they trend toward 1.2.
Any element can be given a height and a width. This can be a length relative to its parent element (like 80%), or it can remain mostly the same (like 800px, 10em or 20rem).
Consider leaving the more absolute values to elements that you know the exact situations of, however. If all images are given a width of 500 pixels, and you put an image into a 400 pixel wide container, suddenly you have an image breaking out of its confines!
Height and width are defined very simply. Take this header element, for example:
header {
background-color: lightskyblue;
height: 3em;
width: 100%;
}
These rules ensure that the element takes up the entire width of its container—which header does by default, but it never hurts to be sure—and is 3 em lengths tall.
Some simple sizing can be the basis of creating a layout: if you change the body to be a width thinner than the html element, suddenly your website's body text becomes tighter and a little easier to read. You can even change the background colour of these two elements different, and now your page and its background stand out from each other.
But how do we give an element like the body a set width using absolute elements that will not be larger than the screen, if someone is visiting from mobile or on a smaller monitor? How do you make an element a certain height by default but leave room to grow if the content needs it? What about ensuring an image is never larger than its container? This is where minimum lengths and maximum lengths come into play.
It is easy to make larger containers and elements appear just fine on smaller screens such as mobile phones, provided you put in the work: as long as you use max-width instead of a static width, there should be no problem. Likewise, you can include a min-width to make sure it stays a certain length at minumum. You can even use all three rules together.
body {
max-width: 1000px;
min-height: 100vh;
}
1000 pixels is a very respectable width: about every computer monitor being used in the current day to browse the Internet is wider than that, so the body lives comfortably. On a screen smaller than 1000 pixels, for example a phone or a computer monitor with zoomed-in display settings, the body will simply change its width to take be whatever space it can get.
The body's height has also been changed to 100% of the viewport's height. This ensures that, even if there is leftover space, the body stretches to the bottom of the page.