1. 0. CSS Menu
2. 1. Colors & Images
3. 2. Cascading
4. 3. Layout I
5. 4. Layout II
6. 5. Layout III
7. 6. Custom Options

Creating an Atlas Quest Theme

Page Layout: Part III

In part I of the page layout, we discussed how to style the content section of Atlas Quest. In Part II, we styled the headers and footers of the page. Now, we'll style the menubars.

Styling the menubars is mostly a matter of setting the text color, background color, and background image. Nothing new there, but the elements that are styled are considerably more elaborate. We haven't covered much about the cascading nature of Cascading Style Sheets, except that whatever style comes last in the style sheets is the one that's used.

The elements, so far, have been stand-alone entities. They've fallen into three categories:

1. HTML Elements: These are native elements in HTML and include tags such as body, h1, h2, h3, div, and a. There are many more elements, but those are the most common ones you'll style in Atlas Quest themes.
2. Identifiers: To make it easy to style a specific part of a page, I often identify those sections by 'naming' them. The HTML usually looks something like: <div id="header">Stuff here</div>. In this case, the section is created with a normal div tag—a normal HTML element—but I named it header. In CSS, we can style these named sections by adding a pound sign (#) in front of the name. Or, in this case, styling the selector known as #header. Other named elements include #content, #headerTitle, #headerSubtitle, #welcome, #footer, #copyright, etc.
3. Classes: Classes are also a way to name sections of a page, much like an identifier would, but classes can be applied to any number of elements on a page. An identifier, by contrast, will only apply to no more than one section. As an example, in these tutorials, there are several sections on each page where CSS code is displayed. I want each of those sections to look consistent, so I marked them all with a class called frame. The HTML code would look something like: <div class="frame">CSS code here</div>. In CSS, we can style these sections by adding a period (.) in front of the name. In this case, we can style the code blocks by targeting the selector .frame.

As a general rule of thumb, in case of style conflicts, whatever has the most specific selector wins out. Let's take this convoluted example:

In theory, all three of these constructs could be applied to the exact same element if the HTML contained code that looked like: <div id="content" class="frame">Stuff here</div>. Which background color will be applied?

Because identifiers mark just one section of the page, it's the most specific, and therefore #content is the background color that will be applied. The second runner up would have been .frame since it applies to only some of the div elements. A normal HTML page might contain dozens or even hundreds of div elements, so that background color would be last in the pecking order.

If run that example, you'll see the #content background turns yellow, as expected, but the code boxes turn aqua. That's because the .frame is only a small part of the #content section, making the frame more specific. Thus, the .frame styles win out over the #content.

This is a gross simplification of how the rules are applied, but as long as you remember that the more specific you are about what element to target, the higher those styles are in the pecking order. All else being equal, identifiers rank higher than classes, and classes rank higher than native HTML element. All else being equal, when an element is inside of another one, the inside element rank higher than the outside element. All else being equal, the last element applied wins. There are a lot of moving parts here, but it's actually very intuitive with a little experience.

So far, so good?

Now we'll throw in one last wrench. Sometimes, you want to target a specific section of the page that might not be explicitly marked with an identifier or class. For instance, perhaps you want to style the buttons inside of the CSS Test box there at the bottom-right corner of the page. You might look in the HTML and see that the button is created with an input tag, so your first instinct might be to write CSS such as:

This did get a red border around the two buttons in the CSS Test box, but it also put a red border around all of the buttons in the code blocks. The buttons in the CSS Test box have no identifiers or classes to target just those buttons, however looking through the HTML, we might notice that the CSS Test box itself has an identifier named #cssTestWidget. Using that information, we can qualify exactly what we want to target with:

In this case, we're telling the browser to first find the section identified as #cssTestWidget, then look inside that section for all elements named input, then apply a red border to all of them. And presto, only the buttons in that one section get the border.

It's important to note that there is no comma between #cssTestWidget and input. A comma separates multiple elements that should have styles applied to them, so the addition of a comma would have applied the red border to the #cssTestWidget element and all of the input elements.

The point to take away here is that you can combine multiple elements to target where you want to apply a style, and sometimes it's required if the element you want to target does not have an identifier or class on it. And this is important to recognize because the styles on the menubars are almost exclusively these sorts of compound elements.

The Menubars

Each page on Atlas Quest has two menubars—one near the top of the top and one near the bottom of the page. The one on the top uses drop-down menus while the one at the bottom is displayed in a table and already extended. Both menus have the class menu applied to it, and you can style the entire menus (both of them), by applying styles to nav.main.

It's also possible to target a specific menubar by listing the elements next to it. For instance, the top menu bar immediately follows the header element while the bottom menubar immediately follows the #content element:

And with that, you have everything you need to know to style the menubars. Some of the selectors are quite elaborate compared to what we've used before, but just read it one part at a time. In the ocean theme, the most complicated construct is:

This section styles the drop down menus. First note, that we are targeting three distinct elements:

• nav.main ul li a
• nav.main ul li a:link
• nav.main ul li a:visited

In all of these, the browser first looks for the sections labeled nav.main, of which it finds two—the top and bottom menubars.

Then it looks for an unordered list (ul) inside the menubars. The main menu is a list as well as each drop-down menu so it matches a total of 8 lists.

Third, it looks for list items (li) inside of the drop-down menus. That includes every option you can click in the drop-down menu, which is 50+ items depending on your preferences and settings.

If there were no other styles applied anywhere, would could fully style the drop-down menus with just that. However, there are other styles being applied, and at this point, they rank higher in the pecking order for applying styles. Many of the styles you might apply to nav.main ul li may not show up as a result. So we also need to apply the same styles to even more specific items—the links within each list item.

And that's what the a, a:link, and a:visited pieces do. They target the individual links in the drop down menus.

Let's take a look at the entire section that styles the menubars for the ocean theme:

As a whole, this code first styles the borders for both the top and bottom menubars, much of which is specific to one or the other but not both.

Then we set the text colors, background colors, and background images for both menubars. In our themes, we use the same colors for both menubars, so we don't have to target specific menubars like we did for the borders.

The colors are first applied to 'everything' in the menubars (with the selectors nav.main ul li a, nav.main ul li a:link, nav.main ul li a:visited, and nav.main ul li a:hover) then more specific selectors are used to style the colors in the sub-menus (with the selectors nav.main ul ul a, nav.main ul ul a:link, nav.main ul ul a:visited, and nav.main ul ul a:hover).

1. 0. CSS Menu
2. 1. Colors & Images
3. 2. Cascading
4. 3. Layout I
5. 4. Layout II
6. 5. Layout III
7. 6. Custom Options