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

2.  What exactly is the cascade ?  This is how the browser resolves conflicts of which CSS rule to apply when there is more than one CSS rule applied to the same element.

3. Combined “Virtual” Style Sheet Inline Style – 1 st Internal Style Sheet – 2 nd External Style Sheet 3 rd Browser’s Style Sheet – 4th Web_page.html

4.  The order of your CSS rules is important

5.  The BOX model Source: http://www.w3.org/TR/CSS21/box.html

6.  Applying margins, borders and padding

8.  Using CSS shorthand for margins, borders and padding

9.  Work clockwise from top -top -right -bottom -left  Applies to margins, borders and padding  Summarized as margin: 1, 2, 3, 4 sequence 1 -top 2 -right 3 -bottom 4 -left

10.  Using CSS shorthand for margins, borders and padding

11.  and elements  Help to group information into logical clusters  Often referred to as Content Areas  Generic holders of information  No inherent meaning whereas has a definite meaning  Should contain meaningful elements such as,, etc  - block-level  - inline  Controlled by  id (identification) and class (classification) attributes

12.  unique – so can only apply to the one place   Can be applied uniformly across many

13. #content { /* property : value pairs */ }.entry { /* property : value pairs */ }

14.  Choose the names for the identifiers carefully  Have meaning  Use a-z/A-Z/0-9,-_  Start with a letter and be careful as Header is considered different from header by the browsers.

15.  Each div in a layout can be given a:  width,  height,  colour and  position.

16.  A one-column CSS layout

17. auto;

18.  Centering text

20.  Using Descendant or Contextual Selectors to Minimise Markup  Look for any within a called footer

21.   Can be applied uniformly across many  Can be located within a Block-level element

23.  Background images in CSS  Body  Other elements can also have images in their background

24.  Background images in CSS body { background:url(../images/darkblueGrad2.gif) repeat-x; background-color:#01A9EA; font-family: Verdana, Arial, Helvetica, sans-serif; //font-size:0.7em; font-size:62.5%; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #666666; }  Other elements can also have images in their background