Home » CSS Essentials

Declare Font Properties

Submitted by Stan on 1 October 2009 - 11:18am

Take a quick look at the CSS you're going to use

  • selector {property: value;}

This is what you're going to do

In this lesson, you will change the font-stylings of bulleted list-items that appear within <div id="header"> </div>.

You will declare that bulleted list-items within #header must display either Tahoma, Verdana, or another sans-serif font-family if neither Tahoma or Verdana are loaded into your readers' computers.

You wil also modify the presentation of lower-case letters in #header contextualized bulleted list-items, forcing them to display as small-caps.

You might want to do this before you begin

Before conducting some new experiment with CSS, it's always good to do a little reading.

Here are a few titles that are sure to get you off to a great start:

  • Font and Text Properties, Web Design in a Nutshell (307-36)
  • Font Properties, Web Design in a Nutshell (307-22)
  • Rules Syntax, Web Design in a Nutshell (275-78)
  • CSS 2.1 Properties, Web Design in a Nutshell (684-721)

Okay, let's do it

  1. Launch your text editor.
  2. Open USB | My Documents | portfolio | projects | hypertexts | linear | <style.css>
  3. Set the font-family and font-variant properties for the #header-contextualized unordered (bulleted) list selector.

    body {font-size:1em;}
     
  4. Set the font-family for the body tag.

    body {font-size:1em; font-family: tahoma, verdana, sans-serif;}
     
  5. Set font-variant properties for the #header-contextualized unordered (bulleted) list selector.

    #header ul {margin-left:3em; margin-right:2em; font-variant: small-caps;}
     
  6. Remove the appropriate task-item from your invisible CSS comment, and save your changes to <style.css>.
  7. Launch PortableFileZilla. Connect to your Harrison Center FTP account. And upload <style.css> to the Internet.
    • Upload <style.css> from the left FileZilla window to the right FileZilla window
      1. from USB | My Documents | portfolio | projects | hypertexts | linear |
      2. to Harrison Center FTP | projects | hypertexts | linear
  8. Launch a web browser. Open http://harrisoncenter.us. Navigate to your class website. Find your name. Find "Electronic Literacy Narrative." Link to your "Electronic Literacy Narrative." And take a look.
    • IMPORTANT: You must remember to refresh your browser before looking at your modified webpages. Browser's cache webpages in order to speed up your browsing experience. If you forget to refresh your browser before looking at your modified webpages, you'll keep look at a cached version of your old webpage until you remember to refresh your browser.

So, what's changed?

The 1em declared in the body tag has established a baseline for the measure of all other text elements. All other element's text must now size relative to it. This extends to the point that if we set the body element to a "size of 1em, the measure of 1em becomes the baseline because it causes all other element's text to size relative to it.

Because your content text always goes inside other elements, such as p and h4, you then simply write rules that state that the p tag is .8em, and that text links are .7em, for example.

In this way, you establish proportional relationships between all the text elements of your design."

All fonts on the page have probably changed from serif (the default for my web browsers) to sans-serif fonts. The visible fonts have changed from being serif-style font (e.g., "Times New Roman") to being a sans-serif style font.

If your readers have the Tahoma font-family on their computers, then the bulleted list-items will render as Tahoma. If your readers do not have the Tahoma font-family on their computers but do have the Verdana font-family on their computers, then the bulleted list-items will render as Verdana.

If your readers have neither Tahoma nor Verdana font-families on their computers, then the bulleted list-items will default to another sans-serif font-family.

You have changed the presentation of lower-case text in our bulleted list-items from lower-case font to small-caps.

What did you gain for having done all this?

CSS text properties give significant power to web writers over presentation at the alphabetic level.

This extends to the point that if we set the body element to a "size of 1em, the measure of 1em becomes the baseline because it causes all other element's text to size relative to it. Because your content text always goes inside other elements, such as p and h4, you then simply write rules that state that the p tag is .8em, and that text links are .7em, for example. In this way, you establish proportional relationships between all the text elements of your design."

We have changed the font-family on the web from serif to sans-serif for good reason. "The small details of serif fonts provide useful additional visual information when you're reading print, but the inherently low-resolution of the screen does not render serif well, especially at small font sizes." As an aspiring web designer, you should use "sans-serif fonts, at least while you gain some experience using serif fonts. Sans-serif fonts look crisper and more professional -- simply changing from the default Times served up by virtually all browsers to a sans-serif font is the most effective way and immediate single thing you can do to make your site look more professional."

Do you want some help?

If you tried but were unable to complete this lesson, you should post a message to one of your class-related discussion forums.

Describe the trouble you are having in simple and direct language. You should cut and paste into the body of your message the complete webpage address of the page that is giving you trouble. That way, your readers will be able to review your source code and offer helpful suggestions.

Thereafter, you may do one of two things.

Make an appointment to see me during my regularly scheduled office hours.

Look for answers to your problem by searching the archives of a relevant Usenet discussion group. Or post a clearly explained request for help from the readers of a relevant Usenet discussion group.