CSS: Programming for Visual Designers

Jun 07 2012 Published by under Visual Design

This week in our visual design class, we learned about the difference between HTML and CSS, and why CSS is important for a visual designer to understand.

With the alphabet soup of acronyms that we use on the internet, it is no wonder that I glazed over whenever anyone mentioned programming with CSS.  I figured this was just another way to code the internet, a more complex language than HTML, and then I could ignore it and make it go away.

Well, I was partially right and partially wrong.  HTML, the Hyper-Text Markup Language, is essentially the skeleton for the web.  This tells you what is a header, where paragraph breaks are, what is displayed, and where to get information for other things, link graphics and hyperlinks.  But much like my personal skeleton, it would be rather creepy and off-putting if I just walked around, bare-bones, trying to get things done.

This is what makes CSS, or Cascading Style Sheets, so important.  This is where designers can really sing.  A great example of this is the CSS Zen Garden.  This website is designed to show the effect of playing only with CSS code.  The premise is that virtually anybody can take the same HTML skeleton code and write up their own CSS code to apply to it, which creates vastly different web pages, all with the exact same information provided.

This is an example of one CSS Zen Garden page using Mario.

This is an example of the same HTML information using a different CSS code.

There are many examples like these, some great, and some not.

The great thing about CSS is that it is Cascading, which means, rather than writing the same line of code many times over, you write the code to affect sections, and it cascades down, which allows for continuity and efficiency.  Also, you can affect specific areas to change specifics, and the rest will remain the same.

If you are into Visual Design, CSS is definitely a code that should be looked into.  And it is not as complex as it seems at first.  Do you have any examples of great CSS design?

One response so far