No, just that I’m well versed with tables, inside and out… started using tables since 1996 when doing side jobs designing websites. When CSS first came on scene, I’m one of the few holdouts that resisted – because I didn’t understand it or cared for it. Was perfectly content doing my tables for layouts and could do “fluid” and centered layouts using tables.
But I keep on reading about CSS, saw a few tutorials about just styling some text appearances. Started incorporating some CSS styles with my table-based designs. Mainly used CSS just on texts. This cleaned up my code a lot. Gone are the long series of font and /font tags encapsulating my text. Code became a bit cleaner. Styling texts became so much easier. But still using tables.
I think DIVs were the hardest for me to understand. At first, I can’t picture how they fit on a blank page, how they’re supposed to be used on a page. I was so used to the “compartmentalized” structure of tables that given this too much freedom by DIVs, I dont know what to do with it. I want my box. With my box, my table cell, I know where things go, bounded by that box. — think of it as a jail prisoner, that finally got out, and now doesn’t know what to do next given his freedom.
I think the AHA moment for me was realizing those DIVs can be thought of as just individual cells of a table. Margin is the same as the tableborder property, and Padding is the same as the cellpadding property. — but with finer control! I can have different margins or paddings for the top, right, bottom, left sides! Then I can specify the width/height of this individual DIV box… exactly, down to the pixel count. I can move them to an absolute position, or relative to another DIV.
Now, gone are the messy text of table codes, and the tables within a table html code (which you need to be using a WYSIWYG editor like Dreamweaver to make sense of it and really visualize it.) If you’re not using a WYSIWYG editor using tables, well, it’s almost impossible to get the big picture.
The next AHA moment was realizing that you can use CSS not just for simple positioning and styling of page elements. CSS is capable of more than that! I think this is where CSS Tricks come into play. I used to use individually spliced graphics (GIF/JPG) for my menu items, then using javascript, I swap those graphics with a duplicate/identical set (but just a different color) when a mouse is hovering.
But with CSS, gone are those (2) sets of graphic files for each menu option. The mouse hover, and different styling can be purely done in CSS. Shadow effects? I used to use transparent GIF created in photoshop and positioned in it’s own table cell, underneath another table cell. No need for that. I can use CSS to specify a shadow… even on 4 sides if I want to, and vary the appearance of that shadow without going back into photoshop to adjust its opacity. Rounder corner boxes? I used to have (4) different graphics for the “rounded corners”… ur.gif, lr.gif, ll.gif, ul.gif. Then had to place these images inside their own table cells to give the appearance of a rounded box. That’s gone too! CSS can do that with a few lines of code.
Pull down menus? I used to need Javascript to do that kind of stuff. Not anymore… you can do that with pure CSS. Pull down menu with each individual item and sub-items having different mouseover appearance… it’s so easy now… and a whole shadow effect under each pull down menu, and the shadows affecting the appearance of the content at the edges of the pull down menu? Wow. Really nice – and easy to do with just CSS.
I’m still discovering new things (or tricks) pure CSS can do. And yeah, I wouldn’t go back to the old ways of doing things. I wished I’ve embraced CSS sooner.
** sorry for this wall of text, didn’t realize how long this go!