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

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

selector { property: value; }

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

selector { property1: value1; property2: value2 }

 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



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

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

 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

 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

 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

 There are core fonts that all browsers set to adhere to:  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.

 Sizing text matters  There are reserved keywords: Source:

 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; }

 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.

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

 Character Spacing:  Line Height:

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

 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

 Changing  color  decoration  line height

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