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

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

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

 The order of your CSS rules is important

 The BOX model Source:

 Applying margins, borders and padding

 Using CSS shorthand for margins, borders and padding

 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

 Using CSS shorthand for margins, borders and padding

 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

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

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

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

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

 A one-column CSS layout

auto;

 Centering text

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

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

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

 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