Join James Williamson for an in-depth discussion in this video Understanding order of inheritance, part of Dreamweaver CS4 with CSS Essential Training.
Of all the CSS rendering rules, Inheritance is probably the easiest to understand and control. Properties of rules applied to parent tags will be inherited by their child tags, as long as those specific properties values inherit. The trick is understanding which properties inherit, and how to overwrite inheritance when it's not the desired result. Well, I'm going to use this slide to sort of demonstrate how inheritance works. We have some source code on left hand side. There is a div that surrounds a paragraph. The paragraph says "I'm feeling blue." The word blue is surrounded with an emphasis tag, and the div has an ID of content.
The render text would look exactly as it does here. I'm feeling blue. The only difference is most browsers would italicize blue, but for the purpose of this exercise we are leaving it normal. Okay, so let's take a look at our first rule. Our first rule is going to target any element within an ID of content, and what we are setting as font-family to Georgia. So anything inside of any element with an ID of content should get the font-family Georgia, and we are going to check to see how that would render, and sure enough now we are seeing the font Georgia. Our next rule is going to target paragraphs.
Our paragraph selector is telling our font- size to be 1.4ems, and our color to be red. Once again if I click on that, I notice that everything inside the paragraph is being re-sized and the color is red. So currently the text is inheriting the font-family from the content selector, and it's getting its sizing and color information from the paragraph tag. Now, we still have the word blue in the em tag. So if I write at em selector, notice here we are just changing the color of the em selector to blue. So, if we do that, we notice that the word blue renders blue, while the rest of the text remains red.
So essentially you are going to inherit these values down, but your child elements are allowed to overwrite the parent elements. In fact, if it didn't work that way, it would be pretty hard to do any type of specific styling, wouldn't it? So we can take our em tag over anything that the paragraph and content selectors are doing for us, while still inheriting those other values. So it's a very efficient way of working. Well, let's put that to practice in our exercise. So here we have the inheritance file open, and if I take a look at my CSS Styles, I have a few embedded styles, and if I just sort of go through them in the CSS Styles panel, by looking at the properties down there, I can see that there really aren't any font-family declarations.
But we have got some sizing, a couple of font-weights here and there, but there is really nothing that says what font people should be using. Well, for the most part, everything on our page needs to be Arial and Helvetica. A good way to approach this is instead of assigning that font-family to every single selector like headings and paragraphs and list items and all that. We can just go ahead and put it up on the body tag. The body tag is the main parent element, and anything that you place on that that can be inherited by everything in the page. So let's give that a try. I am going to go up my embedded styles and click the Style tag, and I'm going to choose New CSS Rule.
In this case I'm going to do a tag selector, and I'm going to type in body for the body tag. Now remember, you can grab that from the pull down menu if you don't really want to type that in. We are also going to define it in this document only. So there is no need to put this into an external style sheet. So I'm going to go ahead and click OK, and I'm going to choose Arial and Helvetica for my font-family. Now if I want to see if this is going to work, I can click the Apply button, and as soon as I do that, notice that every single piece of text changes so that the font is now Arial. Well that's cool. What other things can we sort of send down the line if you will? Well, one of the things we can do is font-size.
What if I wanted my font-size to a little smaller than whatever device I'm on, maybe a little smaller than its default font? Well, I can certainly do that and I can use percentage to do that. So maybe I'll type in 85 and then choose percent. Now remember I can choose that from the pull down menu, but if I type it in with no spaces and hit Tab, it will go and do it for me. Again, I'll hit Apply, and I notice that all of my text shrinks sort of proportionally, now that's really cool. So again, I'm sort of broadcasting this if you will, down to every single element in the page. I'm going to go ahead and click OK.
Well, as you can see that's a very general way to apply styles across your entire page. But what if I wanted to change it in a specific location? Well, as we saw just a moment ago on our slide, we can use inheritance to do. I can go ahead and write any selector that I want for these child elements, and it will overwrite what it just did on the body tag. Let's take a look at that. So I'm going to go to my paragraph selector, that's the one right up top, and right now the only thing that that's doing is assigning a color. Well, let's do something else to it. Let's give it a font-family. So I'm going to double click that to edit it, and I'm going to use the font-family drop down menu to go ahead and choose Georgia, Times New Roman, Times, serif.
Now remember that directly contrary of what the body tag is sending down which is Arial. When I click OK, I can see that that nested tag is now overwriting its parent tag where they disagree, in this case, the font-family. So inheritance can do more than any other rendering rule to make your styles efficient and lightweight by allowing global styles to be applied to top level elements, and then overwriting them with specific child selectors. When needed, you can eliminate the need for weighty repetitive code. In our next exercise we are going to tackle probably the most perplexing of all the rendering rules, Specificity, and that's coming up next.
- Understanding XHTML and CSS fundamentals
- Understanding and implementing advances in typography
- Using the Code Navigator for faster CSS edits
- Styling form elements while maintaining accessibility
- Customizing the look and functionality of Spry widgets through CSS
- Controlling layout and positioning through styles
- Controlling CSS with the Properties Inspector
Skill Level Intermediate
Q: Is it possible to use CSS to create drop shadow effects over patterns and other backgrounds that aren't 100% white?<br />
A: Try using the CSS3 drop shadow property, or use transparent PNGs as background images. A useful technique is detailed here: <a href="http://dev.opera.com/articles/view/css3-border-background-boxshadow/" target="blank">http://dev.opera.com/articles/view/css3-border-background-boxshadow/</a> The technique covered in the "CSS drop shadows" movie in the <em>Dreamweaver CS4 with CSS Essential Training</em> course will work if the drop-shadow file is prepared with a transparent background and saved as a 24 bit PNG file.<br />
Q: While attempting to share assets between layers of a Fireworks file, as instructed in the Chapter 3 tutorial “Page creation and asset sharing,” an error message reads "Master page layers are not editable from other pages. Shared layers cannot be made a sub layer.”<br />
A: This problem often occurs when attempting to edit or move a layer that is set as a master page layer. To avoid this error, switch to the master page and note the shared layers. Any editing to those layers must be done while on the master page.<br />
Q: Is it possible to build a page using Dreamweaver CS4 Starter Pages, then use the CSS code in a site that was written using Visual Studio? In Chapter 2, the author states that the CSS must be embedded within Dreamweaver. Does that mean a Starter Page cannot be used withing a site built with another tool?<br />
A: When the author states, "the CSS must be placed inside the page," he is referring to the creation of custom Starter Pages, in addition to the ones already included in Dreamweaver. Once the Starter Page is created, CSS can be placed as embedded styles or in an external style sheet, so it is possible to use Starter Pages with Visual Studio or another web design tool.<br />
Q: In the "Preparing custom starter pages" video, the author’s screen shows the CSS Styles panel with listings displayed in an outline mode, connected by vertical lines. How can I get my CSS Styles panel to display this way? I am using a Mac, while the author uses a Windows machine. Is this a case where the difference is based on the specific operating system?<br />
A: That is indeed one of the (minor) interface differences between the Mac and the PC. In the Mac version of Dreamweaver, the All view of the CSS Styles panel shows top-level CSS files or style tags with a small triangle beside them. They can still be explored or minimized by clicking on them to toggle them. They still show an "outline" view, just without the connecting lines. The functionality is not affected in any way.<br />