Home » CSS Essentials

Declare Text Properties

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

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 increase the line-spacing of bulleted list-items that appear within #header from single- to double-spacing, that is, from default 100% to 200%.

You must also increase the spacing between letters in #header contextualized "list-item" words by 1ex (i.e., 1 measure of the lower-case letter x).

You might want to do this before we 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).
  • Text Properties, Web Design in a Nutshell (322-36).
  • Font Size, Web Design in a Nutshell (312-18).
  • 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 line-height and letter-spacing text properties for the #header-contextualized list-item selector.

    #header li {list-style-type: square; list-style-image: url(gem-red.gif); list-style-position: outside; line-height: 200%; letter-spacing: 1ex;}
     
  4. Remove the appropriate task-item from your invisible CSS comment, and save your changes to <style.css>.
  5. 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
  6. 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 line space between each bulleted list-item has increased from single to double space measure (i.e., 200%). And the space between the letters within each word has increased by 1 measure of the lower-case letter x (i.e., 1ex).

What did you gain for having done all this?

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

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.