Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
While CSS syntax is relatively simple, the styles themselves, and the pages that they control, can get rather complex. As size become larger and more complex, it becomes more difficult to keep styles from conflicting with one another. This can lead to bloated code, inefficient CSS, or styles that simply just don't work. In order to confidently navigate more complex page structure, you need to understand how browsers apply styles. Once you understand the rules of style rendering, it becomes much easier to write organized and efficient CSS.
First, I want to take a look at how browsers read selectors. You and I are probably used to reading selectors from left to right. Now, take the following selector. This tells the browser to find any text within a span tag, which is also inside of a paragraph tag, which is also found within div tag, which is also found within an element with an ID of mainContent. Now the browser, however, reads this from right to left. In this case, the browser would first find all of the span tags within the page.
It would then check to see if they were inside of a paragraph. Next, it would scan through the content again to see if any of those paragraphs are within a div. After filtering those results, it would finally check to see if the remaining elements were inside an element with an ID of mainContent. Now as you can imagine, this is not a very efficient selector. In cases like these, you should ask yourself if a simplified version of the selector would work. In some cases, you're going to need this type of a detailed selector, but where you can simplify, you should.
Next, I want to examine the concept of the cascade. Cascading style sheets derive their name from the cascading order of styles as they're applied within the browser. And this usually means that external styles are applied first, followed by embedded styles, and finally followed by inline styles, if they're applied within the document. Now if any of these styles conflict with each other, the most recent set of styles will overwrite the earlier styles. Now, notice that I said this is how it usually works; that because the cascade can really be summed up in one sentence: the last rule applied wins. Styles are applied in the order that they're found, and recent styles always overwrite earlier styles in the event of a conflict.
Take this example. Since the external style sheet link appears after the embedded styles, the external styles would actually overwrite any of the conflicting embedded styles. This method even applies to style sheets themselves. Take a look at the style sheet. Notice that it contains two paragraph selectors. Of the two, the last selector would be the one that's applied, as it's the last rule applied. Remember, no matter where the styles are found, the last rule applied wins. Next, I want to talk about inheritance.
Inheritance allows us to write very efficient styles, but it can get us in trouble if we don't remember exactly how our styles are structured. Inheritance essentially says that child elements will inherit the properties applied to a parent. Take this very common rule, for example. Here a body selector has a font, font-size, and color applied to it. In this case, every element on the page would render as Arial, 100% of its default size, and be gray. All the headings, list, and paragraphs are inheriting those values from the body selector.
You can reverse this, however. I f I wanted all my main headings to be Garnet, for example, I could simply write a rule for that h1 and set the color to Garnet. Child rules will always overwrite their parent rules where there is a conflict. Now understanding inheritance makes it much easier to write efficient styles. Imagine writing separate rules for every element on the page to define a font and a color. Now writing that for the body selector and letting all those other elements inherit it is a lot more efficient. One more thing about inheritance: not all properties will inherit.
Now, for the most part, it's pretty logical, but there really isn't any way to tell what inherits without digging into the specifications or just memorizing it. I promise, it's not that hard to keep track of what it inherits and what doesn't. The last concept I want to talk about is specificity. Specificity is just a fancy way to describe how specific a rule is. Basically, if the cascade or inheritance can't resolve a conflict, the more specific rule wins. Each rule has a weight score based on the elements that make up the selector.
This table explains it in a little bit more detail. IDs are worth 100 points, classes are worth 10, and elements are worth 1. Using this chart, it's pretty easy to determine which rule is going to win in the event of a conflict. There is one final point I want to make about browser rendering: styles are cumulative. Take these styles, for example. Here we have a body selector and an external style sheet that applies the font, font-size, and color. Later on in the same style sheet, there is a paragraph rule that sets the line-height to 2.
Finally, in the HTML document there is an embedded style that changes the color of the paragraphs to black. So what would the final style of all this paragraphs be? Well, it would inherit the font and font-size from the body selector. The line-height would come from the paragraph rule in the external style sheet. And finally, the color would be overwritten by the embedded style, as inheritance would resolve the conflict between the embedded paragraph style and the external body style. Okay, I know I just threw a lot at you in a short amount of time, but hey, that's the beauty of video.
You can pause, take notes, and rewind. If you understand how browsers render styles and how the cascade, inheritance, and specificity work, you'll be able to write clean efficient styles that are smaller in size and much easier to update. So as you learn CSS and begin working with it, keep these concepts in mind and you're going to save yourself a lot of time and a lot of trouble.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.