Pseudo elements are tags that CSS recognizes, that attach to HTML tags, but are not put directly into the HTML markup. We see this most often used with hyperlinks and anchor tags.

CSS uses four pseudo elements to style links:

:link The link pseudo tag is used for all links on the page that point to other locations that have NOT been visited. Here’s an example

a:link {
color: blue;
text-decoration: none;
}

Normally a link is underlined by your browser. If you don’t want your link underlined you can shut the underline off with the text-decoration: none;.

The next tag is “:visited.” These are sites that you have clicked on, visited, and then have returned to your page.

a:visited {
color: orchid;
}

Note the pseudo classes, ” a:visited” for example,  is attached directly to the html tag with a colon, no spaces.

“:hover” This styling will happen when your pointing device, or mouse, moves over the tag.  You do not have to actually click on the tag for hover to work.  This tags is used with the “img” tag to swap images when your mouse rolls over a picture. You can use this with other tags, like a table row.

tr:hover {
background-color: yellow;
}

Finally, we have “:active”   This styling is applied when an element has focus. Typically this is used with forms when you click in a form input box, or tab to it,  to type your name for example.

input:active { background-color: orange; }

Those are the basics, now let’s get a little more specific, pun intended, and why some people’s pseudo styling doesn’t work the way they thought they had styled their tags. It turns out that pseudo tags all have the same specificity in CSS. That means that:

 a:link {color: blue;}
 a:active {color: orange;}
 a:hover {color: yellow;}
 a:visited {color:orchid;}

All are equal in terms of specificity in CSS. And according to the Cascade Styling rules, if specificity is equal, the last styling gets the nod. In the above order, if any of your links become visited, then, from then on, your link will show only the orchid color. Not quite what you want, so visited needs to be listed higher up, first or second.

In order for your links to perform properly, like you expect, they need to be listed in the correct order which is:

 a:link {color: blue;}
 a:visited {color: orchid;}
 a:hover {color: yellow;}
 a:active {color: orange;}

Link and Visited are mutually exclusive, in terms of which applies, so they can be listed in either first or second order interchangeably. Again: visited, link, then hover, and finally active: vlha, or “Very Lean Hungry Apes” as a memory aid. Enjoy, and good CSSing to you.

I had evaluated CSS Frameworks about a year and a half ago notably Yahoo’s YUI grids, Elements, Blueprint, Tripoli, Hartija, and BlueTrip.  Elements included a folder systems for the entire site.  BlueTrip is Tripoli and Blueprint combined.  YUI, Blueprint, and BlueTrip feature a grid system to make multiple columns easier to implement.  Hartija is for printing.  Tripoli is a minimal framework that features a reset and font styling, but no column grids.

The outcome of the above review was I decided I had no problem making grids in CSS.  These frameworks seemed to add a lot of bloat with a learning curve.  I did not need a folder set up. I needed to have browser compatibility handled by Tripoli, and needed printing, handled by Hartija.  That’s what I settled on and use with all my sites.

I searched for CSS Frameworks and found some new ones I missed in my earlier survey:  “960″ was new and looked nice, then there was jQuery UI framework, and YAML.  I didn’t jump to  look at any of these until I ran across a framework called Elasticss or Elastic CSS.

What hooked me on taking a closer look at Elastic.  A very simple grid system, elastic or fixed width columns, built-in event handling, and elastic and fixed height columns.  The last two features is what hooked me, no other framework I saw offered built in event handling and variable height columns, except maybe jQueryUi, which looked a lot more complicated to implement.  I decided to give Elastic a look.

I downloaded it, set up an HTML page, and started to link in their CSS and Javascript libraries.  And that’s where I started having trouble.

I just could not get the thing to work initially.  I had problems with understanding how to set up the html tags to make the framework work.

The elastic site had documentation, but it had problems.  It seemed complete, but what was wrong, was the developer had changed the syntax from one release to another and had some documentation one way, and some the other, which made things very confusing when the site didn’t work.

The way I made it work was to look at their demo pages, view the page source in the browser, and copy there tags to my html page.

After I got everything working, I had mixed results.  On the plus side, their column system is excellent, and is not really a grid system. It features English language intuitive syntax. It is the easiest column system I have run across.  Columns are very flexible and easily re-size across the page and can be multilayer.   The ease of making columns, with intuitive English tags, alone would make me consider using this framework.

Html file showing Elastic CSS English language column syntax

The event handling was accomplished by linking in jQuery with the framework.  I was happy with this, since once jQuery was linked in, I could use it on the site, and with other plug-ins.  It did all the normal framework things well, like layout, browser reset, printing, and font styling.

On the minus side, I could not get the variable height columns working, and this was the main reason I evaluated the framework, and I tried.  I figured maybe a piece of the code had an error.

I put all the CSS through a validator and found two of the six CSS files did not validate, nor did the javascript come up clean.  I was not sure by the error, whether a  “*font-size”  tag, for example, which throws an error in the validator, was somehow part of the framework, or simply should be taken out and made “font-size.”

I was almost already to far into it when I wondered if I had the absolute latest version, I decided to download the entire project located on github.  Did I mention how much I love git and github.

I opened the project, used the latest files, and still could not get the heights to adjust.  Bummer.

The resulting web page from the above Html file with CSS styling.

Elastic CSS looks to be about a year and a half old from its inception.  My hope is the developers will keep working, I think they could eventually have something special.  Right now, however, I don’t think Elastic is quite there yet.

Here’s what I want from a CSS Framework, and so far, I haven’t found one that has it all.  If anyone knows of a framework with these features please let me know.  An easily understood and implemented multiple column system that handles elastic, jello, and fixed layouts, the same identical page in all browsers, print formatting, vertical column flexibility to eliminate “faux columns,” and make columns have equal heights, the ability to style layouts, fonts, and colors easily across the site in separate css files.  jQuery integrated with the framework.  Finally, all of this imported with one line into a skeleton xhtml file that is a template to produce your page, and when I unzip the file and place it on my server, everything is linked up.  Now that would save  me time and is worth the cost of admission.

In thinking about what I’m asking for, it doesn’t seem that unattainable, what it takes is someone with some spare cycles to put it together, or for the Elastic developers to polish their already nice framework to get the heights to work out of the box.   It also would be nice if everything validated.   I have my fingers crossed.

One of the things that cause people problems, and is not built into CSS, is filtering CSS styles and applying one style if a certain condition exists.  In short, an “if” statement.

There are several workaround for this, one of which is to use PHP to switch styles depending on a condition.  Let’s take a look at the way you normally include a stylesheet in a web page.

The CSS file, cssfile.css, might look something like this:

h1 {color: blue;}
p {color: purple;}

.reguser {color: purple;}

Now suppose we only want the text in class “reguser”  to show up, with its special purple color styling, if the user is registered on your site, and if the visitor is not registered, then the text will not be displayed.

Let’s use PHP to set up the condition.

In the PHP portion we unset a variable that we will use to track a registered user to initialize the variable.  We then set the $user variable to true if a user registered on another web page, using a $_SESSION variable.

We then get to the “IF” statement.  “IF” the $user variable is NOT set, as in the visitor did not register on the site, we add another CSS include file.  As an aside, you could have just as easily added another CSS file with an “elseif” statement.

Most web pages have many CSS files included, so adding another CSS file is nothing unusual.  It is encouraged.  In fact, CSS defines rules called specificity and the Cascade, as in Cascading Style Sheets, that determine which styling rules apply if there is more than one style assigned to the same element.

Let’s see what the second CSS file looks like to take out the registered user text on the web page.

.reguser {display: none;}

Well, that was easy.  The CSS says not to display the element, so it will disappear off the page, and the PHP lets you have conditionals in your web page styling.

It use to be that you built web sites for a 800×600 resolution monitor, those days are gone. Now only about 3% of users have their monitors set at 800×600. The current sweet spot is 1024×768 with 20% of the viewers using this resolution. With more and more people moving to 1280×800 at 19% and 1280×1024 at 15%. The resolutions are all over the place. At this point in time you should optimize your web site design for 1024×768. That means that those folks that are still using 800×600 will have to scroll to see the screen.

The fact that a significant number of users not only have different resolutions, but most are greater than 1024×768 has led web designers to design sites that stretch their width for different resolutions. The CSS term for this type of layout is “liquid layout.” The problem with liquid layouts is that if the screen stretches too wide, and text lines get longer and longer, text becomes difficult to read. The solution for this is the “jello layout,” where the expansion of a web page is limited to a maximum width.

One of the solutions to the changing width is to use a consistent background color to surround your main content. This works and it is the easy way out, the content is set to a maximum width and the background covers whatever width is left. At higher resolutions though this looks ugly, too much background color. The solution is to make your background more interesting with a background picture or composite image, and that’s when you run into some problems.

The traditional way to put a background image on your site is in the CSS file, like so: body {background-image: url(../images/myimage.jpg)}. The only problem with doing that is that you can’t re-size the background image in CSS. To do this you have to move the image to your html file. This allows you to style and re-size your image in the CSS file.

Before we get into how to do this, a word about the background image you will use. If you expect to stretch the background image in width from one resolution to the next, you want an image that is more landscape oriented than portrait oriented. The problem with a portrait image is if you stretch the image too much you will distort the picture, landscape images bend easier in width. You also should scale the image to a size close to the size in width it will be at 1024×768, or 1024px. You can crop the image if it becomes too long in height. Lastly, you should worry about the image load time or the file size, and consider compressing the image to reduce the file size.

OK, we have the image we want for our background set up and ready to go. How do we set the background image to re-size with changing resolutions. First the html structure:

Nothing unusual here. We are inserting an image into the web page right after the body. The tricks are in the CSS, let’s get to that…

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
}

#backimg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
} 

That’s all there is to it…well, not quite. This will anchor your image to the upper left corner as a start point. The “position: absolute;” takes the image out of other relational groupings with the rest of your web page, and is important to making this work. The width: 100%; tells the browser to stretch the image across the entire monitor window. Well, get to the z-index in a second.

Well, that’s all well and good, if you change browser resolutions, you’ll see the image stretch, depending on your monitor resolution, but how does the content area fit into this set up? Well, the “bodywrap” tags represents the content of your web page. You want that centered in your window with the background image to show on either side of your content. It would be nice if the content would re-size with the background, and well use the same technique to do just that. Here’s the CSS.

#bodywrap {
	position:absolute;
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 30px;
	z-index: 20;
}

This will expand your content with a 3% border for your image to show on the edges. Use the margin-top: 30px; if you would like to show a piece of the background image at the top of the screen. If you’d like to have your content have a white backdrop, we need to add another div. It would be background image, then backdrop, then bodywrap for your content, here’s the CSS section for the backdrop, like so…

#backdrop {
	position: absolute;
	background-color: white;
}

Here the color of your backdrop is white and we have also taken the backdrop out of the web page components layout, but it is absolutely embedded in the bodywrap.

Which brings us to the z-index. The z-index tells the browser which layer to put on top of another layer. The higher the number, the more that content block is moved to the front of the screen. Thus our background image is 0 and the bodywrap is in front of that image at a z-index of 20.

Here’s the complete CSS file in a compressed format. Enjoy.

* {margin: 0; padding: 0; }
body {text-align: center; }
#backimg img {position: absolute; top: 0; left: 0; width: 100%;	z-index: 0; }
#bodywrap {position:absolute; width: 94%; margin-left: 3%; margin-right: 3%; margin-top: 30px; z-index: 20; }
#backdrop {position: absolute; background-color: white; }