• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css Specificity
 

Css Specificity

on

  • 8,100 views

A presentation with a brief overview about CSS Specificity and how to go about calculating it by myself, with a long list of references

A presentation with a brief overview about CSS Specificity and how to go about calculating it by myself, with a long list of references

Statistics

Views

Total Views
8,100
Views on SlideShare
7,926
Embed Views
174

Actions

Likes
10
Downloads
106
Comments
5

6 Embeds 174

http://mycourses.tstc.edu 147
http://www.slideshare.net 19
http://www.linkedin.com 3
http://moodlearchives.tstc.edu 2
http://tstc-sandbox.mrooms.net 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Well the camp went fantastic... it was wonderful meeting u guys and talking to u.... I got to know how aware students are these days.... I am not even half aware after 4 yr industry experience :) .... loved ur campus.... and wud definitely love to come again.... that is if u ppl wud like to hear me speak on the same boring topics
    Are you sure you want to
    Your message goes here
    Processing…
  • It all depends upon the sponsorship for the event.
    What do you think about OSScamp @ nainital.
    Are you sure you want to
    Your message goes here
    Processing…
  • thanx man!!!.... I hoped to deliver this talk at the camp.... but most of u were not aware of CSS much.... so, maybe next time (if u sponsor my visit :D)
    Are you sure you want to
    Your message goes here
    Processing…
  • good one.. my basics are still week.
    Are you sure you want to
    Your message goes here
    Processing…
  • good one manu... keep it up
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Css Specificity Css Specificity Presentation Transcript

    • CSS Specificity By Manu Goel
    • Contents
      • CSS Specificity
      • Exercise 1
      • Answer
      • General Priority
      • Specificity Hierarchy
      • Calculating Specificity
      • Excercise 1 (Revisited)
    • Contents
      • The Trump Card
      • Conclusion
      • References & Worthy Readings
      • Thank You
    • CSS Specificity
      • Specificity determines, which CSS rule is applied by the browsers
    • Excercise 1
      • Anchor with class “spl” will be green or red?
      • <style>
      • ul#blogroll a { color: red; }
      • a.spl { color: green; }
      • </style>
      • <ul id=&quot;blogroll&quot;>
      • <li><a href=&quot;b1.html&quot;>Blog 1</a></li>
      • <li><a href=&quot;b2.html&quot;>Blog 2</a></li>
      • <li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li>
      • <li><a href=&quot;b4.html&quot;>Blog 4</a></li>
      • </ul>
    • Answer
      • RED
    • General Priority
      • User Stylesheet
      • Author Stylesheet
        • Inline CSS declaration using STYLE attribute
        • Internal CSS, inside STYLE tags
        • External CSS file
    • Specificity Hierarchy pre, :before, :after, :first-line, etc .class, [attribute], :active, :focus, etc #whatever style=“color: blue;” color: blue !important; Example 1 Elements, pseudo-elements 10 Classes, attributes, pseudo-classes 100 IDs 1000 Inline styles n/a (Highest) !important Specificity Category
    • Calculating Specificity element selector (1) Sith power (specificity): 0, 0, 1 class selector (10) Sith power (specificity): 0, 1, 0 id selector (100) Sith power (specificity): 1, 0, 0
    •  
    • Excercise 1 (Revisited)
      • <style>
      • ul#blogroll a { color: red; } Specificity : 1,0,2
      • a.spl { color: green; } Specificity : 0,1,1
      • </style>
      • <ul id=&quot;blogroll&quot;>
      • <li><a href=&quot;b1.html&quot;>Blog 1</a></li>
      • <li><a href=&quot;b2.html&quot;>Blog 2</a></li>
      • <li><a href=&quot;b3.html&quot; class=&quot;spl&quot;>Blog 3</a></li>
      • <li><a href=&quot;b4.html&quot;>Blog 4</a></li>
      • </ul>
    • The Trump Card
      • !important is not the solution to specificity woes
      • This shortcut can lead to really messed up CSS in big projects
    • Conclusion
      • Minimize use of !important [ Understanding Specificity , Selector Specificity ]
      • Use id to make a rule more specific
      • Minimize the number of selectors [ Understanding Specificity ]
    • Conclusion
      • Use the least specific selector combination required to style an element
      • Use LVHA for link styling link-visited-hover-active [ Link Specificity ]
      • If in confusion use [ CSS specificity calculator ]
    • References & Worthy Readings
      • http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
      • http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
      • http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/
      • http://juicystudio.com/article/selector-specificity.php
      • http://www.htmldog.com/guides/cssadvanced/specificity/
      • http://meyerweb.com/eric/css/link-specificity.html
      • http://www.w3.org/TR/REC-CSS2/cascade.html#specificity
      • http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
      • http://iamacamera.org/default.aspx?id=95
      • http://www.rebelinblue.com/specificity.php
      • http://www.brunildo.org/test/IEASpec.html
      • Thank You