Out of this world CSS examples?

Id's take precedence over class... The order in which CSS commands are applied is called "specificity"

The simplest of specificity rules is that ID's trump classes which trump tags. The lowest determining factor is code order.

For example if you had:

<p id="testId" class="testClass">Some Text</p>

If you set:

.testClass { margin:4em; }
.testClass { margin:2em; }
p { margin:1em; }

Code (markup):

Even though the p is after it in the code, the class takes precedence... since the second one overrides the first, you'd get 2EM margin on your P.testtClass.

If we expanded the CSS to:

#testId { margin:5em; }
.testClass { margin:4em; }
.testClass { margin:2em; }
p { margin:1em; }

Code (markup):

or

.testClass { margin:4em; }
#testId { margin:5em; }
.testClass { margin:2em; }
p { margin:1em; }

Code (markup):

It wouldn't matter, you'll get 5EM because the ID is the "most important" of the values. It has the highest specificity.

Parent selectors trump child selectors, this is where things can get wonky when you are first learning and is one of the HARDEST aspects to grasp... if we had markup like say this...

<ul id="mainMenu">
  <li id="mainMenu_home"><a href="/">home</a></li>
</ul>

Code (markup):

if you set:

#mainMenu li { font-weight:bold; }
#mainMenu_home { font-weight:normal; }

Code (markup):

You would NOT get normal weight text, as the parent selector takes precedence over the child ID. THAT can get REALLY frustrating until you fully understand it. SOME people use this as an excuse to say "throw classes at everything then you don't have the confusion" -- because of course using two or three times the needed markup and more CSS is "easier"... right.

*DING* "NOAH!!!"
"Who is this?"
"It's the Lord, Noah!"
"Right! Who is this really?"
"I want you to build an Ark."
"Right, what's an Ark?"

The rules aren't that hard to follow, and if you get confused use a document inspector like that built into most modern browsers, or more extended ones like firebug for FF to get a handle on what rules are being applied, and what rules are being overridden.

Pseudostates and pseudoclasses also take some getting used to, as they take precedence over the parent selector. A classic example of this is :visited.

Let's say you wanted to make your links be shades of orange and red instead of blue/purple... and you set that up globally as:

a { /* this hits ALL anchors */
	color:#F80; 
}

a:visited {
	color:#C00;
}

a:active,
a:focus,
a:hover {
	color:#F44;
}

Code (markup):

If you then wanted the main menu styled differently, you'd THINK the parent ID:

#mainMenu a {
	color:#000;
}

Code (markup):

Would nab all of it, but then you'd discover that the pseudostates actually trumps all other selectors, meaning the :visited, :active, :focus, and :hover values would remain unchanged inside the menu, only :link would be targeted as it's not the one you're pointing at directly in the earlier code.

If you wanted all of them black all the time, you'd have to say:

#mainMenu a,
#mainMenu a:visited,
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#000;
}

Code (markup):

Which sucks, but that's specificity for you. It's why if elements have pseudostates I am often hesitant to declare them directly on the tag in a global manner preferring to use a major parent selector first such as #mainMenu, #content, #footer, etc, etc... Sometimes stating things globally once is great, other times it will spin around and bite you like that dog that's been kicked by its owner one too many times.

Really specificity is one of the hardest things to grasp in CSS starting out, but once you have a handle on it alongside the full concepts of selectors and semantics, you are master-class ready and can hang up the "nube" title.

How long can you tread water? Hahahahahah...

 

That's pretty comprehensive. Thanks for that explanation. This will help to avoid errors in CSS code.

 

This is one of my favorites. Of course JS in play too.

http://benthebodyguard.com/index.php (scroll down)

 

That's funny. I don't know how practical that is though, what if people don't scroll down. How will they find the links?

 

How is that CSS based? It's completely, utterly useless, it doesn't scale properly, nor does it work 100% on my phone, and it uses a ton of images without any fallback. Pure, utter idiocy.