Site Development
Downloads
Help!!
Home
What Is "Cascading" Anyway?"Cascading" refers to the way in which styles can be "layered". This all has to do with the concept of "inheritance" and "priority" or "overriding" which we've discussed a little previously. Basically, you can code overall styles and add more detailed style rules as needed. This layering is often needed when we want to make stylistic changes from one page or section of a website to the next. You would probably want to style an order form on your site much differently than an informational page. Cascading would allow you to <link> multiple stylesheets to pages in such a way as one stylesheet would override and inherit styling from the other. This is the cascading feature of Cascading Stylesheets. This is much like the inheritance discussed in Making Custom Classes and Making Link Classes. Classes inherited characteristics from "parent" elements and style rules meaning that we only had to code the properties we wanted to change. The rest of the properties were inherited from the parent element. Below are ways to make and apply multiple styles. You'll have to work through the example to really catch on to this. It takes some time and practice to fully understand cascading. Getting StartedYou can <link> a page to multiple stylesheets. To begin the exercises for this lesson. Make three simple HTML pages with a couple of <h2> headers and links to each other. Copy and Paste come in handy here. Keep all of the files in the same folder for convenience.
<html> After making three pages based on the model above, make an external stylesheet with the following style rule for "h2":
h2 {font-family: Tahoma, sans-serif; Now save this external stylesheet as "mystyle.css" and link it to all three of your pages (HTML files): <link rel="stylesheet" href="mystyle.css" type="text/css"> Now check your pages in a browser to make sure you've made the style rule and linked it correctly. So far, so good. Multiple StylesheetsNow make a second simple external stylesheet with another "h2" style rule and save it as "mystyle2.css": h2{color: blue} Now <link> this new external stylesheet only to "page1.htm" beneath the <link> for the main "mystyle.css":
<link rel="stylesheet" href="mystyle.css" type="text/css"> Notice that we just put one <link> tag right after the first one. The only difference between the tags is the HREF. Now open "page1.htm" and you'll notice that the <h2>s are now blue instead of red. This is because the "mystyle2.css" has overridden the "color" property of "mystyle.css". There is no effect on the pages not <link>ed to the "mystyle2.css" stylesheet. Also notice that the <h2>s on page 1 are still in the Tahoma font and sized according to the parent "mystyle.css" stylesheet. These traits have been inherited from "mystyle.css" and are not overridden by "mystyle2.css". If you had <link>ed the "mystyle2.css" stylesheet first, the original "mystyle.css" would override the blue coloring. Cascading works top to bottom. The first stylesheet is loaded and then the second one loaded overrides it and inherits from the first. A third stylesheet would override and inherit from both. In brief, the stylesheets <link>ed last override and inherit from the previous ones. This is used to make different sections of a site look a little different from the others. An overall styling is linked to all pages and then individual section stylesheets are linked only to the pages of the particular section involved. Play around with this by making three stylesheets and linking them in different orders and trying to predict what the final outcome will look like. Just think like your browser. Load the first stylesheet <link>ed in your mind, and then the second and so forth. When you get pretty good at predicting what the final output will look like, you've got this figured out. Using <style> And External StylesheetsYou can also use <style> tags in the <head> of a page to override <link>ed external stylesheets. This is generally done when only one page is to be styled differently from the others. Add the following to "page1.htm":
<style type="text/css"> The above code in the <head> of "page1.htm" would override all external stylesheets and color the <h2> headers green. When using <style> tags with external stylesheets, make sure to put the <style> tags after the <link> tags. Otherwise, the external stylesheets may override the <style>. The STYLE AttributeYou can also apply CSS styling by putting a STYLE attribute right in your HTML tags: <h2 align="center" style="color: orange"> This will override all of the external stylesheets and any <style> in the <head> of the page. As a rule of thumb, the closer the styling is to the content, the higher priority it has. It will also inherit from parent styles. The syntax for the STYLE attribute is a little different than regular CSS. First, there is no element. The element is the tag and only the tag that the STYLE attribute is in. The declaration(s) are enclosed in quotes (" "), not curly braces "{ }". Just type in the declarations and separate them with semi-colons. The only spaces allowed are between the colon and the value of the declarations. Netscape NotesNetscape's inheritance scheme is not as complete as Internet Explorer's. Some properties just don't pass down from a parent element to a child element. One good example is "color:". A font colored in the "body" element will not pass down to a child element like "p". To get around this, you'll have to add the "color:" property to your "p" styling and other text element style rules. Just remember that if the style rule doesn't show up in Netscape to double check syntax and don't assume that a style rule will inherit anything. Preview your work in Netscape to see where any problems may crop up. It's usually not hard to patch things up for Netscape. Again, double check your syntax and remember that you may not be inheriting from parent elements like you do in IE. Just add the declarations that aren't being inherited to child elements as needed. Now you've seen different ways to apply CSS styles and how they override and inherit from each other. Don't get frustrated with this. It takes some practice and fiddling to get all this down. The key is to practice, practice, practice. |
To Beginning CSS Review
Back To Beginning CSS Index