1. Ch 8 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach

2.  Microsoft Word example of use of Styles – in Action  First CSS p { color: teal; }

3. selector { property: value; }

4. What is a RULE? RULE SelectorDeclaration p{ color : red; } PropertyValue

5. selector { property1: value1; property2: value2 }

6.  Embedded within a Web page – part of the selector_list……  Styling the  Text colour  Background colour  Width  Headings  Inheritance  The default action  Specificity  Customisation of clauses

7.  http://www.webstandardistas.com/book/

8.  It is essential to make your code readable and adding comments help explain what your intentions were when you wrote the particular CSS.

9. Ch 9 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach

10.  Inheritance is the child of and is the parent of in this example. As you build more complicated examples the use of h1-h4, p, em, strong, blockquote, cite, abbr, ul, ol, li, a and img will also be children of body

11.  Inheritance  As the rules are children of the same parent they automatically inherit their properties for their style.  Specificity  Why does an h1 not be the same size as the body font size it inherits ?  Answer: there must be rules being applied as well as the ones you are creating.  Where are they located ?  Answer: default stylesheets

12.  Specificity  What/Where are they ?  They can be located in 3 different places:  Author Styles  Created by the author of the Web Page  User Styles  The User may have their preferred Stylesheet that they want applied – visual impairment  User Agent Styles  Browser has its own default styles  Is there an order to how the Rules are applied  Yes, we will see the process in Chapter 10

13.  There are core fonts that all browsers set to adhere to: http://www.webstandardistas.com/09/core_fonts.html http://www.webstandardistas.com/09/core_fonts.html  It is possible to list alternative font-family values font-family: Baskerville, Georgia, "Times New Roman", serif; So if Baskervile is not available it is substituted by Georgia and if it not available it is substituted by Times New Roman, etc.  Serif fonts are those decorated with decorative serifs or accents at the end of various letters – Times New Roman.  San-Serif fonts do not have the decoration - Arial.  Monospace fonts use the same spacing between characters regardless of the pairing of characters Couries New.

14.  Sizing text matters  There are reserved keywords: Source: http://www.w3schools.com/CSS/pr_font_font-size.asp

15.  Sizing text:  Pixels  Fixed and therefore not very accessible  Ems  The typical browser default font-size is 16px body { font-size : 62.5%; } 62.5% because it transforms 16 pixels to 10 pixels, which is easier to work with. p { font-size : 1.4em; }

16.  If you had to write each Rule out completely it will mean that the file size will get larger and therefore take longer to download.

17.  It is possible to transform text to:  UPPERCASE  lowercase  Capitalize

18.  Character Spacing:  Line Height:

19.  Paragraphs  text-align property  left (default)  right  center  justify  text-indent property

20.  CSS allows you to style how Web links appear to the user.  There are four ‘classes’ available to do this:  link  Unvisited link in a page  visited  Viewed recently  hover  Move mouse over  active  Clicking on the link  focus  Using the keyboard the user is focusing on this link

21.  Changing  color  decoration  line height

22.  Order is important in defining the CSS rules  LoVe HAte your Links  a:link (L)  a:visited (V)  a:hover (H)  a:active (A)