Actually, it didn’t save my life, but it has saved me an amazing amount of time and hassle. So it has saved some precious moments of my life. I know a lot of folks hear about CSS and wonder…”What the heck is it? Is is Html? Is it Javascript? Why do I care?” Believe me, I used to wonder all those things myself. Understanding CSS in detail really isn’t that important for most REALTORS. However, they should understand what it can do and why it’s so important.

Basics of CSS
Stands for… Cascading Style Sheets (huh?)
Definition: A new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page.
The term cascading derives from the fact that multiple style sheets can be applied to the same Web page. CSS was developed by the W3C. (Source: http://isp.webopedia.com/TERM/C/CSS.html)

My Definition: An advanced version of HTML that allows you to consolidate the look and feel of your entire website into one document. Kind of a HTML 2.0 if you will.

Don’t be overwhelmed. This is actually a very simple concept, despite how much techies like to over complicate it. Let me give you a simple example.

Let’s say I want to use Arial as the font on every page of my website. This is what I would do in the CSS file…

td { font: arial, tahoma, helvetica;} (the additional fonts are backup in case a user doesn’t have Arial on the computer)

When I do this, every piece of text on the site is going to use Arial as the default font. Then one day out of the blue clear sky, I decide to change my font to Times New Roman instead of Arial. Don’t ask me why. Just ’cause I can. All we would need to do is change the code to…

td { font: times new roman, arial, tahoma, helvetica;}

Now the font on every page across the entire site will use the Times New Roman font instead of Arial.

Without CSS, we would of had to go into the HTML of every page and change the font-family to Trebuchet. Which isn’t a fun or easy task. Especially if you have a website with 1000’s of pages. Why create more work for yourself?

Here’s a good demo of how it all works. http://www.w3schools.com/css/demo_default.htm. The html on these pages are all the same, they just use a different style sheet so the fonts, colors and borders change with each selection. You will also be able to view the CSS to get an understanding of the syntax and how it all works.

The same theory works for every element of design for your website. Everything from background images, font colors, borders, buttons and even rollover images. There are some really tricky things you can do with CSS. There’s actually a way to create an entire website layout with only 1 image and one css file. It’s called a “CSS Sprite”. Basically you consolidate every image for your website and put it on one single graphic. Then you call that graphic as a background image in CSS and position it to show the desired image in the location you want. This is getting a bit complicated, so I’ll save that for another day.

The point is that you can do so much with CSS that it eliminates an unbelievable amount of work for those of us who use it properly. Changing an entire website by only changing one file is one of the best kept secrets on the web.

If you’d like to learn more, I encourage you to take a look at the CSS tutorials at http://www.w3schools.com/css/default.asp. They have just about everything you’re going to need to get started with CSS.

Disclaimer: Some elements of CSS have been simplified to explain it’s basic principals.