After you dive into CSS, you can do a fairly good job of making big changes in a design without having to know and learn some essential fundamentals.

You want to change your webpage, so you whip-out Firebug or your Google Chrome Developer Tool, find the place you want to modify, hunt down the code, change the variable, and refresh!

Been there. Done that. Still do it, today.

However, when you want to make bigger changes, make smaller changes faster or dive into creating a design from scratch, you’re going to need to know some of the fundamental and often times confusing basics of CSS elements.

Let’s take a look at some:

Tag Qualifying

.class will select any element with that class name.

It is faster for the browser, generic, and can be applied to multiple element types.

p.class will only select paragraph elements with that class name.

This would only be used if you wanted to use the same class name for a number of elements, but have them applied to different things.

Selector Order

So similar, yet so different. Before and after the space select different elements.

Before the space: “select any element with this class name.”
After the space: “select any div.”

When you glue them together, like the second line of code: “select any div that is a descendant of any element with this class name.”

The second line of example code works like the aforementioned Tag Qualifier.

If this CSS was the only CSS on the page, it would look like this:

The Order Matters a.k.a. The Matter of Order

This concept could have helped many from loosing all of their hair.

In fact, this bit of CSS can be found in the Bible:

So the last will be first, and the first last. – Matthew 20:16 (ESV)

If you have two identical selectors, the last one wins.

More

These are only three of many other basic, but sometimes confusing, CSS concepts.

Pros: Share with us a basic CSS concept that was a major “ah-ha” moment for you.
Noobs: More tomorrow!

[via CSS Tricks | Image via Squirrelly Mae]