Lecture 11 – Formatting with

Styles (2)
Outline
 In the last 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 this Lecture,
 We continue our discussion of Text properties…
 In the context of a detailed, step-by-step example:
 Our simple chess-openings page.
Controlling Text Characteristics
 As we mentioned, with CSS you may 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 caps (font-variant)
9. Text decorations, such as strike-throughs, etc (text-decoration)

 Combined with the control of font properties we saw last time…

 this supports rather precise control of textual appearance.
 We will look at each of these properties in detail.
 But first, for clarity let’s review a bit:
 Our example html page
 Setting text color
XHTML Code for Examples
• We will be using the XHTML code shown below for examples:
 Text 1: Setting Font Color (review)
 You may change the color of any text, via the color property:
 Example (Start from previous lecture’s markup + color 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.

 Text 2: Setting Text Background Color
 You may set an element’s background color:
 Using the background-color property:
body{background-color:#99ccff}
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; background-color:#cccccc }

 The background-color property can take a variety of values:..

 Including specification of both color and images:
 To assign a specific color :
 type the predefined color (e.g., navy), or the color code (#000080)
 Here, we specify: a light gray background for the toc…
 And a sky blue background for the body.
 To specify no color,
 type the value, transparent (default value).

 Note: The background-color property is not inherited.

 Text 2s: Setting Text Background (Images)
 An image may be set as an element’s background…
 via 4 properties: background-image, -position, -repeat (tile), and -attachment.
#toc{font-size: 12px; color:#cc00ff;}
body{ background-image: url(../Pictures/chessboard.jpeg);
background-position: top right;
background-repeat: no-repeat;
background-attachment: fixed;}
 To select the image, use property: background-image .
 You must provide the image address via value, url( image.gif )
 Default value: none.

 To set the image location, use property: background-position.

 You must provide two values ( x and y ). Each may be:
 An absolute distance from the upper left corner.
 A percentage displacement .
 A value: x = { left, center, right } y = { top, center, bottom }

 To control image tiling, use property: background-repeat

 For horizontal , vertical , or both, use value: repeat-x, repeat-y, or repeat;
 Use value no-repeat for neither.

 To control image scrolling, use property: background-attachment.

 Type fixed or scroll.
 You may set all 4 at once, with the background ‘shortcut’ property (any order).
 Text 3: Setting Text Spacing
 You may set extra space between words and between letters:
 Using the word-spacing and letter-spacing properties:
body{background-color:#99ccff}
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif;
color:navy; letter-spacing: 0.2em}
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; background-color:#cccccc }

 word-spacing sets the tracking (the space between words):

 This property takes a length, with the usual values (px, em, etc).
 Negative values may be used (results will vary by browser…)
 A value of normal (or 0) specifies the default spacing.
 letter-spacing sets the kerning (the space between letters):
 This property also takes the usual length values (px, em, etc)
 Above, we add 0.2em = 0.2 x 20px = 4px of space between header words.

 Note: The absolute values computed for this property are inherited.
 Text 4: Adding Indents
 You may set the amount of space to precede a paragraph’s 1st line:
 Using the text-indent property:
body{background-color:#99ccff}
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif;
color:navy; letter-spacing: 0.4 em}
h2{font-size: 14px} .emph{font-style:italic}
p{font:12px/150% “Verdana”, “Helvetica”, sans-serif; color:#cc00ff;
text-indent: 1.0em}
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; background-color:#cccccc }

 The text-indent property takes the usual length values (px, em, etc):
 A positive value specifies a normal (to the right) indent;
 A negative value specifies creates a hanging indent.
 Above, we specify an indent of 1.0em = 1.0 x 12px = 12px of space.
 Use a value of normal (or 0) to specify the default spacing.

 Note: The absolute values computed for this property are inherited.
 Text 5: Setting White-Space Properties
 You may allow typed white-space in an element to be displayed:
 By setting the white-space property:
body{background-color:#99ccff}
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif;
color:navy; letter-spacing: 0.4 em}
h2{font-size: 14px} .emph{font-style:italic}
p{ font:12px/150% “Verdana”, “Helvetica”, sans-serif; color:#cc00ff;
text-indent: 1.0em} 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; background-color:#cccccc;
white-space: nowrap}

 The white-space property takes discrete values:

 A value of pre tells the browser to display all typed spaces and returns;
 Note: this has no effect on the font (in contrast, <pre> changes it to
monospaced…)
 A value of nowrap treats all spaces as non-breaking (for no wrapping);
 Here, we set the table of contents (toc) to not wrap.
 A value of normal treats extra white space as usual (ignores).
 Text 6: Aligning Text
 You may set the alignment of block-level (only) elements:
 By setting the text-align property:
body{background-color:#99ccff}
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif;
color:navy; letter-spacing: 0.4em; text-align: center }
h2{font-size: 14px} .emph{font-style:italic}
p{ font:12px/150% “Verdana”, “Helvetica”, sans-serif; color:#cc00ff;
text-indent: 1.0em; text-align:justify} 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; background-color:#cccccc;
white-space: nowrap; text-align:center}
 The text-align property takes the usual values:
 A value of left (default), right, or center aligns text accordingly.
 A value of justify aligns text on both the right and left.

 The text-align property may be applied only to block-level elements.

 To align inline content, place it within a block element (div, p)…
 And format with text-align.

 Note: The text-align property is inherited.

 Text 7: Changing Text Case
 You may define the text-case for your style:
 By setting the text-transform property:
body{background-color:#99ccff}
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif;
color:navy; letter-spacing: 0.4em; text-align: center }
h1{text-transform:uppercase} h2{font-size: 14px} .emph{font-style:italic}
p{ font:12px/150% “Verdana”, “Helvetica”, sans-serif; color:#cc00ff;
text-indent: 1.0em ; text-align:justify} 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; background-color:#cccccc;
white-space: nowrap; text-align:center}
 The text-transform property takes the following values:
 A value of capitalize sets the first word of each letter to uppercase.
 A value of uppercase sets all letters to uppercase.
 Here, we transform the h1 element’s text to uppercase.

 A value of lowercase sets all letters to lowercase.

 A value of none leaves the letters unchanged.

 Note: The text-transform property is inherited.

 Text 8: Using Small Caps
 Many fonts have a “small-caps” variant…
 You can specify use of this variant with the font-variant property:
body{background-color:#99ccff} .emp{font-style:italic}
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif;
color:navy; letter-spacing: 0.4em; text-align: center }
h1{text-transform:uppercase} h2{font-size: 14px; font-variant:small-caps}
p{ font:12px/150% “Verdana”, “Helvetica”, sans-serif; color:#cc00ff;
text-indent: 1.0em; text-align:justify} 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; background-color:#cccccc;
white-space: nowrap; text-align:center}
 The font-variant property takes the following values:
 A value of small-caps sets use of the small-caps.
 A value of none removes the small-caps.

 Note that not all fonts have a small-font variant.

 If there is no variant, many browsers will try to ‘fake’ small-caps…
 By attempting a reduction of the normal upper-case letters.
 Some (Netscape, Opera) are a bit better at this than others (IE6).
 Note: The font-variant property is inherited.
 Text 9: Decorating Text
 You may decorate your sheets with underlining, overlines, etc…
 By using the text-decoration property:
body{background-color:#99ccff} .emp{font-style:italic}
h1,h2{font: 20px “Arial Black”,“Helvetica Bold”, sans-serif; color:navy;
letter-spacing: 0.4em; text-align: center }
h1{text-transform:uppercase} h2{font-size: 14px; font-variant:small-caps}
p{font:12px/150% “Verdana”, “Helvetica”, sans-serif;color:#cc00ff; text-indent:1.0em}
a:visited{font-weight:normal; text-decoration:none}
a:link{font-weight:bold; color:#cc00ff; text-align:justify; text-decoration:none}
a:hover{font-weight:bold; color:#0000ff; text-decoration: underline}
#toc{font-size: 12px; color:#cc00ff; background-color:#cccccc;
white-space: nowrap; text-align:center}
 The text-decoration property takes various intuitive values:
 To underline text, use the underline value;
 To place an overline over text, use the overline value;
 To strike-out text, use the line-through value.
 Use the none value to get rid of all decorations (e.g., link underlines ).
 The blink value may also be used to make text blink on and off…
 But it is not supported in Netscape 6+ or IE6.

 Note: The text-decoration property is inherited.

Summary
 In the last two lectures, we have discussed CSS formatting:
1. Setting Font properties:
 font-family, font-style, font-weight, font-size, and line-height.
2. Setting Text properties:
 Including color:
 color, background, and adding background images
 Form:
 font-variant, white-space, text-decoration, and text-transform.
 And Alignment:
 word-spacing, letter-spacing, text-align, and text-indent.

 Together, these provide exquisite control over document format.

 In the next Lecture, we continue our discussion of CSS:
 Layout with Styles..
 Positioning elements using Flow and the Box Model…
 With some discussion of advantages over other layout methods
 tables, etc.
 Course Final Project
Task: Apply CSS to the Web Directory you created at Mid-term:
[1] Formatting with CSS: Create a set of style rules which specify:
(a) Font characteristics of your site: font-families, sizes, etc.
(b) Text characteristics of your site: text and background colors, spacing, etc.
(c) Demonstrate targeting elements by: Name, Class, ID, Context, and State.
[2] Style Application: Create a set of sheets to apply your style-rules:
(a) An External style sheet containing a common set of styles:
 To provide a common ‘look and feel’ for the pages in your directory.
(b) An Internal style sheet for each page, containing page-specific styles:
 To provide central control for page-by-page variations.

[3] Layout with CSS: Create a new page for your directory, in which you:
(a) Define multiple divisions, and set the page layout with CSS…
 By moving the elements out of the normal flow.
(b) Demonstrate at least 2 of: Absolute, Fixed, and Relative Positioning.
[4] Include a 1-2 page Word file, explaining your CSS format/layout:
 Describing how each above requirement (1a-c; 2a-b; 3a-b) is fulfilled.

Submit by Midnight on Thursday, July 26:

1. By upload, to the Final Project folder of this class’s (EA) Submit Folder.
Name your submission using your Last Name, Student ID, and the word, Final.