Web and Graphic Design created especially for the small to medium sized business. Quick turnaround and designs that will allow you to update your web site as easily as sending an email.
Over on Woork, Antonio writes about a technique that helps him write CSS. Basically: Write CSS so that it matches a generalized page layout. Start with the stuff on the top of the page (header and title bar) and work your way down.
This is a pretty good method of laying out a CSS page and one that I use myself. I love antonio’s techniques, and I would recommend anyone beginning in CSS work should take a look at what he’s teaching.
In addition to this, he touches on using the CSS selectors to make them as specific as possible. This is something that can be further explained in detail. If you look at the CSS for the UVic web site you may notice, after the reset and build up, that all of the CSS selectors are on a single line and that each one builds upon the one above it.
What I mean is, I use the CSS selectors to help organize the CSS itself both for improved readability and for fool-proofing the system.
Here’s a short example.
/*----BANNER----*/
#banner {overflow:hidden;}
#banner .center {height:4.5em;}
#banner .center .left { float: left;}
#banner .center .left img{ float: left; }
#banner .center .left img .red{ background:red }
#banner .center .right {float: right;}
#banner .center .right img{ float: right; }
You’ll notice that you can easily see that you are working in the banner section just by scanning the page. This example method also prevents the user from putting the class “red” on an image outside of the banner’s left division.
This exapmle shows that the class of red is only intended to go on images in the left hand side of the banner, putting it anywhere else would be totally harmless. If the designer intended this class to be used anywhere inside the banner section then it would be moved up an couple lines and the specific selectors would be removed. If this is a global class, it would get out into the global class section.
Doing this makes the CSS easier to read, as well saving the user from accidentally using classes that are only designed for image layouts on something other than an image, or using classes that are designed for some sort of layout on a block of text.
Just a little something for April fools this year. I created a website that you can send to your friends. It will allow you to add in anyone’s name into a news article, stating that they will doom the planet. I call it This web site will kill us all!
Change it to anyone’s name by putting it before the website name, separated by the dots. Here are a few to get you going.
