Web topic 15 2 basic css layout

Web topic 15 2 basic css layout

• 1.
  Web Authoring Topic 15 – Basic CSS Layout Part 2
• 2.
  Objectives Students should ableto: 1 Explain Cascading Style Sheet rule construction 2. Cascading Style Sheet theories.
• 3.
  CSS Construction This samplerules demonstrate some typical constructions used in selectors and declarations.
• 4.
  CSS Theory Four CSStheories: - Cascade theory - Inheritance theory - Dependant theory - Specificity theory
• 5.
  Cascade Theory Cascade theory Thecascade theory describes how the order and placement of rules in the style sheet or on the page affects the application of styling. For example, both the following rules change the colour of the <h1> element h1 { color: blue; } h1 { color: red; } Which one is honoured by the browser?
• 6.
  Inheritance Theory Inheritance theory Theinheritance theory describes how one rule can be affected by one or more previously declared rules. Example:- Take a look at these rules: h1 { color: blue; font-family: Verdana; } div h1 { color: red; } Which one is honoured by the browser?
• 7.
  Inheritance Theory Inheritance theory Inthis situation, all <h1> elements will be formatted as: blue, Verdana. However, <h1> elements contained, or nested, within a <div> element will inherit the Verdana font but be displayed in red.
• 8.
  Descendant Theory Descendant theory Thedescendant theory describes how formatting can target a particular element based on its position in relationship to other elements Example: Interpret the following rules correctly: h1 { font-family: Verdana; color: blue; } div h1 { font-family: Impact; color: red; } div.product h1 { font-family: Times; color: green; }
• 9.
  Descendant Theory Descendant theory The first rule formats all <h1> elements everywhere in the page as blue, Verdana.
• 10.
  Descendant Theory Descendant theory Thesecond rule resets the font and colour to red, Impact for <h1> elements, but only when they appear within a <div> element. The third rule further narrows the target to <h1> elements within <div> elements that are formatted with a class of product, resetting the font and colour again, this time to green, Times.
• 11.
  Specificity Theory Specificity theory Specificitydescribes the concept of how browsers determine what formatting to apply when rules conflict. Example: h1 { font-family: Verdana; color: blue; } div h1 { font-family: Impact; color: red; } div.product h1 { font-family: Times; color: green; } :
• 12.
  Which Rules? Browsers typicallyuse the following order of hierarchy, with 4 being the highest: 1 Browser defaults 2 External style sheet 3 Internal style sheet (in the head section) 4 Inline style (inside an HTML element) :