Learning Advanced CSS Faster Than Ever

PLEASE NOTE: This lesson will not be discussing CSS3. Why we wont cover CSS3 here is due to a lack of complete and sound support of most CSS3 styles across all browsers. With this in mind its only wise for us to focus on CSS1 and CSS2 as these are the more well supported versions and will be for some time. Don’t get me wrong I’m all for CSS3 but until us as an entire web community ditch these old and non standard browser versions we must work with what we have for now.

In our last two tutorials “Learning Basic CSS” and “Learning Intermediate CSS” we discovered quite a bit about what CSS is and how we can best apply it to our documents. Today I wanted to cover the last three areas of CSS that I consider to be the advance portions of CSS. In this tutorial we will learn about the following three advance areas of CSS.

Combining Rules –

Selectors –

Pseudo Class –

So lets get started shall we…

Combining Rules

The goal of CSS is to give us the developers a way to sum up great numbers of attributes into CSS rules, that we then cascade down over our entire site. In the advance areas of CSS we keep this goal in mind and are allowed to not only sum up a great number styles into CSS rules, but also sum up how many rules our styles sheet holds. Imagine with me if you will, that we have four elements on our site and all four elements have unique CSS ID’s.

#elementOne {width:256px; height:100px;}
#elementTwo {width:100px; height:100px;}
#elementThree {width:400px; height:100px;}
#elementFour {width:256px; height:100px;}

Notice that all four elements rules have some similarities and differences in their styles? With advance CSS techniques we can sum up some of these similarities with use of CSS classes like the following.

.elementHeight{height:100px;}
.elementWidth {width:256px;}
#elementTwo {width:100px;}
#elementThree {width:400px;}

Ok what we have done is found all similarities between our four CSS element ID rules and their styles, and instead of repeating these styles we have summed them up into neat classes. In our original four CSS ID’s we had similarities between all the “height” amounts, so we therefore make one single CSS class that carry’s our desired “height” amount instead of repeating them four times over. We also can see that in our original four CSS ID’s we had similarities between two out of the fours desired “width” amounts, and again instead of repeating this desired height two times we sum it up into one CSS class.

So our elements them self’s would then look like the follow.

Ok notice how in our first and last element we have combined classes? We are permitted to do so beings that classes are for non unique rules. Also notice that in elements two and three we are combining both id and classes because again, we are permitted to do so as long as our ID is unique to the document.

Let’s look at one more final way of combining rules. Say you want to have a blue background color for our second and third elemen. We can combine these elements into a single declaration without creating a new class rule but instead using a comma “,“.

#elementTwo, #elementThree {background-color: #0FC;}

With the use of the common, we can basically create a list of all CSS rules that will have a particular style on its own that’s summed up. Instead of repeating the styles each time over every rule, we create one declaration with a list of the rules that we wish to apply our desired styles to. You can also use the comma on Classes.

.elementHeight, .elementWidth {background-color: #0FC;}

Ok so now we know how to cut down on repeated styles with the use of classes, and we also know how to declare a whole array of id and classes in one single declaration. One simple yet effective rule I like to fallow when combining rules in large or small scenarios is to ask yourself, “would my style sheet benefit from me combining and summing up these styles?“.

Selectors

I saved the “Selectors” portion of CSS for the advance tutorial, simply because I wanted to bring you the reader to the bleeding edge of CSS2. Currently most CSS selectors are for CSS2 and will only work with browsers that are CSS2 and up, such as IE7 and up. So always remember that when trying to utilize most CSS selectors that most, but not all browsers support them.

Ok so the best way to approach CSS selectors is to think about what we are selecting with them. With CSS selectors we are selecting and applying styles to elements. Great, but why is there more than one selector if we are selecting one element at a time you may ask. Well basically, there are a number of ways to think of how elements may be layed out in a real html document. Because there are different element layout scenarios, we must have different ways of selecting. These elements and their selectable layouts should be described or rather looked at as the following:

Elements

Element Siblings

And Nested Elements

Based off if the element is a child of a particular element, or if it’s a sibling of a particular element, or even a particular element type its self over the entire page. With CSS Selectors we are using all three of these concepts to supply styles to elements.

Let talk about the few basic element selecting selectors. Our most basic of selectors would be to apply styles to a selective group of element types in our style sheet. So say I want to give every paragraph tag (

) in our document a border style, I would then simply add this to my style sheet.

 p{border:#000 solid; border-width:1px;}

With our basic element selector we can sum up styles that cascade over entire groups of elements by again simply declaring the element group instead of an ID or Class and writing our styles accordingly.

We can also be more precise with our basic element selector, and apply styles to a selective groups of elements that reside in a particular element with, or without a particular ID and or Class. So say I have a div box with an ID of “firstDiv” and I wanted to then give every paragraph tag a border style, but only every paragraph tags that are nested within our “#firstDiv” box. I would simply declare this.

#firstDiv p {border:#000 solid; border-width:1px;}

This is called “Descendant Selecting“, and as stated above is not restricted to only child or rather “nested” element who’s parent has an id or class. You can be more broad about who our above rule apply’s to by simply replacing the “#firstDiv” with a “div” element selector like so.

div p {border:#000 solid; border-width:1px;}

Ok so now we are not applying a border to all paragraph tags with in an element who as an id of “#firstDiv”, but rather all “div” elements who have nested paragraph tags.

There is one more selector that gives us the ability to narrow down what group of elements receives our desired styles, and its called the “Child Selector“.

#firstDiv > p {border:#000 solid; border-width:1px;}

Basically the “Child selector” only allows us to style our paragraph tags if the paragraph tags are a direct descendent of our “#firstDiv” div box. So if our structure was as follows, then the above CSS would NOT work.

Simply Would Not Work!

Because our paragraph tag is nester in a div box, and then that div box is nested in our “#firstDiv” div box, our paragraph tags would not be considered a direct child of our “#firstDiv” div box. The paragraph tag would be considered to be a grandchild of “#firtDiv” not a direct child. Only direct descendents receive our desired styles when using the child selector.

Ok so all the selectors we have talk about up till now deal with either a selective, and or a nested group of elements. There is another selector that deals with sibling elements a this selector is called “Adjacent selectors“. In a nut shell, any element that has a direct sibling to its self can declare styles up or down to its sibling elements. We have the following two elements in our document.

Simple Text Title

Here is some simple text

We could say “Hey any time we have a paragraph tag that’s a direct sibling of a header tag, add the following styles”, and here is what this would look like in CSS.

h1 + p {text-indent:5px;}

Ok so this covers the most basic selectors that involve our three concepts of elemental layout (Element, Element Siblings and Nested Elements), however there are more out there that involve selecting elements and or groups of elements. If you however would like to know more about these other selectors, click here to read up on all the different types of selectors CSS2 provides.

Pseudo Classes

In our last section, I wanted to get into pseudo classes a little beings we are talking about CSS2. These are more of a behavioral states between elements and user interaction with them than anything. When pseudo classes first were introduced to the web community, it was a bit to swallow. Lots of JavaScript gurus and large crowds of CSS gurus seen this as a wrong direction for CSS.

CSS was made to give us the developers a more robust way to sum up large amounts of styles to ultimately separate style from structure. With pseudo classes though there was a huge up roar over whither it was logical, or correct for CSS2 to have the power to not only separate style from structure, but also behavior as well. JavaScript has been, and may always be the king of document behavior altering and it seemed that CSS2 had begun to step on JavaScript’s toes.

Never the less CSS Pseudo classes are here to stay and are expected to grow with the release of CSS3.

Pseudo classes can be applied to elements by simply declaring a particular element group, id or class and then the pseudo class, much like this.

element:pseudo-class {css:styles;}

Now there are about six important pseudo classes I’m going to cover today, only one of them still deals with child selecting so lets start there.

The “:first-child” pseudo selector takes an element and finds only its first child element, then apply’s your styles only to this first child.

element:first-child  {css:styles;}

Our next two selectors are for link elements () and are designed to give style to both a link that simply exists or has been clicked.

element:link {css:styles;}
element:visited  {css:styles;}

The next two pseudo classes can also be applied to links, but may not necessarily be limited to links alone. These are the “active” and “hover” pseudo classes, and basically dictate the styles of an element between a mouse down and mouse up click, or the style of an element while simply being hovered over.

element:active {css:styles;}
element:hover {css:styles;}

Great, now we have one more pseudo class that is for handicap users who make use of the tab key for pure keyboard navigation. This last pseudo class is called “focus”, and it give us the ability to bring styles to our elements when an element has been focus over.

element:focus {css:styles;}

Well everyone I think its time to wrap up our last lesson on advance CSS. I hope you and everyone walks away today with two very important things to remember. A great understanding of how and most importantly best to use CSS, but also a great respect for CSS and all it can do for us as developers. I have enjoyed writing these last few CSS tutorials and I hope they bring great understanding to lots of CSS enthusiast.

Thanks everyone.

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus