Web topic 15 2 basic css layout

543 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
543
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web topic 15 2 basic css layout

  1. 1. Web Authoring Topic 15 – Basic CSS Layout Part 2
  2. 2. ObjectivesStudents should able to:1 Explain Cascading Style Sheet rule construction2. Cascading Style Sheet theories.
  3. 3. CSS ConstructionThis sample rules demonstrate some typicalconstructions used in selectors anddeclarations.
  4. 4. CSS TheoryFour CSS theories: - Cascade theory - Inheritance theory - Dependant theory - Specificity theory
  5. 5. Cascade TheoryCascade theoryThe cascade theory describes how the orderand placement of rules in the style sheet oron the page affects the application of styling.For example, both the following ruleschange the colour of the <h1> element h1 { color: blue; } h1 { color: red; } Which one is honoured by the browser?
  6. 6. Inheritance TheoryInheritance theoryThe inheritance theory describes how onerule can be affected by one or morepreviously 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. 7. Inheritance TheoryInheritance theoryIn this situation, all <h1> elements will beformatted as: blue, Verdana. However, <h1>elements contained, or nested, within a<div> element will inherit the Verdana fontbut be displayed in red.
  8. 8. Descendant TheoryDescendant theoryThe descendant theory describes howformatting can target a particular elementbased on its position in relationship to otherelementsExample: 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. 9. Descendant TheoryDescendant theory The first rule formats all <h1> elements everywhere in the page as blue, Verdana.
  10. 10. Descendant TheoryDescendant theoryThe second rule resets the font and colour tored, Impact for <h1> elements, but only whenthey appear within a <div> element.The third rule further narrows the target to <h1>elements within <div> elements that areformatted with a class of product, resetting thefont and colour again, this time to green, Times.
  11. 11. Specificity TheorySpecificity theorySpecificity describes the concept of howbrowsers determine what formatting toapply 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. 12. Which Rules?Browsers typically use the following order ofhierarchy, with 4 being the highest:1 Browser defaults2 External style sheet3 Internal style sheet (in the head section)4 Inline style (inside an HTML element) :

×