Just another weblog

  • Calendar

    March 2010
    M T W T F S S
    « Feb   Apr »
  • Recent Posts

  • Pages

  • Advertisements

Week 8

Posted by barbaramilligansblog on March 9, 2010

Difference between ID and Class

  • With IDs each element can have only one ID and each page can have only one element with that ID
  • With Classes you can use the same class on multiple elements and multiple classes on the same element.

CSS Typograph

There are nine save font families that are commonly used Arial, Arial Black, Comic Sans Ms, Courier New, Georgia, Impact, Time New Roman, Trebuchet Ms and Verdana. You will need more than one font incase the user does not have the font that you have choose. The declaration for this is:

  • font-family: ‘Calisto MT’, Georgia, ‘Times New Roman’, serif;

If you want specific font you could rely on images to display your text.

sIFR (Scalable Inman Flash Replacement):

  • It allows you to apply any choose of font to the headings by using Flash and JavaScript
  • To down load the latest version visit

Mike Davidson’s sIFR Pages

Mark Wubbin’s sIFR Wiki

Text Spacing:


  • Kerning is the adjustment of the space in between the individual letters

To make a letter-by-letter adjustment use the CSS property (letter-spacing)

  • Tracking is the adjustment of the space is between letterforms

word-spacing is the CSS property


  • Leading is the vertical space between the line, the CSS property is( line-height: 1.5em; )

em is the CSS measurement of the hole letter, from the cap height to the lowest descender. If you have 1.2  ems = 12 pixels and 3.5ems=35 pixels

Text Alignment:

  •  CSS property for justify (text-alignment and set it to justify)

Avoid using justified text in narrow spaces

  • You can also use left, right or center for the CSS property text-alignment

To see what text will look like in CSS with different leading, tracking and alignment go to:

Fixed-width Fonts:

  • To display a fix-width font in CSS wrap it with <pre></pre> tags. pre is short for preformed text, also you can use the <pre> tags to preserves tab, spaces and line breaks. This will only work if it is within a box of preformatted text. If you want tags are in your code you will need you replace any <s with &lt; and any >s with &gt;

Free and Shareware Font Galleries:

Choosing the right fond: The first thing to do is define the target audience and the feeling you are trying to evoke.

Special Character:

There is a website that will show a complete list of codes to be able to place the special character in our HTML documents.

Creating the Home Page:

Keep the home page simple use limited text. Have a singular message that’s conveyed in large type. Also have links to the most important features. San serif fonts in small body text is more readable. Notes

The structural elements that are needed to be on a homepage are the Page Title, Header, Content and Footer. When designing the home page member to think about what is important, what is structural, how will the layout invite the user, to be able to see and to understand the content and the features.

The features of a home page should always have a

  • Site Identifier is usually on the top left (Logos, text, and/or branding)
  • Sitewide Utilities is usually on the top right (shopping cart, search engine and/or password)
  • Primary Navigation is usually right under the Site Identifier and Untilities(use only 5 or 6 buttons on home page)
  • Second Navigation is in a sidebar and is usually under the Primary Navigation (new info, items, features, and updates)
  • Main Section Title (distinct and easy to read)
  • Embedded Links can be it the content(gives access to other parts of the site)
  • Body Text (content can be text or images)
  • Subsection Title  is to divide into smaller groups so the use can navigate easily
  • Legal  / Contact / Date

The Three Passes:

  • First pass, gradual perception: We see colors, shapes, main areas
  • Second pass: We start really understanding what each of those areas may be
  • Third pass: We actually pick an area to read deeply

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: