Lecture 10 Formatting With Styles

Lecture 10 – Formatting with Styles

Outline 

In the previous lectures, we discussed: 

Constructing individual CSS Style rules: 



Applying Style rules: 





Creating Style-rule Selectors 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: 



We also touch on Setting Text properties: 



font-family, font-style, font-weight, font-size, etc. 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 ( and )… Or controlling font-size or color (e.g., , ).

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 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: , , , <small>, , 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:     





And, also combined font control (the font property)

This allows rather precise font control… 

Superior to the simple control provided by , via the size attribute: 



Family (font-family) Style (font-style) Weight, or thickness (font-weight) Size (font-size) Space between lines (line-height)

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. 





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: 



With multiple-word fonts in quotes.

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 … 



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}, 



We also emboldened the emph class, via font-weight…

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: 



A percentage value (used here): 



n%, which is the percentage of the element font-size

A multiplier: 



px, mm, cm, em, picas, etc

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)