Essential Keystrokes » CSS

CSS Classroom – TRouBLe To Remember Shorthand Order

Char — Thu, 23 Apr 2009 19:34:11 +0000

Remember when you were a kid and had to memorize things for school? It was always easier if you had a mnemonic like “Never Eat Soggy Waffles” (for the compass) to help you remember.

Last week one of my clients asked, “How do you know what the numbers in CSS shorthand refer to – meaning which number do I change to get more padding on the right of my image or which number to I change to lessen the margin above an element?”

The numbers refer to Top, Right, Bottom and Left. If you have trouble remembering that they are listed (and applied) in a clockwise fashion around and element, then think of TRouBLe.

Hopefully that will help make things a bit easier to visualize next time you are looking at your website’s CSS file!

If you have a CSS, WordPress or Web Tools question you want answered, let me know in the comments and I’ll do my best to address it in a future post.

Wanted: An IE Work Around Cheat Sheet

Char — Thu, 05 Jun 2008 18:27:57 +0000

As a web designer, I am constantly battling with browsers! Something looks great in Firefox and then you go check it in Internet Explorer and WHAM – you look like you have never designed a thing in your life. IE makes me crazy.

Does anyone have a good resource, cheat sheet or what not to help designers work around and avoid IE glitches before they even start developing? If so, please let me know!! I am going out of my mind over here.

And for those of you who don’t fully know the evils of IE and web development, please go read OneNaught’s article on how IE Slows Down Web Development. This pie chart from The Net is Dead is PRICELESS and pretty much sums up my attitude toward IE today.

IE Voodoo picture from OneNaught

Found On My Desk

Char — Sun, 25 Feb 2007 02:48:42 +0000

If you were to walk into my office right now, you would find a very well used copy of Eric Meyers’, Cascading Style Sheets: The Definitive Guide, 2nd Edition. I began doing web design when HTML was young. I learned the basics and invested in a great WSIWYG editor, Macromedia Dreamweaver.

Over the years, CSS has become essential to good web design. Using CSS is an easy way to make your web design flexible, easy to maintain, and quick to load. Anyone who has played with their WordPress or Blogger templates can see that you can quickly change the font size on your page throughout your site by changing one item in your main CSS file.

I use Eric Meyer’s book for reference. A lot. There are dog-eared pages and highlighter marks throughout. Even though Dreamweaver has CSS controls built in, I can often find what I need or get a little more information using the book. And since much of my blog design work is done using Notepad (i.e. hand coding), I am constantly looking things up.

Other great CSS books include:

Is there a reference source on your desk that is equally loved? Please share!!