Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A previous movie focused on the cascade, another core concept of CSS when determining rendering is the order of inheritance. Order of inheritance is one of the easiest CSS concepts to understand. Essentially it says that any nested tags of a parent tag will inherit the styles of the parent tag. Now not all properties inherit. Margins for example don't inherit. If you placed a 10 pixel margin on the Body tag you wouldn't want every element inside the Body tag to also have that 10 pixel margin. So we have to understand which properties inherit and which don't. There is no big rule on that, as you will just find out through experience. Now the other thing about inheritance is that if you write a style for a child tag, it will overwrite its parent's rendering if there is a conflict and you can see the example of this right on the screen. We have a div with the ID of content surrounding a paragraph that says I am feeling blue and blue is an Em tag. Well, with the rules, the content id is declaring that everything inside of it should be Arial and then the paragraph says, well, yeah but the font size should be 1 em and the color should be red.
But the Em tag says no color should be blue and font style should be Normal. Now what's happening here is that the em tag is inheriting its font family and its size from the content in the Paragraph tag. It's overwriting the Paragraph tag as far as color goes and then it's overwriting the browser's default styles to say no don't display me as italicized text, display me as normal. So that's inheritance, it's fairly easy to understand, but as your pages get more complex it can be harder to remember exactly who is the parent style versus the child style. So again paying attention to it and staying focused, make sure that your rendering is going to turn out the way you want. So back in Dreamweaver we are going to return to our Rendering that HTM file we have been working on and we are going to take a look at working with inheritance. So right now we do have some inheritance going on. You will notice the paragraphs, for example, when I click on them, I am getting from the Body tag. I am getting the font family. So the reason that my paragraphs are displaying in this Arial is because they are inheriting that from a parent tag. Well, we are going to create a class style and we are going to use that class style to examine inheritance when the child tag needs to overwrite the parent tag. So I am going to create a new CSS rule and I am going to create a class selector and my class selector I am going to call .boldit and you want to remember always to put the period on the front of your class styles. Now when you are using the new CSS rule dialog box, Dreamweaver would do this for your, but if you are hand-coding it obviously it doesn't so it's a really good habit to get into to always remember to put the period in front of any type of a class style that you want to create. I am going to go ahead and click OK and I am going to change my color again to a bright red and I am going to change my font weight to Bold. So anything that has the boldit style applied to it should be bold and then it should be red. So I will go ahead and click OK. Over here in my sidebar everywhere the word inheritance shows up I would like to go ahead and restyle that. So I am going to highlight the word inheritance and any time you want to apply a class style the easiest way to do that if you create the class style already defined is to use the Properties inspector. So from bottom of my page I will go down to my Properties inspector and currently the Style reads None and I kind of wish they would rename this Class because people get confused about how to apply a style or how the style apply. But if I grab the pulldown menu I can see there is the boldit style and what I really like about Dreamweaver in regards to this is that it actually renders that out, so you can see how the text is going to look. So I will click boldit and sure enough the word inheritance reformats.
Now if I look at split screen view so that we can see the code view of this, I want you to notice what happened here. So I will go and highlight the code. So notice that the word inheritance is surrounding now with the span tag, now it wasn't previously surrounded with a span tag. Dreamweaver did that for us, because in order for just the word inheritance to have the class style applied to it, obviously the class style could not have been applied to the paragraph, so it has to have some type of a tag around it. Dreamweaver uses the span tag, it's a generic inline level tag and you can go ahead and attach any class you wanted to it. So Dreamweaver will do that for you automatically. Now you can see the span tag is actually using inheritance because it has the class of boldit applied to it, which in turn is going to overwrite the parent tag, in this case the paragraph, in terms of color and font weight. So that's inheritance and again inheritance is extremely easy to understand, but when your pages get more and more complex it sometimes gets a little bit more difficult to keep track of which rules are affecting specific elements in your document. So in our next movie we will explore the concept of Specificity and we will use Dreamweaver's CSS Styles palette to help us determine the final rendering of our page elements.
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.