COAP 3120 – Designing with Style Sheets

1. COAP 3120 – Designing with Style Sheets Week 2 – Cascade, Specificity, Inheritance Typography

2. CSS Cascade • There are five levels from where CSS code can be applied to a document • CSS rules that are higher in the cascade hierarchy, override the rules lower in the cascade hierarchy • The cascade hierarchy • User styles flagged with !important • Author styles flagged with !important • Author styles • inline • <style> • External file • User styles • Default (user agent) styles • The rules specified later, override the previous rules • p { color: green } • p { color: red } /* this rule overrides the previous */

3. CSS Cascade

4. CSS Cascade - !important declaration • Specifies that the specific rule should have precedence • E.g

5. CSS Specificity • Every CSS ruleset has something called specificity (weight) • When there are 2 or more rules that can be applied to an element, the one with the highest specificity has precedence • Specificity is calculated based on the following • style • ID selectors • Class selectors • Element type (and pseudo) selectors

6. CSS Specificity • Normally when there is something declared in style it has highest specificity (unless overridden with !important) • The other 3 specify their weight as follows • ID Selector – “weight 100” • Class Selector – “weight 10” • Attribute Selector – “weight 10” • Element Selector – “weight 1”

7. CSS Specificity - Examples • #header – weight “100” (or “1,0,0”) • #header #logo – weight “200” • #header .info – weight “210” • #header .info .contact – weight “220” • #header a – weight “201” • #header .info a – weight “211” • .info h2 – weight “011” • h2 span – weight “002” • span – weight “001” • span.info – weight “011” • div span.info – weight “012” • * - weight “000”

8. CSS Specificity – Star Wars http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

9. CSS Inheritance • Some attributes are inherited from parent elements • Useful because we do not have to repeat rules for every element • e.g. • body { color: green } • p, li, div, h1, h2 { color: green } • Properties that are inherited • as • Properties that are not inherited • as

10. TYpography

11. What is Typography?

12. CSS Typography Properties • font-familysets the font family for text content • font-sizesets the font size for text content • font-weightsets the font weight for text content • font-stylesets the font style for text content • font-variantsets the font variant for text content • fontspecifies font properties • letter-spacingsets the letter spacing for text content • word-spacingsets the word spacing for text content • line-heightsets the line height • text-alignsets the horizontal text alignment • text-decorationspecifies the decorations added to the text content of an element • text-indentsets the indention of the first line of text in a block • text-transformcontrols the capitalization of text • text-shadowspecifies a text shadow effect added to the text content of an element • vertical-aligncontrols vertical alignment • white-spacecontrols how whitespace is handled inside an element

13. font-family • Sets a prioritized list of font family names and/or generic family names to be used to display a given element’s text content • A user agent will use the first family that’s available. Since there’s no guarantee that any particular font will be available, a generic family name should always be the last value in the list. • Note that it’s meaningless to list any font family names after a valid generic family name, since the latter (generic font family name) will always match an available font.

14. font-family • Generic font families: • Serif • Sans-serif • Cursive • Fantasy • Monospace body { font-family: Times, "new century schoolbook", serif; }

15. Safe Web Fonts • Found both on Windows and Mac OS X: • Arial • Arial Black • Comic Sans MS • Courier New • Georgia • Impact • Times New Roman • Trebuchet MS • Verdana

16. Interesting Web Font Alternatives • Lucida Grande and Lucida Sans Unicode: font-family: “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif; • Futura: font-family: Futura, Helvetica, Arial, sans-serif; • Helvetica Neue: font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; • Gill Sans: font-family: “Gill Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Arial, sans-serif; • Palatino: font-family: Palatino, Georgia, “Times New Roman”, serif; • From Simon Collison’s “Beginning CSS Web Development”, Apress 2006.

17. More Safe Web Fonts • http://cssfontstack.com/

18. font-size • Value: length, percentage, absolute-size, relative-size. • Initial: medium (16px). • Applies to: all elements. • Inherited. • Percentages: relative to parent’s font size.

19. Units of Measure • Lengthvalue: whole, fractional, 0 • Absolute: • Point: pt, 1/72in, PostScript printers, typesetters. • Pica: pc, 12pt, 1/6in. • Inch: in, 72pt, 2.54cm. • Millimeter and centimeter: mm, cm. • Use when you know the size of the output medium. • Relative (to the font size, except font-size): • They scale well: em, ex. • Pixels (picture element): relative, differences always visible, IE does not allow resizing.

20. Units of Measure II • Percentages • Scale well. • Relative to the same property’s size on the parent element (font size, width…) • Absolute-size keywords: • xx-small... medium...xx-large • Index to a table of font sizes kept by the browser; • Relative-size keywords: • larger, smaller.

21. Sizing Fonts with Percentages • Use a percentage on the BODY tag to make your fonts 10px large (62.50%, since 16px is the default). • Establish proportions with em units. They will be easy to remember: • 1em = 10px • 1.2em = 12px • etc.

22. Font Sizing Example • Percentage example : body { font-size: 62.5% } /* 10px */ h1 { font-size: 2.4em } /* 24px */ h2 { font-size: 2.0em } /* 20px */ p { font-size: 1.2em } /* 12px */

23. font-style • Values: normal, italic, oblique. • Italic vs. oblique: • Oblique and italic are the same in sans-serif fonts. • In serif fonts, oblique is slanted roman, but italic is normally designed separately. • Usually the smallcase “a” character can tell them apart

24. font-variant • Values: normal, small-caps. • A style of its own with upper and lowercase characters, but some browsers replace it with scaled down caps, slightly stretched. • Used together with text-transform: lowercase for acronyms. • Patchy support, so worth avoiding, if you expect high-quality results.

25. font-weight • Values: • Absolute: • bold, normal. • 100...400(normal)...700(bold)...900 • Relative: • bolder, lighter.

26. line-height • This property sets the line height, providing an indirect means to specify the leading or half-leading. • The leading is the difference between the content height and the (used) value of line-height • Rule of thumb: • Running text: 1.5 times the type size

27. font • Value: • font-style, font-variant, font-weight • font-size • line-height • font-family • Example • Use with caution - any omitted value will be set to its initial value, not its inherited value font: bold small-caps 62.5% Verdana, sans-serif;

28. text-decoration • Values: underline, overline, line-through, blink*, none. • Values can be combined in a space-separated list.

29. text-transform • Values: capitalize, uppercase, lowercase, none. • The value none neutralizes inherited values. acronym { font-variant: small-caps; text-transform: lowercase }

30. text-align • Values: left, right, center, justified. • Inherited. • Justified text is not properly hyphenated on the web. • Hard-coded hyphenation is difficult to maintain. • Left justification works best for running text. • Soft hyphens &shy; are not well supported.

31. text-indent • Sets the indentation of the first line of text • Values: <length> | <percentage> (refers to parent's width). • Inherited: computed once and passed along.

32. word-spacing, letter-spacing • Values: normal | <length> • Any length value is “added” to the normal value. Thus, a value of 0 is the same as normal. • Inheritance: computed once and inherited by all children.

33. vertical-align • Values: keyword | <length> | <percentage> • baseline: baseline (or bottom for img) with parent’s baseline. • text-top, text-bottom: top with top of tallest letter, bottom with bottom of lowest letter. • middle • top, bottom: top with top of tallest thing on line, except if its also aligned top; bottom with bottom of lowest thing on the line, except if its also aligned bottom. • Percentages: refer to the element’s line-height and raise or lower (negative values) the element by those amounts.

34. white-spacing • Values: normal | pre | nowrap | pre-wrap | pre-line • normal collapses extra white-space characters (spaces, tabs, newlines). • pre retains spaces, honours newlines and places tabs on columns multiple of 8, also suppressing justification. • nowrap causes a line break only on <br />. • pre-wrap behaves like pre, but adds line breaks when necessary. • pre-line preserves newlines only. • Inherited.

35. Color Best Practices • Don’t use too much color contrast. • Don’t use too little color contrast: use an online contrast checker. • Text darker than the background reads easier than the opposite. • Use colors from a single palette to bind elements but differentiate their state (links, headings, menus/submenus).

36. Measure Best Practices • Ideally a line should have between 50 and 70 characters. • Changing a typeface requires measure adjustments. • Larger interlinear space allows for longer lines. • Use em or percentage units to establish proportions and make your styles manageable. • The white-space property is not easy to maintain. • The <pre> element is different from the “pre” white-space property value in the typeface.

37. Paragraph Best Practices • Paragraphs of different importance (body text, notes) should be easily separated and differentiated. • In running text, paragraphs should be easy to tell apart, but shouldn’t be separated. • Use either indents or white space between them. • Full justification is difficult to achieve without hyphenation. • Do not indent right-justified text.

38. Typography Testing • http://www.typetester.org/ • Adjust the different settings (fonts, font size, leading, colors, etc) for your project • Headings • Paragraphs

39. CSS 3 - @font-face • @font-face is a CSS3 property which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. • This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.

40. CanIUse.com - @font-face

41. Google Web Fonts • http://www.google.com/fonts • Free fonts for use on your web sites

42. More About CSS Typography • http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/ • http://hellohappy.org/beautiful-web-type/