Teaching Myself HTML, CSS, and XHTML Day 2 – Making Magic Happen With CSS!

It’s day 2 and slowly but surely, I’m moving into the world of web design. Continuing where the last chapter left off, I’m updating Starbuzz corp’s website through Cascading Style Sheets or CSS for short. While HTML offers the basic structure and organization of a website, CSS is what gives the site style and glamour, essentially granting developers the ability to modify the look of a page without having to intersperse tags all over the place. Today Starbuzz’s website is getting a nice brownish (tan?) background with a gray border surrounding the header and menu choices and a new look to its font.

That greyed area is all I’m adding. Interesting how these 10 lines completely changes the site’s aesthetics.

I’m quite amazed by how just a few lines of code can make the difference in the look, feel, and performance of a website and it makes me wonder how long it would take me to learn this to a professional’s capacity. Comparing what I’m learning and building to building something as complex like a search engine seems like a nightmare (or a code junkies wet dream, I guess it depends on the person).

This is what Google looks like behind the scenes. If this turns you on, you may have a problem.

This is the end result, the font was changed from its default look to sans-serif, the text and border was also aligned to the center of the site thanks to the margin and padding attributes which clears the area surrounding a border. The background now has color to it due to the “#d2b48c” tacked in, this is a hexadecimal, six character system that represents red, green, and blue. For instance, #00ff00 would be a lead to a very gaudy highlighter green while #2e0023 ends up to be a darkish purple, a combination of red and blue. I’m going to continue working and I’ll probably upload another post at the end of today. Later!