Page is a not externally linkable
lucy24 - 8:37 am on Dec 30, 2012 (gmt 0)
For ordinary text, "105%" means "105% of the size it would have been if I hadn't said anything". But headers aren't ordinary text. The difference is that even if you don't say anything about header size, the browser has laid down a default.
Let's do some hands-on stuff. It's more useful than reading explanations.
Make this into a document, name it anything ending in .htm or .html, and open in a browser:
<html>
<head>
</head>
<body>
<h1>Header 1</h1>
<p>Plain paragraph here</p>
<h2>Header 2</h2>
<p>Plain paragraph here</p>
<h3>Header 3</h3>
<p>Plain paragraph here</p>
<p>... and a second one so you can see the spacing</p>
<h4>Header 4</h4>
<p>Plain paragraph here</p>
<h5>Header 5</h5>
<p>Plain paragraph here</p>
<h6>Header 6</h6>
<p>Plain paragraph here</p>
<hr>
<table>
<tr>
<td>First row, first table cell</td>
<td>First row, second table cell</td>
</tr>
<tr>
<td>Second row, first table cell</td>
<td>Second row, second table cell, with extra text so you can see how it behaves when the browser has to wrap things around and make decisions about alignment</td>
</tr>
</table>
</body>
</html>
Pretty revolting isn't it? All those different sizes, margins and layouts are set by your browser. (Most browsers seem to come out pretty similar, although they don't have to.) You can throw in other things like lists if you feel like it.
Your template has taken a preliminary step by replacing these default styles with something intended to look a little less horrible. Anything written in a stylesheet takes priority over the browser's built-in styles. And you're going to take a further step by editing your template's stylesheet to make things look the way you want them to look.
Posts from earlier in this thread make it sound as if you're able to edit your stylesheet but you're afraid of breaking something. There is an easy way around this. Suppose your current stylesheet says
h1 {text-align: left; font-size: 120%; font-weight: bold;}
You are not going to change or delete this. Not yet. Instead, copy and paste the rule-- make sure you get the whole thing, down to the closing } brace-- and wrap one of them in comment tags so it looks like this:
/* original style */
/* h1 {text-align: left; font-size: 120%; font-weight: bold;} */
h1 {text-align: left; font-size: 120%; font-weight: bold;}
Anything inside those /* tags */ will be invisible to the CSS parser-- but it's perfectly visible to you. If you're working in a friendly editor, it may even show up in a different color to remind you. If you now change the working CSS
h1 {text-align: center; font-size: 200%; font-weight: normal; font-style: italic;}
and then decide you've made a dreadful mistake, all you have to do is copy from the original into your active CSS. Takes all the scariness away doesn't it? If the CSS is a free-standing document, you can even make a copy of the whole file and name it something like "original.css". Now edit away, and if you goof, just copy again from the original.
Now make a style sheet
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
</style>
and paste it into that generic html document, between the <head> and </head> lines. Open in a browser again-- or refresh the page if you never closed it-- and you'll see that all the headers are now the same size: you've replaced the browser's range of sizes. But they are still boldface and still left-aligned, because you didn't say anything about {text-align} or {font-weight}.
Delete or comment-out that "h1, h2..." line and replace it with
body {font-size: 200%;}
Reopen or refresh, and your headers are back to their original proportions-- only now everything is twice as big. Headers are inside the body (technical term: they are descendants of the body), so anything you say about the body will apply to the headers as well. Unless there's an intervening <div> that changes the size again.
Is the table at the bottom now smaller than everything else? Your browser has probably set it to
{font-size: medium;}
meaning the user's overall default size, regardless of what's happening around it. But if you add a line to your CSS
table {font-size: inherit;}
the table will puff up to match the surrounding text, whatever it happens to be. Change the line
body {font-size: 200%;}
to a different number, like 50%, and everything including the table will zoom downward.
And now let's give it all some proper styling. Replace the current stylesheet with
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family: sans-serif; margin-top: 2em; margin-bottom: 1em;}
h1 {font-size: 250%;}
h2 {font-size: 200%;}
h3 {font-size: 150%;}
h4 {font-size: 120%;}
h5 {font-size: 100%;}
h6 {font-size: 85%;}
table {font-size: inherit; border-collapse: separate; border-spacing: .25em; border: 1px solid black;}
td {text-align: left; vertical-align: top; padding: .5em; border: 1px solid black;}
p {margin-top: .5em; margin-bottom: 0;}
Notice all those measurements in ems? An em always means, uh, your own em. That is, it's determined by the current font size. Most of what I put in here is my own boilerplate. For example, headers generally have the same margins on paper-- but a higher-level header will have a physically bigger margin because it's in a bigger font.
Wasn't that fun?