This is the main page for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
Tidying Up the Formatting
Setting Widths
This is a “behind-the-scenes” modification that we should go ahead and make before we get too much farther. Chances are, you won’t see this affect your page’s display … but someone will, and that’s all to the good. We’re going to make it so our page displays within a certain range of preset widths — not too wide, not too narrow.
As we do on occasion, we’re just going to do it and be done. If you want some of the reasoning behind our next little venture, click the links below.
More about units of measuring size.
We are going to add two elements to our stylesheet: a min-width and a max-width. These stand for "minimum width" and "maximum width."
Why bother? Well, people use a tremendous variety of monitors that display in a tremendous variety of sizes. If you make your page display in a minimum and maximum width, you can avoid your page being shrunk to a very tiny size, or (more often) displaying in a tremendously wide display on a large monitor.
Let’s add this to our BODY element in our stylesheet:
min-width: 700px; max-width: 1200px;
(The units of measuring size section explains that px stands for pixels, and exactly what those are.
Why these choices?
Well, a minimum width of 700px ensures that people with relatively small displays will still see the entire page display without those annoying horizontal scrollbars. A max-width of 1200px gives people with wider displays the opportunity to have their page display at a reasonable width, without going overboard.
Save your page, refresh your browser, and take a look. You may not be able to see a difference. If you can’t, don’t worry. It may not impact your display. If you can, try your site on a computer with a really large or a really small monitor. Or change your monitor’s display size, if you know how to do that.
More about monitor display sizes.
Setting Font Sizes
Again, not such a glamorous task, but an essential one.
There’s a more in-depth look at the various ways to measure a font (and everything else) in a Web page in the Design Principles section:
More about units of measuring size.
However, this lesson, like the rest of them, is designed to get you moving as quickly as possible. So for the purposes of this lesson only, I’m going to have you set your font sizes in pixels, just like we did in the page width section above. (You may well want to start using ems to size your fonts later on down the road. When you make that decision, you’ll have my support.)
Take a look in your stylesheet. You’ll see the body element. You’re going to add a new line.
font-size: 16px;
Your entire body element should now look pretty much like this:
body {
background-color: #50a6c2;
background-image: url(images/backimg.jpg);
min-width: 700px;
max-width: 1200px;
font-size: 16px;
}
Save your file, refresh your browser, and see the results. You may, or may not, see a difference, depending on what your browser has as its default setting for font display.
Changing the Font Sizes for Your Headings
Left to its own devices, your browser sizes your headings based on the antiquated point sizes.
More about units of measuring size.
We don’t want that. Let’s size our headings based on our baseline font size of 16px. But instead of choosing pixel sizes, we’re going to size our headings relative to your body’s font size.
Why? Well, we’ll see after we do this.
Add this line of code to your stylesheet’s <h1> element:
font-size: 1.5em;
This makes your <h1> element now read something like:
h1 {
font-family: "Trebuchet MS", sans-serif;
color: #ff3030;
text-align: center;
font-size: 1.5em;
}
Save your file, refresh your browser, and see if there are any changes. There may not be much difference, because you haven’t gone wild with your sizing.
Let’s make a similar change to your <h2> element:
font-size: 1.25em;
which makes that element now appear as:
h2 {
color: #754719;
font-size: 1.25em;
}
Save, refresh, and see the difference. Not much, perhaps?
Well, let’s change the base font size and see how the headings change with them. This won’t be a permanent change, just a demonstration.
In your body tag, change the font size to 32px:
font-size: 32px;
Save and refresh. Now there’s a difference. See how the headings changed along with the font size? That’s what we mean by relative sizing.
Unless you really like the huge font size, change the body font size back to 32px.
Changing the Font Sizes for Your Paragraphs
I’ve (somewhat arbitrarily) set the base font size for your site as 16px. That’s because it’s a widely used “standard” size that we can easily play off of, adjusting heading and other sizes through various em sizings. But some people find this size too large (or perhaps too small) for their paragraph text, which is usually the bulk of the text on your site.
This change is optional, so try it, see if you like it, keep it if you do, and delete it if you don’t. We’re not going to put it in the example pages, so don’t look for it there.
The change is quite simple. Add this:
font-size: .9em;
to your p CSS rule. So your new rule will be:
p {
color: #f0f8ff;
font-size: .9em;
}
Try it out.
Check your work: take a look at an example page to see if you’ve gotten it right so far. Use your browser’s View Source (or Source, or maybe View Page Source), found in your right-click menu, to see the source code in the example, and make sure it matches up with yours.
