Bookmark this on Delicious
Recommend at StumbleUpon
I would like to thank www.computershopper.co.uk/ magazine for getting me started with Google Web Fonts. Nik Rawlinson's "Web Expert" column in the "September" 2012 issue gave me my start. While I continue my subscription mainly on simple momentum, a gem like this from time to time always stays my "cancel it" hand. The web is great for many things, but you can't beat a team of editors scouring the web for things that are worth your time... and safe.
This page will show you about using CSS and font-size and the "em" unit to size text on web pages. The following should have been rendered in text about twice the size of the main text of this page...
Testing the Quick Brown Fox jumping over the lazy dog, 0123456789
If the "Testing the Quick Brown Fox..." is NOT about twice the size of the rest of the text, or if the main text is "odd" on this page, then I would love to hear from you as to what operating system you are using... Mac? Linux (which flavor)? XP?... and which browser.
This material follows on from material on another page I wrote about CSS use. If the following "goes to quickly", you may want to look at that other material first.
All I did was....
1) I made a stylesheet (I used a crude name: "CSSforHH4txtsize.css") containing...
/*Some comments... and... */
body{font-size:62.5%;}/*for IE*/
body{font-size:1em;}
/*then more comments*/
p.SimpleTest2x {color:#0033CC;
font-size:2em;}
... and saved that in the same place as the page you are reading is served from.
The two lines about "body" work together to "shift your gears" over to working with ems.
If you don't use the 62.5%, then your "default" text will be smaller than people are used to.
If you don't use 62.5%/1em, then, for starters, if you use ctrl-+ to zoom in on the screen, your default text will change size at a different rate than your other text. Sigh.
I don't fully understand it all... but I know it works... at least on some systems! I hope it works on every system.
(By the way, if you add "font-weight:bold;" you get what you might expect. If you have NOT said the text is to be bold in the CSS, you can still use the "bold" tags around it within the document.)
2) In the <head> section of the page you are reading, I put...
<link rel="stylesheet" href="CSSforHH4txtsize.css">
That's everything in place! Robert is your father's brother, as they say.
What did it take, in addition to steps 1 and 2 to arrange for the previous paragraph to appear as it does? I combined CSS and the normal "bold" tags...
The paragraph "That's everything..." was in my page as follows...
<p class="SimpleTest2x"></p>That's everything....</b></p>
After the way has been prepared, you just add the class="SimpleTest" bit when starting a paragraph.
If I'd wanted such elements not only to be that size, but also always "bold", I would have put "font-weight:bold;" in the CSS
Yes... you can create custom classes for other page elements, e.g. an <h2 class="SimpleTest">Header</h2>
You can even re-define basic elements, like the <p>Paragraph</p> and<h2>Header</h2> blocks.
Note! It would be usual to use the same .css file to control the appearance of several pages. In normal use, the name of the .css file would not tie it so closely to a single page of HTML as the name I've used for this page. The name could be, say "AFoolishName.css"... as long as you used that in each relevant place. The name is up to you. Choose something that helps you, like "HtmlTutorialsPages.css", which would be a fine name for the .css for a number of pages with help on writing HTML.
"In the land of the blind, the one-eyed man is king".
I am perhaps a "half eyed man" when it comes to CSS. And CSS is notorious for working inconsistently across different platforms. I hope the above has been interesting and useful. Please let me know if you have problems with what I've commended to you?
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org It almost passes! There are two "problems" which I have reasons for overlooking... but usually problems can (and should) be solved!
....... P a g e . . . E n d s .....