Lecture 10 – Formatting with Styles

Outline
 In the previous lectures, we discussed:
 Constructing individual CSS Style rules:
 Creating Style-rule Selectors
 Applying Style rules:
 Via external and internal sheets, and individually.
 Resolution of several conflicting styles (the Cascade).
 In this Lecture, we continue our discussion of CSS
 By considering Formatting with Styles:
 Setting Font properties:
 font-family, font-style, font-weight, font-size, etc.
 We also touch on Setting Text properties:
 Text color
 With the remainder…
 background, word-spacing, letter-spacing, etc
 Covered next lecture.
 Introduction
 In the old days of HTML, tags were used for formatting:
 For making text bold or italic (<b> and <i>)…
 Or controlling font-size or color (e.g., <basefont>, <font>).
 For complicated documents this becomes very messy…
 Web programmers must wade through lots of code, to edit:
 HTML does not support good code maintenance.

 As a result, the W3C decided to slowly… :

 Remove (deprecate) tags for local formatting from HTML
 e.g.: The old <font> tag (actually, deprecated in HTML 4.01)
 It supports color, face, size, etc…
 But formatting is local (inconvenient).
 This resulted in XHTML, used to establish page structure…
 Note: a few still supported: <b>, <i>, <big>, <small>, <tt>, etc.

2. Adopt Style Sheets to apply formatting:

 The best supported is Cascading Style Sheets.

 Fortunately, CSS allows much better control!

Controlling Font Characteristics
 First of all, with CSS you may control a variety of font
characteristics (= font properties):
 Individual font properties:
 Family (font-family)
 Style (font-style)
 Weight, or thickness (font-weight)
 Size (font-size)
 Space between lines (line-height)
 And, also combined font control (the font property)
 This allows rather precise font control…
 Superior to the simple control provided by <font> , via the size
attribute:
 Seven-level selection (1-7).

 Let’s look at each of these properties…

XHTML Code for Examples
• We will be using the XHTML code shown below for examples:
Fonts 1: Choosing a Font Family
 You may specify the font family for your style rule…
 Using the font-family property. For instance:
h1,h2{font-family:“Arial Black”,“Helvetica Bold”, sans-serif}
p{font-family:Verdana, “Helvetica”, sans-serif}
 Because user fonts vary, multiple fonts may (should) be listed...
 Choices should be separated by commas.
 With multiple-word fonts in quotes.
 The browser uses the 1st appropriate choice it finds on the user’s system.
 The last should be a generic font, specified as final attempt to format:
 Serif, sans-serif, cursive, fantasy, monospace.
 Notes on Font Selection:
 Common Fonts include:
 Windows: Times New Roman, Arial.
 Macintosh: Times, Helvetica.
 Fonts for different alphabets may be listed together...
 Useful for formatting text with multiple alphabets.
 Note: The font-family property is inherited.
Fonts 2: Creating Italics
 You may specify italics via the font-style property.
 For example, here we specify italic text:

h1,h2{font-family:“Arial Black”,“Helvetica Bold”, sans-serif ;}

p{font-family:Verdana, “Helvetica”, sans-serif ;}
.emph{font-style:italic}

 Here, we apply the style rule by targeting the class, ‘emph’.

 Combined with a span (our generic line element).

 Generally, you may type either;

 italic: for italic text (a real italic font is used, if available);
 oblique: for oblique text (computer-generated italics).

 Note: you may also choose to remove italics…

 For instance, to emphasize text within a large block of italic text.
 For this, use {font-style:normal}.

 Note: The font-style property is inherited.

Fonts 3: Applying Bold Formatting
 You may specify bold text via the font-weight property.
 For example:
h1,h2{font-family:“Arial Black”,“Helvetica Bold”, sans-serif; font-weight:normal;}
p{font-family:Verdana, “Helvetica”, sans-serif ;}
.emph{font-style:italic; font-weight:bold ;}
a:hover{font-weight:bold ;}
 Here, we add a style to apply bold font to pseudo-class hover …
 We also emboldened the emph class, via font-weight…

 Instead of the set value, bold you may also choose to:
 Apply a relative weight…
 By choosing a value of lighter (= less bold) or bolder.
 Select a weight between 100 and 900 (100’s only; 9 values).
 Here, 400 is normal, while 700 is bold (Note: effects vary by font…)
 Note: Bold formatting may be removed with: {font-weight:normal},
 As is done above, for h1 and h2.
 Note: The font-weight property is inherited.
Fonts 4: Setting the Font Size
 You may control the size of fonts via the font-size property. Ex:
h1,h2{font-family:“Arial Black”,“Helvetica Bold”, sans-serif; font-weight:normal}
h1{font-size: 20px} h2{font-size: 14px}
p{font-family:Verdana, “Helvetica”, sans-serif ; font-size:12px}
.emph{font-style:italic; font-weight:bold}
a:hover{font-weight:bold} #toc{font-size: 12px}
 Here, we set the font sizes to absolute values:
 In pixels (px; most popular); For printing: cm, mm, points, picas.
 Note: Avg. pixel value is 1/80th of an inch.
 This is ‘Best Practice’: Except in IE6, allows users to tune the size:
 View  Text Size (Netscape, Firefox) or Zoom (Opera)
 You may instead use a keyword to set absolute size :
 7 values: xx-small, x-small, small, medium; large, x-large, xx-large
 Relative units may also be used:
 Via the em unit (y em = y times the parent’s font size).
 Via a percentage value (x%; works just like ems (1em = 100%))
 Via a relative keyword: larger or smaller.

 Note: The font-size property is inherited.

Fonts 5: Setting the Line Height
 You may control the line height using the line-height property:
 Here, the line-height refers to the amount of space between lines.
 Example:

h1,h2{font-family:“Arial Black”,“Helvetica Bold”, sans-serif; font-weight:normal}

h1{font-size: 20px} h2{font-size: 14px}
p{font-family:Verdana, “Helvetica”, sans-serif ; font-size:12px; line-height:150%}
.emph{font-style:italic; font-weight:bold}
a:hover{font-weight:bold} #toc{font-size: 12px}

 Line-height values may be specified via:

 An absolute value, as usual:
 px, mm, cm, em, picas, etc
 A percentage value (used here):
 n%, which is the percentage of the element font-size
 A multiplier:
 A number that will be multiplied by the element’s font-size:

 Note: The line-height property is inherited…

 But always as an absolute value.
 Fonts 6: Combined Formatting
 You may format all font properties, at once via the font property:
 Example (identical overall format to the previous slide):
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif}
h2{font-size: 14px}
p{font:12px/150% “Verdana”, “Helvetica”, sans-serif}
.emph{font-style:italic}
a:hover{font-weight:bold} #toc{font-size: 12px}

 To format using the font property:

 Specify each individual font property, separated by spaces:
 1. If desired, type {normal, oblique, italic} to set the font-style
 2. If desired, type {normal, bold, bolder, lighter} to set the font-weight.
 You may also use a multiple of 100, as before.
 3. Required: Specify the font-size.
 4. If desired, type /line-height…to set the line spacing;
 Note use of a / , instead of a space.
 5. Required: Specify a font-family list, separated by commas.
Controlling Text Characteristics
 With CSS you may also control a variety of text characteristics
 Via specific text properties:
1. Text Color (color)
2. Text Background Color (background)
3. Spacing (letter-spacing and word-spacing)
4. Adding Indents (text-indent)
5. White-space (white-space)
6. Text alignment (text-align)
7. Text case (text-transform)
8. Font variants, such as small capital letters (font-variant)
9. Text decorations, such as strike-throughs, etc (text-decoration)

 Combined with control of font properties…

 this supports rather precise control of textual appearance.
 We will look at each of these properties next lecture…
 For now, let’s quickly look at CSS colors.
CSS Colors (color property values)

z
 Text 1: Setting Font Color
 You may change the color of any text, via the color property:
 Example (start from previous example’s markup + font format):

h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif; color:navy}

h2{font-size: 14px} .emph{font-style:italic}
p{font:12px/150% “Verdana”, “Helvetica”, sans-serif; color:#cc00ff}
a:link{font-weight:bold; color:#cc00ff} a:visited{font-weight:normal}
a:hover{font-weight:bold; color:#0000ff}
#toc{font-size: 12px; color:#cc00ff }

 Note: The color property is inherited.

Summary
 In this Lecture, we continued our discussion of CSS
 By considering Formatting with Styles:
 Setting Font properties:
 font-family, font-style, font-weight, font-size, and line-height.
 We also began discussing Setting Text properties:
 Introduction: CSS colors
 1. Setting text color

 In the next lecture,

 We continue our discussion of setting text properties:
2. Background Color (background)
3. Spacing (letter-spacing and word-spacing)
4. Adding Indents (text-indent)
5. White-space (white-space)
6. Text alignment (text-align)
7. Text case (text-transform)
8. Font variants, such as small caps (font-variant)
9. Text decorations, such as strike-throughs, etc (text-decoration)