Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. PART III: CSS FOR PRESENTATION Chapter 12: FORMATTING TEXT CSc2320
2 In this chapter The font-related properties Text color Text line settings such as line height, indents, and alignment Underlines and overlines Capitalization Letter and word spacing Descendant, ID, and class selectors Specificity 101 Homework 6
3 Font Properties Font-related properties font-family font-size font-weight font-style font-variant font The nature of the Web makes specifying type tricky Don t know which fonts are loaded on users machine Default font size varies by browsers and user preference
4 Specifying the font name font-family Properties Example Why specify more fonts? For back-up!
5 Generic font families When you specify a generic font family, the browser chooses an available font from that stylistic category. serif Times, Times New Roman, Georgia sans-serif Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva monospace (constant width) Courier, Courier New, and Andale Mono cursive (handwritten) Apple Chancery, Zapf-Chancery, and Comic Sans fantasy Impact, Western, or other decorative font
6 Generic font families Specifying strategies: start with your first choice then, provide some similar alternatives, then end with a generic font family
7 Specifying font size font-size Properties CSS Units of Measurement
8 Specifying font size Many ways:
9 Working with keywords Many designers like predefined absolute keywords: xx-small, x-small, small, medium, large, x- large, xx-large Default size: medium in most browsers Relative keywords: larger and smaller
10 Working with percentages and ems most popular way to specify font sizes: Percentages, ems (equal size with letter M) Use of percentage: Use of em:
11 font weight (boldness) font weight properties: Example:
12 Font style (italics) The font-style property affects the posture of the text, that is, whether the letter shapes are vertical (normal ) or slanted ( italic and oblique). Italic and oblique are same in most browsers
13 Font Variant (Small Caps) Font Variant Properties: In most cases, a true small caps font is not available, so browsers simulate small caps by scaling down uppercase letters in the current font.
14 The shortcut font property Define all font properties in order: Minimum: font-size, font-family
15 Changing Text Color Color property: The value of the color property can be one of 17 predefined color names or a numeric value describing a specific RGB color.
16 More Selector Types Applicable to all paragraphs or places containing these elements. What if some of these elements? Descendant selectors A descendant selector targets elements that are contained within (descendants of) another element. Descendant selectors are indicated in a list separated by a character space.
Descendant selectors More example: 17
18 ID selectors ID selectors allow you to target elements by their id values. The symbol that identifies ID selectors is the octothorp (#), also called a hash symbol. Example:
19 Class Selectors Class names are indicated with a period (.) in the selector. Example: To select all paragraphs with class= special, use: To apply a property to all elements in the same class:
20 Specificity 101 Example:
21 Text Line Adjustments Line height defines the minimum distance from baseline to baseline in text.
22 Indents The text-indent property indents the first line of text by a specified amount.
23 Horizontal Alignment
24 Underlines and Other Decorations put a line under, over, or through text, or turn the underline off under links Turn off underlines under linked text
25 Changing Capitalization
26 Spaced Out insert space between letters (letter-spacing) or words (word-spacing) Example:
27 Homework Reading Chapter 12 Homework 6: Finish excise 12-3 on page 228& 229 Due date: Oct. 20 th (Wednesday) Submit it as assignment6.html to your elocker server under public_html Don t forget to upload your.css or image files if used Check your page at http://validator.w3.org/ (Points will be deducted if more than 3 errors) Download detailed HW6 at here or: http://www.cs.gsu.edu/~zding/2010fall/csc2320/csc2320_hw6.pdf