Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

How browsers apply styles

From: CSS Fundamentals

Video: How browsers apply styles

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.

How browsers apply styles

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.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 69798 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.