Bibbidi-Bobbidi-Boo with CSS

For this post, I’m doing something a little different–I’m going to show, rather than tell. CSS is a magic wand for your HTML structure, but rather than go into the realm of technical details, most of which I’m not totally familiar with (LOL), I’ll illustrate just what CSS can do for your pages.

Without CSS: A Sad, Sad Layout Indeed

Click to view “Layout Without CSS” (in new window)

See what’s missing? The color, the organization–pretty much everything that makes a layout is not present, even though the divided layers are still there. Without CSS to direct how the divs appear and how they line up on the page, it’s just a linear, one-after-the-other presentation, along with the horrid default color scheme. The sight of bright blue links that turn purple when you click on them…ooh, it gives me the creeps. LOL

With CSS: It’s HTML, Now With Less Fail!

Now, see what happens when just a few touches of CSS are applied to the SAME EXACT layout!

Click to view “Layout With CSS” (in new window)

Look at all that has been added! A background image is present, as is a header image (like we talked about in last week’s web design article); the navigation links are styled more boldly and stand out when hovered over. Not to mention that the welcome and the “about this page” section are now placed side-by-side, taking up less vertical space. Most of all, the layout is pulled together with a tone-on-tone color scheme, blending with the header and background image to make a basic (but pretty) design. (Now, CSS can’t make your images for you, but it can sure position them and make them repeat! :D)

Seeing this drastic change is quite like watching your own Code Fairy Godmother wave her wand and transform your ragged HTML structure into a sparkling CSS layout. Now you, too, can go to the webdesigners’ ball!

3 thoughts on “Bibbidi-Bobbidi-Boo with CSS”

  1. Ah yes CSS the ultimate power of www. Good article, css is very important. I remember when I started out on the web and I was using the dreaded font tags within my html page before I learnt CSS. Then again in those days I used css more to make my website pretty (and unreadable 8pt for text!!) and less about browser readability. Hey I wanna go to the webdesignersā€™ ball!!! I can dress up as a blockquote!! Love the title of this post btw.

  2. @Huma: Haha,I did the 8-pt font thing too. Made the webpage look so neat, if all you were looking at was the layout graphics! XD Glad you liked the article—YAYYYY I feel validated now that a graphic design expert has approved my web design article šŸ˜€

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.