Lecture 11 - Formatting With Styles_2

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



A value of nowrap treats all spaces as non-breaking (for no wrapping); 



Note: this has no effect on the font (in contrast, <pre> changes it to monospaced…) 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. 





The blink value may also be used to make text blink on and off… 



Use the none value to get rid of all decorations (e.g., link underlines ). 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: 



Form: 





font-variant, white-space, text-decoration, and text-transform.

And Alignment: 



color, background, and adding background images

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.