Tänk på namnet — Cascading Stylesheets — stilmallar som "kaskadar". Vad menas egentligen med att de "kaskadar" och hur kan vi använda det till vår fördel?
Just ordet "kaskad" åsyftar idén om att någonting "faller" ned ifrån en nivå till en annan och så vidare i etapper. I relation till just CSS så handlar detta om att (de flesta) CSS-regler som appliceras på en förälder även gäller för alla förälderns barn.
Låt oss se till exempel för att bättre förstå vad vi pratar om.
<body>
<p>First paragraph</p>
<div>
<p>Second paragraph</p>
<div>
</body>body {
color: green;
}First paragraph
Second paragraph
Mer specifika regler skriver över mindre specifika regler oavsett i vilken ordning de dyker upp i css-filerna.
Att mer specifika regler skriver över mindre specifika regler innebär att vi kan utnyttja kaskadet till vår fördel. Genom att således definiera generella regler på en "hög" nivå och sedan skriva över med de specika ändringar som vi vill göra.
<body>
<p>First paragraph</p>
<div>
<p>Second paragraph</p>
<div>
</body>body { color: green; }
div p { color: blue; }First paragraph
Second paragraph
Låt oss se till ett till exempel där vi använder ett elements ID för att kunna skriva över stilarna specifikt. Notera hur den andra paragrafen fortsätter att vara fetstilad eftersom den "ärver" den regeln av sin förälder. Alltså, egenskapen kaskadar ned ifrån föräldern till barnet.
<p>First paragraph</p>
<p id="selected">Second paragraph</p>
<p>Third paragraph</p>p {
color: red;
font-weight: bold;
}
#selected {
color: orange;
}First paragraph
Second paragraph
Third paragraph
Det här kapitlet är en del av en den interaktiva och pragmatiska höghastighetsguiden till webbutveckling — HTMLHunden. Använd knapparna nedan för att läsa vidare eller navigera till innehållsförteckningen.