Web topic 18 conflict resolution in css

1,557 views

Published on

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

No Downloads
Views
Total views
1,557
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web topic 18 conflict resolution in css

  1. 1. Web Authoring Topic 18 –Conflict Resolution in CSS
  2. 2. ObjectivesStudents should able to:1 Resolve potential conflicts with CSS2 Explain the hierarchy of rules in CSS applications • Cascade • Inheritance • Specificity
  3. 3. Conflicts in CSSIt is possible to have CSS declarations in bothan external style sheet and an embeddedstyle sheet.The order of the cascade specifies thatthe embedded styles will overrideconflicts with the external styles.
  4. 4. Conflicts in CSSIt is important to understand that only thosestyles that are in direct conflict will beoverridden.The browser will attempt to use both theexternal and embedded styles together.
  5. 5. Conflicts in CSSFor example, you have the followingdeclaration in your external style sheet:p{ font-family: Arial, Helvetical, sans-serif;color: #00F; font-size: 90%; line-height: 1.4em;}
  6. 6. Conflicts in CSSIn an embedded style sheet on a pagelinked to that external sheet, you have:p{ font-weight: bold; line-height: 1.2em; }
  7. 7. Conflicts in CSSThe resulting paragraph text on the pagewould be displayed in bold, blue Arial at90% with a line height of 1.2em.As the embedded style sheet is silent onthe font-family, color and size, thoseproperties are not overridden.
  8. 8. CascadeThe cascade in style sheets is a hierarchy ofapplication.Example:If you have an inline style for a paragraph, anembedded style for a paragraph, and a linkedstyle for a paragraph, which one will takeprecedence over another?
  9. 9. CascadeThe inline styles take precedence over theembedded styles, which take precedenceover the linked styles.
  10. 10. CascadeThe cascade appears is in the ordering ofmultiple style sheets within a document andthere are three style sheets linked to thedocument. Example: <link rel="stylesheet" type="text/css“ href="molly1.css" /> <link rel="stylesheet" type="text/css" href="molly2.css" /> <link rel="stylesheet" type="text/css" href="molly3.css" />
  11. 11. CascadeThe rules of the cascade say that whichever islast in the list is the style that takesprecedence. So, styles in molly3.css will takeprecedence over molly2.css and so on.If youre struggling to figure out why your h2element isnt turning blue, the reason mightbe because that style is in conflict withanother h2 style that appears in a style sheetthat takes precedence within the hierarchy.
  12. 12. InheritanceInheritance is the relationship of parentelements to child elements.So, if youre finding conflicts in ground-up CSSdesign, be sure to look at how the styles for aparent element might be influencing the styleof its children or grandchildren.So, have a well-structured document.
  13. 13. SpecificitySpecificity is the weight or importance of agiven element and is calculated in a fairlycomplex way.If an element is higher in specificity (due tothese calculations), the style associated withthat element is what will be applied.
  14. 14. SpecificityAn example of this is that elements with anid will have the highest specificity becauseby their very nature, ids are extremelyspecific—they apply to one element withinthe document only.Therefore, styles for an id will takeprecedence over other styles you attemptto apply to that element.

×