Delicious.Com Bookmark this on Delicious StumbleUpon.Com  Recommend at StumbleUpon

Introduction to using "em" in CSS to set sizes

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.

How to control the size of text

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*/

/*then more comments*/

p.SimpleTest2x {color:#0033CC;

... 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 it!

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.

A warning...

"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?

Click here to go to the site's MAIN index... Helpful Hints is just one corner of the site.

Looking for email, domain registration, or web site hosting? If you visit 1&1's site from here, it helps me. They host my website, and I wouldn't put this link up for them if I wasn't happy with their service. They offer things for the beginner and the corporation.

Ad from page's editor: Yes.. I do enjoy compiling these things for you. I hope they are helpful. However... this doesn't pay my bills!!! Sheepdog Software (tm) is supposed to help do that, so if you found this stuff useful, (and you run a Windows or MS-DOS PC) please visit my freeware and shareware page, download something, and circulate it for me? Links on your page to this page would also be appreciated!
Click here to visit editor's freeware, shareware page.

How to email or write this page's editor, Tom Boyd

Valid HTML 4.01 Transitional 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!

Why does this page cause a script to run? Because of the Google panels, and the code for the search button. Also, I have my web-traffic monitored for me by eXTReMe tracker. They offer a free tracker. If you want to try one, check out their site. Why do I mention the script? Be sure you know all you need to about spyware.

....... P a g e . . . E n d s .....