Discussion (reference stylin with CSS A Designers Guide, Charles Wyke-Smith, New Riders)

• Fonts
  • Different browsers have different fonts. Even when the fonts are the same, they may appear differently.
  • Fonts are the different kinds of typefaces. Each has a unique visual appearance. The larger group is called a font family. Within the font family there are font faces which are variations within the font family in which they belong.
  • Font properties relate to the size and appearance of collections of type.
  • Text properties relate to the font's treatment-setting its line height and letter spacing, underlining, etc.
  • Font length units can be specified as both absolute and relative. The em size is used as a relative measurement and means the size of the letter em in the particular font being used.
  • The five generic collections of names of fonts are
    1. Serif-little details on the letters at the ends of the character strokes. Examples are Times, Bodoni, and Garamond
    2. Sans-serif-has a move plain appearance and do not have any details at the ends of the character strokes. Examples include Helvetica, Ariel, and Verdana.
    3. Monospace-give equal spacing to every letter, so, an 'i' or an 'l' takes the same amount of space as a 'W' or an 'M'. Examples include Courier and Monotype.
    4. Cursive-looks like handwriting. Examples include Park Land and Brush Script.
    5. Fantasy-miscellaneous fonts that don't fit in another category.
  • The person viewing your page must have the font specified to see your font.
  • In CSS3 you will be able to automatically download fonts to display on the page, but current browsers do not support this.
  • To use fonts you list them in your order of preference. You can start your list with your preference, but it is wise to end with a generic name to be sure that the font is available. When the name has more than one word in it, put the name in quotes.
  • Font examples
    • class selector example
    • contextual selector example
• Sizing Fonts
  • You can use three different values to size fonts, absolute (pixels or inches), relative (percentages or ems), or keywords (x-small, small, large, and xx-large and others).
  • The pros and Cons of Using Proportional Sizing
    • Pros
      • Scales proportionally according to the text size menu choice. Great choice when the visually impaired are viewing your page because they will have set their own browsers to a larger type.
      • Future changes will align by proportion to the baseline.
    • Cons
      • You may not realize the actual size of the type.
      • If a user changes the default font sizing, this can change your layout design.
  • When sizing fonts, you should use even numbers. So instead of using 75%, use 76%.
  • When designating sizes, you should remember the rules of inheritance. You can actually set the size the html tag rather than the body tag. And notice if you have nesting, your sizing may actually get smaller.
• Font Properties
  • Examples are italic, normal, and oblique. (Oblique is probably not supported by your browser.)
• Font-Weight Property
  • You can use numbers from 100, 200, to 900 or bold, bolder, lighter, and normal.
• Font-Variant Property
  • Values include small-caps and normal. (Remember that caps are hard to read.)
• Font Property Shorthand
  • You can combine all the properties as a single font declaration and put the styles all together. But when doing that, you must include all of the values for weight, style, and variant in any order followed by size then family.
  • Text-Indent Property
    • You can use any length (positive or negative) to indent. This sets the starting position of text, not each line of text, to be indented. A negative value is used for a hanging indent. If you use a hanging indent, make sure that the left margin of the entire paragraph is not on the left of the page. You can also set the margin top and margin bottom values of paragraphs to 0.
  • Letter-Spacing Property
    • This value determines the values between letters
  • Word-Spacing Property
    • Similar to letter spacing except it determines the values between words.
  • Text-Decoration Property
    • You can underline, overline, strike-through, and blink text. Blinking text is considered irritating and underline is usually a cue for a link.
  • Text-Align Property
    • The values are left, right, center, and justify and are the same as in Word.
  • Line-Height Property
    • This determines the space between lines. This value is usually defaulted to 118 percent of the font size being used. The line height is shared between the line above and the line below the text. Changing the margin above to zero will not get rid of the previous text margin below. The vertical alignment of text is not provided in CSS except in tables. You can force it by working with line heights and margins above and below.
  • Text-Transform Property
    • Text transform changes the capitalization of text. Values are uppercase, lowercase, capitalize, and none.
  • Vertical-Align Property
    • Moves text up or down with respect to the baseline. Values are: any length value, sub, sup, top, middle, bottom.
• Drop-cap
  • The pseudo-element first-letter: represents the first character of the first line of text within an element
  • You can apply this pseudo-element inside of a class and use that class in your element. For example: in a div tag that uses a class called dec1, you would write
    <div class="dec1">
    The style sheet looks like:

        .decl:first-letter {font-size:600%; float:left;}
                

  • Use the first-letter psuedo-class to apply a class to the first letter that goes around the first letter of the line and you will get a "drop cap effect of that first letter.

Practice:

• Open the template.htm page in LTS.
• Click on Declaration of Independence screen shots
• Create a page declaration.htm that uses your fonts to create the heading and first paragraph of the first screen shot of the declaration of independence.
• Make sure that your pages validate. In LTS, click Tools, W3C Validate. Make any corrections necessary.
• LTS does not validate CSS. To validate CSS go to W3C Validation Service and validate by file upload.