Understanding vs. Applying CSS Specificity

Posted by aimeemcgrenera on March 12, 2017

Having professional experience in managing and creating content on webpages, I had a very basic grasp on HTML. However, CSS was completely new to me. Before I just inserted styling directly onto the content. What I have loved about coding so far, is how smart it is. “CSS was created as a better solution to style HTML elements” it’s genius, you merely call on the selectors throughout the code, it makes it cleaner and so much simpler to follow. Plus, you can then use your CSS styling throughout various pages.

However, it wasn’t all easy breezy. My struggle came with the CSS Graffiti Override lab, specifically the CSS specificity (try saying that 5 times). While it completely made sense to me and I thought I understood how to enact the different selectors in the code, I found it was easier said than done. “Every selector has its place in the specificity hierarchy” not so hard to understand, but my struggle came with how to apply a different selector to override the initial selector, without deleting it (which I was totally tempted to do to complete the lab).

Obviously the higher specificity wins, but how do you write that out? What I found super helpful was opening the dev tools and inspecting the elements and testing out different selector statements and seeing where it was placed in the hierarchy. To be completely honest it was a ton of trial and error. I would get it to clear without completely understanding how I got there, until I got to the next image. The statements became more and more specific, which helped me understand the previous statement.