Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Unless every page you create only holds a single paragraph, you are eventually going to have to deal with styles that conflict with one another. Anytime you have multiple rules that target the same element you have conflicting styles, and now on the surface it would seem like this would be pretty easy to avoid: just don't write rules that target the same element, right? Well, the truth is that as your pages get more complex, it's impossible to avoid it. In fact, there are going to be times when you want styles to conflict with one another, as a way of writing styles of little bit more efficiently.
So in this chapter we're going to explore why style conflict, what happens when they do, and then how avoid conflicts that you don't want and how to use them correctly when you do. I want to start by just looking at the exactly what happens when styles do conflict with one another. So I've got the conflicts.htm file from 03_01 folder, and that is in the Chapter 3 directory. And I have a really simple page structure. You can see in the HTML we just have an article with a couple paragraphs in it and then a subheading and a paragraph below that.
So, very simple stuff. Okay. So I'm going to go into the section where we're adding our styles and I'm just going to write a selector for my paragraph. So I'm going to do P and inside of that, I'm going to do font-size. Let's do 1em. For color I'm going to choose white, and then for background I'm going to choose tan. I'm going to save that and preview this in a browser. When I do that I can see there is a styling that I asked for. We have a tan background, white text happening to all of our paragraphs. Okay.
What happens, however, if I go in and write a conflicting rule? So just below that I'm going to right another paragraph selector. Now obviously this is sort of an extreme example. I doubt that you would have very many instances where you have one paragraphs selector followed by another one, but just play along with me here. So here I'm going to do font-size: 1.2 em; color, I'm going to do black; and then padding, I'm going to 10 pixels. So if I save this and go back to my browser and refresh, I can see what's happening here. Okay.
So the text size increased. It turned black. I'm getting some padding so that the edge of the text isn't right up against the edge the element, but the color changed from white to black. So what happens when styles conflict with one another? Well, where they disagree with each other, in this case, the last one applied wins, so this formatting is applied over this formatting. Color is black instead of white. But since there was no conflict with background and there is no conflict with padding, those are added and they become cumulative.
So sometimes when styles conflict with one another they don't always overwrite each other; sometimes they create these cumulative styles. In other cases they do override each other and you see the selector that wins the conflicts, you see that styling being applied. There is not always easy to catch conflicting styles. Let me show you what I mean. If I scroll up, in the body selector here, we have a font-size of 90%. So actually both of these paragraph selectors are conflicting with that body selector. How many of you guys caught that? They're not always easy to detect and especially when you're styles get more complex and your pages become more complex.
So now we know at least two things about conflicting styles. When the properties conflict, the properties of one rule will replace the other. If they don't conflict with one another, the properties are added and the rules are cumulative, leaving you with a mixture of the two rules. So what we need to learn now is what determines which properties are used in the event of a conflict? Well, that's driven by three principles: the cascade, inheritance, and specificity. We're going to explore all three of those concepts individually, starting with the cascade in our next movie.
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.