Creating an Atlas Quest Theme
Cascading Rules
In the previous section, you saw examples that put the style in Cascading Style Sheets. In this section, we'll focus on the cascading nature of Cascading Style Sheets. What happens when two style rules conflict with each other?
Specific vs. Generic Selectors
It's entirely possible to specify two styles for the same elements on a page, such as:
| CSS | What it does |
|---|---|
#content { color:red; } #content { color:blue; } #content { color:purple; } | Turns the text color of the content window purple. Each style is applied to the page, but in the order listed. So the red color is applied first, but then the blue overrides it, and the purple overrides the blue. So the final color on the page will be purple. |
This example is entirely contrived—it makes no sense to apply different types of colors to the same elements, one right after another, like as is shown in the example. It's entirely valid CSS, however, and such conflicts can arise often when multiple pages of styles are used. To create an Atlas Quest theme, there are several layers of styles applied to each page. The main style sheet, located at http://www.atlasquest.com/css/base.css, creates the main 'look' to the page. It sets the size of the text, where elements on the page are located, and default colors for text, backgrounds, menubars, and more.
The second layer of CSS applied on Atlas Quest is a specific theme. Each theme contains its own list of styles to override the defaults, and is mostly a list of colors and background images that should be used instead of the defaults originally applied. The CSS page for the Classic Blue theme is located at http://www.atlasquest.com/css/normal/base.css. The CSS page for Halloween is located at http://www.atlasquest.com/css/holidays/halloween/base.css. Changing themes is simply a matter of applying a different style sheet over the default style.
Then there's a third layer of CSS that Atlas Quest will apply—one of your own choosing. When you edit your Theme Preferences, what you are really doing is telling Atlas Quest a location on the Internet for a third layer of CSS styles that should be applied over the two previous layers. You can point it to an already existing theme on Atlas Quest or to a custom-made page with your own theme.
The first layer may specify that a background color should be white, while the second layer may override it and say it should be a slightly orange color (such as used in the Halloween theme), while the third layer may override that and turn it into a soft blue (for instance, if you decided to use the Ocean theme instead of the current theme, whatever it may be). If there's a conflict between two styles, the last style to be applied wins out.
This tutorial has a fourth layer of CSS being applied—anything you type into the test box in the lower-right corner of the page. It's a quick and dirty way to override the styles of any of the previous three layers that have been applied, while any style you do not override will still show through.
Localization
Styles can be applied to an entire webpage, or just small parts of of a page. For instance, you can change the color of all text in the content section of the page (e.g. #content { color:red; }), or just change the text found within a table (e.g. table { color:blue;} ), but what if the table is within the content section of the page? Will the text in the table be 'content red' or 'table blue'? In this particular case, the text within the table will show up blue because styles for the table are more specific than styles for the content.
| CSS | What it does |
|---|---|
#content { color:red; } table { color:blue; } | Turns the text color of the content window red, except for the text in the table which will be blue. |
If you run that example, however, you'll notice that not all of the text turns red or blue. The headers may be a different color. The links on the page may be yet another color. Those are different colors for the same reason the table color is different from the content color: A more specific style has been applied to those elements than was applied to the content page as a whole.
The main style sheet and themed style sheets, the first two layers of CSS applied to the page, both include specific colors for each type of header and link. Although you applied a new text color over the content afterwards, they did not override the colors of the headers and links because the header and links were more specific than the entire content window. You can override those colors, but to do so, you have to specify a more specific destination such as h1 (for the main header) or h2 (for the sub-header).
| CSS | What it does |
|---|---|
#content { color:red; } table { color:blue; } h1 { color:black; } h2 { color:green; } | Turns the text color of the content window red, except for the text in the table which will be blue, the main header which will be black, and the sub-header which will be green. |
A style can be applied to all of the text on a page if the selector is body. In theory, that would apply to every single word on the page from "A Letterboxing Community" at the top to the copyright at the very bottom, but if you try to set the color of the body tag, you'll notice that nothing seems to happen:
| CSS | What it does |
|---|---|
body { color:red; border:5px red solid; } | In theory, this should turn every word on the page red, but it doesn't. Why? It's not specific enough. You can see the border around the entire page, however, since no other styles conflict with that. |
Selector Types
Selectors can target anything on a page, from a single letter to the entire page. But sometimes, you can have two or more different selectors target the exact same element on a page. For instance, take the boxes to the right. They are created with what's called a DIV tag. You can style div tags using a format such as div { color:red; }. If you do that, however, you'll notice it turns the main Atlas Quest title red as well. The DIV tag is not very specific—it's a generic tag that marks a section of a page as a 'section of the page.' DIV tags are used all over the page, but most of the text colors do not change because some other more specific style overrides it. The Atlas Quest title does not have such an override, so the changed color shows through.
Assume we only only to change the text in those boxes on the right, however, and not the title bar. The boxes have both been labeled as part of the a_target class, so to target those two boxes and no others, we can use .a_target { color:red; }. The selector is the name of the class preceded by a period.
An even more specific way to target a box is with an identifier, and in this case, the box with the blue border is specifically marked with an ID of my_target. An ID can only apply to one element on a page, so it's very specific. If we only wanted to change the text color of that one box, we could do so with #my_target { color:red; }. The selector is created by putting the pound sign (#) before the name of the identifier (my_target, in this case).
In certain circumstances, you might end up with scenarios such as:
| CSS | What it does |
|---|---|
div { color:black; } | This tells the browser to turn every word within a DIV tag black, including our two test boxes. |
div { color:black; } .a_target { color:blue; } | This tells the browser to turn every word within a DIV tag black, except any sections marked as being part of the a_target class, which does include both test boxes but nothing else. |
#my_target { color:green; } .a_target { color:blue; } | This tells the browser that all sections marked as a_target should have blue text while the one section identified as my_target should use green text. Both selectors match the box with the blue border, but the text color in that box will always be green because #my_target is more specific than .a_target. |
div.a_target { color:green; } .a_target { color:blue; } | Both of these styles match both test boxes, but div.a_target is actually more specific so that style overrides the more generic .a_target selector. In this case, the first selector says that the class a_target must be applied to a DIV tag to match, while the second rule does not require the a_target class be applied to a DIV tag. (It could be applied to a BODY tag instead, for instance.) The more specific rule wins out over the more generic rule, however, so the color will end up green in our example. |
The cascading rules are quite specific, but grow increasingly complex at this point. The good news for you, however, is that you don't really need to know or understand the more complicated stuff. The main rules you need to remember include:
- All else being equal, the last rule applied wins.
- If an element is contained within another element (such as a table within the content section), the styles for the sub-elements will win out over the rules for the containing element.
- More specific rules will win out over less specific rules. Tags are the least generic of all, classes are more specific, and identifiers are the most specific.