documentcss

CSSCASCADETypesofstylesheetsHTMLdocumentsmayhavethreetypesofstylesheetsappliedtothem.
Type1:User-agentstylesIfyoulookatawebpageinabrowser,evenawebpagewithoutanyCSSleattached,therearesomestylesalreadyinplace.
Headingsareoftenlargerinsize.
Unvisitedlinksareoftenblue,visitedlinksareoftenpurpleandallgeneralcontentisoftenblack.
ThisisbecauseallbrowsershavetheirownstylesheetthatisusedtodenethedefaultbehaviourofHTMLelements.
Thisstylesheetismoreaccuratelyreferredtoasa"user-agent"stylesheet.
Type2:Userstyles"Users"arethepeoplewhovisitourwebsitesandinteractwithourcontent.
Manybrowsershavesomesortofmechanismthatallowsuserstowritetheirownstylesheetorstylesheets.
Thesestylesheetsarereferredtoas"userstylesheets".
Userstylesheetsallowsuserstooverridestylesheetsforspecicwebsitesorforallwebsitesthattheyvisit.
Anexamplecouldbeauserwithavisionimpairmentwhowritesastylesheetthatturnsalltextwhiteandthepagebackgroundtoblack-tomakecontenteasiertoread.
Type3:AuthorstylesAswebauthors,wecanusethreedierentmethodstoapplyCSSstylestoanyHTMLdocument.
InlinestylesareappliedtoelementsintheHTMLmarkupusingthe"style"attribute.
!
!
!
Contenthere!
HeaderstylesareplacedintheheadofHTMLdocumentsusingtheelement.
!
!
!
!
!
!
Sitename!
!
!
!
!
p{color:green;}!
!
!
!
!
!
Externalstylesheetsareappliedusingelement.
!
!
!
!
!
!
Sitename!
!
!
!
!
!
NormalvsimportantUsersandauthorscandeneanydeclarationas"moreimportant"thanotherdeclarations.
Importantdeclarationsarewrittenwiththe"!
"delimitertokenand"important"keywordfollowingthedeclaration.
/*exampleofimportant*/!
h2{color:red!
important;}Aswewillseesoon,theCSSCascadetreatsimportantdeclarationsdierentlytonormaldeclarations.
UnderstandingConictBrowsers(oruser-agents)havetodealwithCSSrulescomingfromthesethreedierentorigins-user-agent,userandauthor.
BrowsershavetodealwithCSSrulescomingfromdierenttypesofauthorstylesheets-inlinevsheadervsexternal.
Browsersalsohavetodealwithdierenttypesofdeclarations-importantvsnormal.
Atsomepoint,browsershavetodealwithdeclarationsthatconict.
Conictiswheremorethanonedeclarationreferstothesameelementandproperty.
/*conflictingrules*/!
h2{color:blue;}!
h2.
intro{color:green;}!
.
containerh2{color:red;}Whenconictoccurs,browsersneedtodeterminewhichdeclarationswill"win"(beappliedtoanHTMLdocument).
InCSS2.
1,therearefourstepstodeterminewhichdeclarationwill"win".
Step1GatherthedeclarationsBrowsersmustgatherallthedeclarationsthatapplytoanelementandpropertyfromuser-agent,userandauthorstylesheets.
Forexample,browsershavetogatheranydeclarationsthatmatch:element=h2property=color/*user-agentstyles*/!
h2{color:black;}!
!
/*userstyles*/!
h2{color:green;}!
!
/*authorstyles*/!
h2{color:blue;}!
#navh2{color:lime;}!
!
Iftherearedeclarationsfrommorethanoneofthesethreesources,proceedtostep2.
Step2SortbyoriginandimportanceForthissecondstep,thegathereddeclarationsaresortedaccordingtoorigin(user-agent,user,author)andimportance(normalorimportant).
InCSS2.
1,therearevestepstodeterminehowdeclarationsaresorted.
Fromlowesttohighestpriority!
1.
Normaluser-agentdeclarations2.
Normaluserdeclarations3.
Normalauthordeclarations4.
Importantauthordeclarations5.
ImportantuserdeclarationsIfnootherdeclarationsexist,user-agentdeclarationswin.
/*user-agentstyles*/!
h2{color:black;}Normaluserdeclarationsbeatuser-agentdeclarations.
/*user-agentstyles*/!
h2{color:black;}!
!
/*userstyles*/!
h2{color:green;}Normalauthordeclarationsbeatuser-agentdeclarationsandnormaluserdeclarations.
/*user-agentstyles*/!
h2{color:black;}!
!
/*userstyles*/!
h2{color:green;}!
!
/*authorstyles*/!
h2{color:blue;}Importantauthordeclarationsbeatallnormaldeclarations.
/*user-agentstyles*/!
h2{color:black;}!
!
/*userstyles*/!
h2{color:green;}!
!
/*authorstyles*/!
h2{color:blue;}!
h2{color:purple!
important;}Importantuserdeclarationsbeatimportantauthordeclarationsandallnormaldeclarations.
/*user-agentstyles*/!
h2{color:black;}!
!
/*userstyles*/!
h2{color:green;}!
h2{color:red!
important;}!
!
/*authorstyles*/!
h2{color:blue;}!
h2{color:purple!
important;}Butwhatiftwodeclarationshavethesameoriginorimportance/*user-agentstyles*/!
h2{color:black;}!
!
/*userstyles*/!
h2{color:green;}!
h2{color:red;}!
!
/*authorstyles*/!
h2{color:blue;}!
h2{color:lime;}!
!
IfdeclarationshavethesameoriginorimportancethenproceedtoStep3.
Step3DeterminespecicityIfdeclarationshavethesameoriginorimportancethenthedeclaration'sselectorsneedtobescoredtoseewhichdeclarationwill"win".
Fourscoresareconcatenated(linkedtogetherasachain)tocreateanalscore.
Thisscoreisreferredtoasaselector'sspecicity.
!
selectorspecicity=a,b,c,dHowisspecicitycalculatedA.
Isthereaninlinestyle!
!
!
a=1xinlinestyles!
b=0xIDs!
c=0xclasses,pseudo-classes,attributes!
d=0xelements,pseudo-elements!
!
Specificity=1,0,0,0B.
CountthenumberofIDselectorsintheselector.
#nav{}!
!
!
a=0xinlinestyles!
b=1xIDs!
c=0xclasses,pseudo-classes,attributes!
d=0xelements,pseudo-elements!
!
Specificity=0,1,0,0!
C.
Countthenumberofclassselectors,attributeselectorsorpseudo-classselectorsintheselector.
.
intro{}!
!
!
a=0xinlinestyles!
b=0xID!
c=1xclasses,pseudo-classes,attributes!
d=0xelements,pseudo-elements!
!
Specificity=0,0,1,0!
D.
Countthenumberofelementtypeorpseudo-elementselectorsintheselector.
p{}!
!
!
a=0xinlinestyles!
b=0xID!
c=0xclasses,pseudo-classes,attributes!
d=1xelements,pseudo-elements!
!
Specificity=0,0,0,1E.
Ignoretheuniversalselector.
*{}!
!
!
a=0xinlinestyles!
b=0xID!
c=0xclasses!
d=0xelement!
!
Specificity=0,0,0,0Someexamples#navul{}!
!
!
a=0xinlinestyles!
b=1xID(#nav)!
c=0xclasses!
d=1xelement(ul)!
!
Specificity=0,1,0,1blockquote.
special{}!
!
!
a=0xinlinestyles!
b=0xIDs!
c=1xclass(.
special)!
d=1xelement(blockquote)!
!
Specificity=0,0,1,1a:link{}!
!
!
a=0xinlinestyles!
b=0xIDs!
c=1xpseudo-class(:link)!
d=1xelements(a)!
!
Specificity=0,0,1,1input[required]{}!
!
!
a=0xinlinestyles!
b=0xIDs!
c=1xattributeselector([required])!
d=1xelements(input)!
!
Specificity=0,0,1,1p[class="a"]{}!
!
!
a=0xinlinestyles!
b=0xIDs!
c=1xattributeselector([class="a"])!
d=1xelements(p)!
!
Specificity=0,0,1,1div[id="news"]{}!
!
!
a=0xinlinestyles!
b=0xIDs!
c=1xattributeselector([id="news"])!
d=1xelements(div)!
!
Specificity=0,0,1,1::first-line{}!
!
!
a=0xinlinestyles!
b=0xIDs!
c=0xclasses!
d=1xpseudo-element(::first-line)!
!
Specificity=0,0,0,1#navullia:hover{}!
!
!
a=0xinlinestyles!
b=1xID(#nav)!
c=1xpseudo-class(:hover)!
d=3xelements(ul,li,a)!
!
Specificity=0,1,1,3AnoteonconcatenationGenerallyspeaking,"A"willalwaysbeat"B",whichwillalwaysbeat"C",whichwillalwaysbeat"D".
NomatterhowmanyIDsareusedinaselector,aninlinestylewillalwaysbeatanIDselector.
Inthefollowingexample,theinlinestylewinsduetospecicity-1,0,0,0beats0,10,0,0.
/*authorstyles*/!
#one#two#three#four#five#six#seven#eight#nine#ten!
{color:green;}!
!
!
!
Theoretically,nomatterhowmanyclassesareappliedtoaselector,anIDwillalwaysbeatclasses.
!
(Firefoxbrowsersincorrectlyimplementthespecicationsothat256classeswill"beat"anID)Inthefollowingexample,theIDselectorwinsduetospecicity-0,1,0,0beats0,0,10,0.
/*authorstyles*/!
.
one.
two.
three.
four.
five.
six!
.
seven.
eight.
nine.
ten!
{color:green;}#nav{color:lime;}Theoretically,nomatterhowmanyelementtypesareappliedtoaselector,aclasswillalwaysbeatelementtypes.
!
(Firefoxbrowsersincorrectlyimplementthespecicationsothat256elementtypeswill"beat"aclass)Inthefollowingexample,theclassselectorwinsduetospecicity-0,0,1,0beats0,0,0,10.
/*authorstyles*/!
divdivdivdivdivdivdivdivdivdiv{color:green;}.
intro{color:lime;}WhatifthereisstillnoclearwinnerInthefollowingexample,twoauthorstyleshavethesamespecicity.
/*authorstyles*/!
.
introh2{color:blue;}!
h2.
new{color:lime;}!
!
!
!
!
!