Here’s an interesting way to add a CSS stylesheet switcher to your website. I’ve used stylesheet switchers in the past, but this one is different. In the past I had a button to press, which in turn switched the stylesheet of the page. This one switches the sheet at a certain time of day, which I think is pretty cool. My website uses clouds in the header, so it was just begging for me to make a “night” version of the header which would automatically switch on at night.

The first thing to get is the Dreamweaver plugin from the guys over at Kaosweaver. Here’s the link to the plugin. Once you download and install that, open up Dreamweaver and the page you want to apply the style switcher to. Under Commands, you’ll see Style Switcher Lite.

Click on that and this little box pops up.

This is where you set your day and night stylesheets, and set what time of day you want the sweets to switch. What you do in the stylesheets is up to you. You can change colors, background-images, the options are endless. For the effect I wanted, I changed the background images of two things.. the clouds and the buildings (Boston skyline), which floats in front of the clouds.

So there you have it, here are the two versions that you’ll see at BeantownDesign.com, depending on what time you’re looking at the website.

I’m obsessed with CSS.

There I said it. I have just about every CSS book that has received good reviews. As a freelance website designer I try to make time in between projects to read these books, pick up new tricks, and brush up on what I already know or may have forgotten. If the book is worthy I throw some bookmarks on important sections, so I can easily use it as a reference in the future.

As I finish these books I will be giving my honest reviews, be it negative or positive. Hopefully this will help you decide if the book is a good choice for you to purchase.

Continue reading for my review of CSS Mastery; Advanced Web Standards Solutions by Andy Budd. ©2006

Content Overview

This book by Andy Budd covers CSS topics from a beginners level to a more advanced level. I’m an advanced CSS user, but I actually enjoyed reading the entire book from cover to cover. I find that reading over things you already know or use is a good idea; you never know when you will pick up a little trick that will save you some time every time you are writing CSS. Plus, if you really do know and use a technique 100%, you can give yourself a pat on the back..haha.

Topics covered in this book include:

• Doctype
• Margin Collapsing
• Box Model
• Using Background Images
• Relative, Absolute, Fixed Positioning
• Image Replacement Techniques
• Styling Links, Lists, & Forms
• Layouts (2 & 3 Column, Elastic, Fluid, Fixed)
• Hacks & Conditional Statements

So you may have noticed the book above has bookmarks on it. That’s my actual copy of the book. When I read a book, I put these bookmarks on the MOST important parts. These are of course the most important to ME, maybe you wouldn’t even care about these topics. I do this so it’s easy to get back to these sections of the book when I’m designing and coding.. so I don’t have one of those, “I read about that somewhere” moments. Below I will quickly explain what I found to be the “bookmark worthy” parts of the book.

Highlighting the Current Page in Navigation

If you are on the “About” page of a website, the “About” text in the main navigation should be a different color than the rest of the links, right? This is good for the user experience, so they always quickly know what page they are currently on. On a small site this is simple; just throw a class on the list item for “About”. It gets more complicated on a larger scale site, with a lot of navigation items.

I design my sites using Dreamweaver. I find it to be a great tool, (as long as you know how to write code by hand of course). I like the template features. Why I mention this is because if you also use Dreamweaver templates, you will find the above current link technique very helpful in your website designs. You may notice one problem however, the above technique requires you to put a separate “ID” on your “BODY” tag of your pages. If you have a Dreamweaver template your body tag is not editable though.. so what do you do? I will be writing an article on this exact topic soon, so stay tuned. To wrap up, I find this the MOST IMPORTANT TOPIC in the entire book.. I use it on every site I code now.

Absolute & Fixed Positioning

This is a topic that can confusing to some CSS coders. To be honest, I put this bookmark in as a reminder to myself to come back at some point to try some Fixed Positioning techniques. I use Absolute all the time, but never really have a need for Fixed. I think some interesting designs could be achieved by having an item in exactly the same place on the screen though…TO BE CONTINUED!

Styling Forms

I find that spending 15-30 minutes styling a form with CSS can be the difference of a great looking page, and an eyesore. When I see generic inputs and buttons on forms on websites it drives me nuts. One thing I hate about unstyled forms is how different browsers show the inputs and buttons differently. As a designer, I want to be in control of how the form looks, not the browser! FORMS DON’T NEED TO BE UGLY!

Conditional Statements and Hacks

Honestly this bookmark is only on the book because I had some room left over. I use conditional statements and hacks, but have them memorized by this point in my career. I figured I’d throw the bookmark on in the chance that I come across the need for some hack of statement that I’m not so knowledgeable of, this will be a quick reference.

In Conclusion

So is this book right for you? How should I know! I can say that if I had to throw all my books away and keep only one book it would be a tossup between this book and “Web Standards Solutions” by Dan Cederholm *stay tuned for my review of that book*. I find CSS Mastery a great book filled with techniques that I either use or could use in my day to day workflow. I have some books that have advanced techniques that would be great if I had clients willing to pay 6 times what they are paying so I’d have the time to use these techniques. So having said that.. two thumbs up for this book from me!

-ilz out

CSS Mastery Advanced Web Standards Solutions by Andy Budd with Cameron Moll & Simon Collison website link

Link to CSS Mastery on Amazon

I recently created this website for Professional Makeup artist Dani Wagener of Boston, Mass. When I was designing this site I decided to try out a technique I stumbled across: making fading link colors on rollovers. What I mean by this is that when you roll over the main navigation the links fade from gray to blue; instead of just switching right to the color like a CSS rollover would do. Check out the final result, and then I’ll explain how to do this effect in Dreamweaver. DaniWagener.com

The first step is to download and install the dreamweaver extension from the guys over at KaosWeaver. Click here to get the extension. Download that, install it, and we are ready to go.

Inside Dreamweaver, highlight a link and go to your Behaviors panel. If you installed the extension properly, you will now have a Kaos option in your menu, like this:

Select that and it will pop open a box that lets you choose a start and end color for you fading links. I chose medium speed for Dani’s site.

Now you are done, it was that easy! There is one other thing I recommend however.. This effect requires Javascipt to work, so you should go ahead and create regular CSS rollovers for the links. So for example, I made the links be blue on the rollover, so if you turn the Javascript off on your browser, you see we still have a rollover effect.

ilz out