It was not long ago that simply taking a design, slicing it up in your favorite graphics program and uploading the pre-created html could pass as a perfect website; times have long since changed.
CSS has been around for a while, but it wasn’t until recently that CSS became part of the new trend hitting the net. With the introduction of Firefox, Opera, and other browsers supporting web advances and standards, CSS became the new way of styling all aspects of a site – from backgrounds to link colors and more.
Enter today, where we have a combination of a more cleaned up version of HTML and CSS being used together to build and style entire sites. They are today’s “standards”, a far different looking standard then the tables of years past. The hardest part for someone new to design is learning how to design using what’s out there today.
Leave the dust on the tables
Tables are old news. Many experienced designers pay a lot more attention to code these days. No matter how great your design is, everyone is looking for how many errors you have under a W3C validity checker. Leaving tables behind isn’t as easy as you think. It’s not as simple as finding all tags and replacing them with DIVs.
Styling with style sheets
How’d they get that rollover text effect? How do their links change colors link that? Chances are everything you see done today on good websites is coded in the cascading style sheet, or CSS. CSS files are simple pieces of code that can define text colors, sizes, font, borders, height and width or content boxes, and many other aspects of a site. CSS is also now being used in rollovers. Rather then having two separate pieces of code for a regular image state and a rollover image state, CSS is being used to control all the various states. If you can learn CSS, you are on the road to building better and cleaner sites.
Teach yourself
One thing I found to benefit myself a lot was learning on my own. If you have any basic HTML knowledge, learning XHTML and CSS is amazingly easy; programs such as Dreamweaver or TopStyle Pro aren’t there to intimidate you – they’re there to assist you and increase your output time by helping along with the coding process. The latest version of Dreamweaver will also clean up your html for you, making it valid XHTML. CSS is another thing, but it’s amazingly easy to understand once you view the source of another site.
View source is the key
When you stumble upon a site that has a layout making you say “how’d they pull that off?” the View Source feature of most browsers is irreplaceable; while I was learning, I visited many sites listed on cssvault and other CSS gallery sites. By copying the HTML code into your favorite coding program, and doing the same for the CSS, you can see exactly how the site was built. At first, the jumble of code may seem confusing and very hard to understand, but take things slowly and one part at a time. Look for things like DIVs with specific names (ID’s and/or classes) and find the corresponding information on the style sheet. It’s important to switch back and forth between code, CSS and design view(s); it makes it much easier to see what’s going on and how things are happening. You can experiment by changing values in the CSS like width settings and see how things change on the HTML. It’s all up to you to play around with different settings until you feel comfortable with it.
One, two or three column(s)?
There are many different ways of laying content out on a page. Some people want one column, some want two, and some want an unlimited amount. They won’t stop until they are content that they have a separate column for every different piece of information on their site. However you like it, there are ways to archive it. Bluerobot contains some excellent examples and detailed explanation of various layout types.
