CSS, Firebug, & Sprites Oh My!

Sprites Background Image CSS HTML Eight Deuce

I just finished up my second week at my new full-time job and I’m relaxing on this Friday night. I’m sharing the leather couch with our feline roommate who seems to be an OCD germaphobe since he’s always bathing. I’m writing from my phone and the music is shuffling in the background… 30 Seconds To Mars, Pussycat Dolls, Kanye, Snoop, Lady Gaga, Scorpions, Eminem, Firehouse, Halestorm, you know… the usual. The job and the people are great! Within the first ten days, I’ve already gained a ton of info that will help me now and in the future in the area of web design. I wish I had really sat down and learned about these tools year ago, but hey, the best time to learn is always right now. I knew the very basics but if I was to be a real web designer, I had to step up and learn and really understand what cascading style sheets (CSS) were all about. I had no idea how powerful they were. I took them for granted and was stuck designing like it was 1999. They basically allow you to clean up your HTML code in your web pages by removing all the styling. So who wants a web page with no style? This is where CSS comes in. The webpage links to an external CSS file that includes all the styling attributes. The best part is this. What if you need to change all of the text on your site from black to dark blue and you have hundreds of pages, would you jump out of a moving car if someone told you to change it? Well, probably not if you had a style sheet set up. It would be as simple as changing the hex code from #000 to #06274B. Boom, three seconds and the whole site is updated. If you don’t plan on using style sheets, go ahead and jump out of that car, but wait til rush hour.

Once I was thrown into my first big job at my work, I felt overwhelmed at first. That used to be my way of dealing with something that I didn’t know exactly how to do, just sit there overwhelmed and stressed. But that’s no way to live your life, especially not as a new employee. I took the initiative and dug into a bunch of sites that had tutorials and examples. It was really catching on, but I still felt I should know more. Then a co-worker showed me something that almost made me fall out of my chair. Something that dropped my jaw. And something that made me almost embarrassed to call myself a web designer. This tool is called Firebug, and it changed my life.

Ok, maybe not my life, that was a bit drastic. But really, it’s the most amazing add-on for the Firefox browser. And on a side note, please tell me you are using Firefox. If you aren’t, please hit Command + Q or Alt + F4 to see what I think about that. Back on topic, Firebug, in simple terms, “puts a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” Ya, it’s badass. I just laugh at how easy it makes my job and how I wish I had this tool like 10 years ago. If you edit websites and you haven’t used it, please install it right now. Stop reading this and go to getfirebug.com. It’s like waking up at noon on a weekday and having a hot, fresh Chipotle Bol waiting for you in bed. Yes, it’s that good.

Last, but not least, I’d like to talk about something called sprites. Weird word, I know. And this isn’t anything to do with the OG Sierra Mist, this is about being able to reduce the amount of HTTP requests and total size of the images on the page. Both of these objectives will really help your pages load a lot faster and make your site more professional. Basically, you’d take all the items that make up your page that are images and put them all into one file. Then with CSS, you can set that image as a background image in multiple places and set the position of what shows up. If you are totally confused, check out an example of one of Google’s sprites:

Google Sprite Background Images CSS Cascading Style Sheets HTML

Pretty cool, huh!? And just when you thought it was that simple, what til I drop this knowledge on you. There is a site called SpriteMe and they basically make it a no-brainer. So simple, a cave woman could do it!

I hope you learned something here, or at least recognize the importance of these tools. I really believe these are essential to anyone designing websites. I know I’ll never work on another site again without my CSS/Firebug combo. My next goal is to learn all about jQuery. Let’s see some comments from all you viewers out there. Let me know if this stuff is interesting or if I should shut up and go work at Taco Bell. I mean, I guess if I did, I could explain to them that giving their customers hot sauce when they ask for it twice is important for repeat business. But that’s neither here nor there. It’s time for a cheat dinner and some poker with friends. Until next time, keep livin the dream you beautiful people…