Menu
Following advice in The 6 Most Important CSS Techniques You Need To Know, I set my body's font-size to 62.5%, the container div's font-size to 1.4 em (slight variation from the article). p.tags and p.published's font-size is set to 1em.
However, this doesn't work for me. Both the normal text and text in p.tags and p.published comes out to be the same size (16.8px as computed by Firebug). Can you explain why my code isn't working? I am testing in Firefox 3.6.3. The sample page shown by the author works just fine in the very same browser.
I've reproduced the entire page below—apologies for the length of it, but I thought it better to not leave out anything.
<html>
<head>
<title>Title</title>
<style type="text/css">
body {
font-family: Georgia, "Century Schoolbook", "Times New Roman", Serif;
font-size: 62.5%;
background-color: #2B3856; /* Dark slate blue */
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Helvetica, Tahoma, "Sans Serif";
color: #2B3856;
margin-top: 2px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
color: #2B3856;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
text-decoration: underline;
}
div#container {
width: 800px;
font-size: 1.4em;
margin: 5px auto;
background-color: #E3E4FA; /* Lavender */
}
#sidebar {
width: 200px;
float: right;
margin: 0px;
padding: 0px;
}
#sidebar div {
padding: 0 5px 5px;
}
#sidebar div.shadowbox { margin-right: 5px; }
#content {
width: 600px;
float: left;
margin: 0px;
padding: 0px;
}
#header {
/*background-color: white;*/
background-color: #2B3856; /* #E3E4FA; Lavender */
margin-bottom: 5px;
height: 100px;
}
#header h1 {
color: #B93B8F; /* Plum */
line-height: 100px;
text-align: center;
font-size: 45px;
}
#description {
color: #7D1B7E /* Dark Orchid */
}
a {
text-decoration: underline;
color: #153E7E;
}
a:hover {
text-decoration: none;
}
div#posts {
padding: 0px;
font-size: 1.2em;
margin: 0px;
}
div#posts div.post {
padding: 5px;
margin: 0px 5px 15px 5px;
}
p.tags, p.published {
font-size: 1em;
}
.shadowbox {
background: repeat 0 0 url('http://www.jawsalgorhythmics.com/images/darkness-100x100-10pct.png');
}
.justifycenter { text-align: center; }
.floatright { float:right; }
.floatleft { float: left; }
.clearright { clear: right; }
.clearleft { clear:left; }
.clearboth { clear: both; }
.halfsidebarwidth { width: 82px; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Odds 'n Ends</h1>
</div> <!-- header -->
<div id="sidebar">
<div class="shadowbox">
<br /><p class="justifycenter"><img width="64" height="64" src="{PortraitURL-64}" /></p>
<div class="floatleft halfsidebarwidth"><a href="/archive" class="archive">Archives</a></div>
<div class="floatleft halfsidebarwidth"><a href="{RSS}" class="rss">RSS</a></div>
<div class="clearboth"></div>
</div>
</div> <!-- sidebar -->
<div id="content">
<div id="posts">
<div class="post shadowbox">
<span class="quote">
"It does not matter how slow you go so long as you do not stop."
<div class="source">Wisdom of <a href="#" title="http://en.wikipedia.org/wiki/Confucius">Confucius</a></div>
</span>
<p class="tags">Tags: #<a href="#" title="http://demo.tumblr.com/tagged/wisdom">wisdom</a> </p>
<p class="published">Posted: Nov 08, 2006 at 2:27 pm
<a href="#" title="http://demo.tumblr.com/post/236/it-does-not-matter-how-slow-you-go-so-long-as-you">Permalink</a> <a href="#" title="http://tumblr.com/xr06k">Short URL</a></p>
</div>
</div> <!-- posts -->
</div> <!-- content -->
<div class="clearboth"></div>
<div id="footer" style="text-align: justify;">
<h1>The footer</h1>
</div>
</div> <!-- container -->
</body>
</html>
897
To change your display in Windows, select Start > Settings > Accessibility > Text size. To make only the text on your screen larger, adjust the slider next to Text size.
Because HTML is not responsible for font sizes. That's what CSS is for. HTML has no business changing any font size. That's what CSS is for.
In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.
Your <p class="tags"> and <p class="published"> elements are inside the container div, which has a font size of 1.4em, and also inside in the posts div, which has a font size of 1.2em. I think that setting the font size of the paragraphs to 1em doesn't really do anything, as the em unit is cumulative. So if your "root" font size is 62.5%, it's going to be increased 40% for the first div, and increased another 20% for the second div. Your two paragraphs will also have this font size, as they aren't increasing or decreasing the size.
Basically, if you want the "tags" and "published" paragraphs to have smaller text, give them a size of less than one, e.g. 0.9em. This will give them a size 10% less than other elements in the same parent div.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
