{"id":92,"date":"2005-10-26T13:07:12","date_gmt":"2005-10-26T13:07:12","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/10\/the-cascade-part-1"},"modified":"2006-04-30T23:28:52","modified_gmt":"2006-04-30T23:28:52","slug":"cascade1","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/10\/cascade1","title":{"rendered":"The Cascade: Part 1"},"content":{"rendered":"

One of the most important yet, arguably, one of the least understood aspects\r\n\tof CSS is the cascade<\/a>. Sure, most people will know that CSS stands for Cascading\r\n\tStyle Sheets, but do you know what cascading really means and how it affects\r\n\tthe way style sheets work?<\/p>\r\n

From experience, I\u2019ve seen many people struggle with specificity; often wondering\r\n\twhy some particular rule isn\u2019t applying and typically trying to work around\r\n\tit by adding id and class selectors to increase the specificity. While specificity\r\n\tis important to understand, it\u2019s really only one step of the cascade; and so\r\n\tmy aim today, and over the coming weeks, is to discuss cascading and inheritance\r\n\tas well as clearly explain the 4 steps of the cascade.<\/p>\r\n

Style Sheet Origins<\/h3>\r\n

The cascade is designed around the combination of style sheets applying to\r\n\ta document, each coming from one of three origins, although authors typically\r\n\tonly consider one: theirs!<\/em> The three origins are the User Agent, User\r\n\tand Author. I\u2019ll be talking more about the interaction of these in the next\r\n\tpart, but for now, you just need to be aware that styles don\u2019t just come from\r\n\tone place.<\/p>\r\n\r\n

Step 1: Find Declarations<\/h2>\r\n

The first step in the cascade is to find all the style declarations that apply\r\n\tto each element, from all style sheets applied to the document, including style\r\n\tsheets from all three origins. This step involves collecting all the style\r\n\tdeclarations that apply for the target media type. This means, that if the\r\n\tdocument is being rendered on the screen, for example, any styles for the print\r\n\tmedia, or anything else for that matter, have already been discarded.<\/p>\r\n

At this point, it doesn\u2019t matter whether some selectors have a higher specificity\r\n\tthan others or whether two rules set different values for the same property,\r\n\tor nearly anything else. The only<\/em> factor is whether the selector matches\r\n\tthe element or not.<\/p>\r\n

For example, given the following stylesheets:<\/p>\r\n

\/* User Agent Stylesheet *\/\r\nbody { padding: 1em; margin: 0; line-height: 1.2em; }\r\np { margin: 1em 0; }\r\n\r\n\/* User Stylesheet *\/\r\nbody { font: large\/1.4 sans-serif; }\r\n* { background: blue none !important; color: white !important; }\r\n\r\n\/* Author Stylesheet *\/\r\nhtml, body { margin: 0; padding: 0; background: #CCC; color: black; }\r\np { line-height: 1.4; }\r\n#content p { margin: .8em 0; }<\/code><\/pre>\r\n\r\n
And this sample document:<\/p>\r\n
<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN">\r\n<title>The Cascade<\/title>\r\n<div id="content">\r\n  <p>Hello World!\r\n<\/div><\/code><\/pre>\r\n
Find all the declarations that will apply to the p element.  Before you continue\r\n\treading, take a look and write down all the styles that you think will apply. \r\n\tThis should be a fairly easy exercise, there\u2019s no difficult selectors used at\r\n\tall; but even if there was, the concept would be exactly the same.<\/p>\r\n
Assuming you attempted the excercie, you should have something like this:<\/p>\r\n\r\n
p { margin: 1em 0; }\r\n* { background: blue none !important; color: white !important; }\r\np { line-height: 1.4; }\r\n#content p { margin: .8em 0; }<\/code><\/pre>\r\n\r\n\r\n
Now, this same process is repeated for each and every element in the document,\r\n\tbut I\u2019ll leave that as an exercise for the reader.  In the next article in this\r\n\tseries, we\u2019ll talk about sorting by origin and importance, and then, later on,\r\n\tspecificity and the order specified.<\/p>","protected":false},"excerpt":{"rendered":"One of the most important yet, arguably, one of the least understood aspects of CSS is the cascade. Sure, most people will know that CSS stands for Cascading Style Sheets, but do you know what cascading really means and how it affects the way style sheets work?","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/92"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}