Web Programming Primer

It is likely that at some point, you will want one page to look a little different than the rest. That is no problem. Here is an important rule to remember: styles are applied from widest to most specific. This means, if you have the color of your body set to blue and the color of your paragraphs set to red, the red will override the body style (only for paragraph text), since it is the more specific style (because paragraphs are embedded in the body).

When it comes to having multiple stylesheets (using external and internal), the most recently coded stylesheet will win discrepancies. This means, that if in your text editor, you have a link to an external stylesheet, and then you have an internal stylesheet, the internal stylesheet will override the external stylesheet, since it is further down in the code. I would recommend this. This is a great way to make minor changes to each page if you need to (using internal stylesheets as a touch-up tool).

You may think you know what this is about, but no this section isn't about adopting. This section is about how to gain more control. Let's imagine for a second, that we want all of our links that are inside paragraphs to be orange, and all other links to be blue. This may be quite a predicament, if it weren't for child selectors. Child selectors allow the programmer to select all of one element that are located inside another type of element and customize only those. So, going back to our example, we can select all links that are embedded inside paragraph tags and customize them, without effecting links that are not embedded inside of paragraph tags. They are called child selectors because any element embedded inside another element is said to be a "child" of that outer element.

Keep in mind that paragraph tags are "p" and link tags are "a" and this is what it would look like in your stylesheet:
p > a {color: orange;}

It is the same as all other styling, except you place the parent and a greater than sign at the beginning of the selector.

If you want to style multiple elements at the same time, you can simply list the elements, separating them with commas as your selector.

This would look like: p, a {color: black; font-size: 10px;}

In the above example, all paragraph text and all links would be black and 10 pixels tall.