{"id":181,"date":"2015-05-26T11:59:00","date_gmt":"2015-05-26T06:29:00","guid":{"rendered":"http:\/\/127.0.0.1\/Admec_Site\/?p=181"},"modified":"2025-01-02T13:01:04","modified_gmt":"2025-01-02T07:31:04","slug":"think-browser-cascading-specificity-and-id-css","status":"publish","type":"post","link":"https:\/\/www.admecindia.co.in\/web-design\/think-browser-cascading-specificity-and-id-css\/","title":{"rendered":"Think like a browser: Cascading, Specificity, and ID in CSS"},"content":{"rendered":"
<\/div>\n

You use CSS and create web pages for websites and applications but if you are not clear with few terms such as Cascading, CSS Specificity, and Classes and IDs then I recommend you this post to read now or bookmark for the later read. This post is written by Bappi Das one of ADMEC Mutlimedia best students in his assessment. He tried to put his best of CSS that he learnt in his CSS course in this institute<\/strong><\/a> with us.<\/p>\n\n\n\n

\"\"
Think like a browser: Cascading, Specificity, and ID in CSS\n<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

What is CSS?<\/strong><\/h2>\n\n\n\n

A simple one-line answer to this question is Cascading Style Sheet.<\/p>\n\n\n\n

Now, what is \u201cCascading\u201d?<\/strong><\/h3>\n\n\n\n

The dictionary meaning of Cascade is \u2013<\/p>\n\n\n\n

(noun<\/em>): <\/strong>A small waterfall, typically one of several that fall in stages down a steep rocky slope.<\/p>\n\n\n\n

(verb): <\/strong>pass (something) on to a succession of others.<\/p>\n\n\n\n

Well, we all know that CSS is something that is used to style the HTML. So, why these styling elements were named as Cascading Style Sheet? Did the inventors of CSS loved waterfalls or did they made CSS like that passes on something to a succession of others?<\/p>\n\n\n\n

To understand this, we need to dive into the deeper world of CSS and see how the browsers think.<\/p>\n\n\n\n

Let\u2019s start our journey with a simple HTML document:<\/p>\n\n\n\n

\"html<\/figure>\n\n\n\n
\"html<\/figure>\n\n\n\n


We all can understand this HTML, but the browser looks into this same HTML something like this \u2013<\/p>\n\n\n\n

 This is called HTML family tree with the following members \u2013<\/p>\n\n\n\n

    \n
  1. Ancestor<\/li>\n\n\n\n
  2. Descendent<\/li>\n\n\n\n
  3. Parent<\/li>\n\n\n\n
  4. Child<\/li>\n\n\n\n
  5. Sibling<\/li>\n<\/ol>\n\n\n\n

    where \u2013<\/p>\n\n\n\n