Subtitles of the Movie

Much like Style Cascades, especially cascades that run through multiple style sheets inheritance can cause major headaches if you don't keep track of what's going on so in this movie let me give you some tips for handling the cascade and inheritance of your styles. Let me start off with style cascades. Be careful with your cascade, its hard to keep track of style cascades across several style sheets, for example if two selectors in different style sheets have matching properties but varying values for example, each instance of a selector was made up of a font family, a font color, maybe a font size but with different values for each one. Maybe the Body Class Selector in one style sheet is green and the other one is red. The selector and the style sheet with the highest hierarchy would win out and be rendered over the others and its very hard to predict in this case which text will be red and which will be green. So what I recommend that you do is at least at first is to limit the number of styles that you're working with, I should say limit the number of style sheets, probably a good idea to limit the number of style rules as well. But definitely limit the number of style sheets that you're working with, as I mentioned I have my students just work with a Master Style and then maybe later after they've done two or three different sites using that Master Style Sheet if they wish to then branch out and have separate style sheets for different elements of a website like maybe one style sheet for media elements or graphics, maybe another for text elements. My second tip is to group your styles to save space and to make things manageable in your style sheets. Notice for example this template from Dreamweaver, all the H1, H2, H3 tags are altogether here, notice my two Body Tags, body rules are here, my tag and my class. Notice also that the H Tags are very similar, font family, font size, font color and they're grouped together, this will just make your work more manageable, easier to determine what's going on, everything is grouped here. Notice that all of these H Tags are very similar and their in order from H1 to H5. So the tip here is group and organize your style rules. Let me now give you some tips for managing the inheritance of your styles. Number one start with the Body Tag, all serious CSS design should start with this tag, now if you're just experimenting and learning various styles and CSS rules and definitions go ahead and start with other tags but when your doing your serious CSS design work and you're creating a permanent External Style Sheet for example you want to start with the Body Tag, this element is more then just a requirement of a well formatted HTML page. It's also the parent of every visible element in your template or page and every page element can inherit from it. Notice that in this example from the 3ColLeftNav.CSS Template that ships with Dreamweaver, the designer sure enough started off with the Body Tag right there, this is the very first rule defined in this External Style Sheet. This gives you the baseline for all of the tags that will inherit font family arial, color, line height, margin, padding and font size. Remember you can modify specific elements but this is your base where it'll start from. Now inheritance can get confusing very fast since these are not specified anywhere in your rule definitions. For example it doesn't say that your Paragraph Tag will inherit this font right here. Often CSS is as much about what is not specified as that which is. So you want to make sure that you apply the CSS correctly to avoid inheritance confusion. Now applying styles in my experience is much harder then creating them in Dreamweaver, my students struggle most with this aspect of CSS that is applying the style so I'll spend quite a bit of time modeling the correct application of CSS to avoid common inheritance confusion. So stay tuned a lot more on this topic as we progress through this tutorial. So there you have some information about managing multiple styles in CSS in this section you've learned how styles cascade through a web page or a web site, you've learned about the rules that govern this cascade, how certain rules are ignored and others are applied if multiple rules are directing information or styling information on a particular piece or section of a web page. You've also learned about Tag Inheritance, how certain HTML Tags inherit properties from parents, for example the paragraph tag inherits properties from the body tag you also learned some tips from managing your style cascades and your tag inheritance.