Thursday, February 2, 2012

Presentation of the Future

I will be a bit technical in this blog, but I will help start with the beginning of what CSS is and what it does. CSS is an acronym for Cascading Style Sheet. Every webpage should have a separate CSS file that has rules that tell the HTML how to look and what to do. This CSS sheet is linked into the HTML to help make the HTML less bloated. Without these rules your webpage will be black and white with basic styling like one font at one size, and, well that’s it. No photos, no colors, no background.
Here is a good analogy, HTML is like speaking of a noun, which states what something is. If I say that is a car, you understand that whatever I am speaking about is a car. To add values or properties to this car is adding in adjectives to this noun. These adjectives, or the values and properties, are like the styles in a CSS sheet.

The Long Rich Deep History (from 1994)

The World Wide Web Consortium, which is basically the united nations of web development,  had introduced 9 different style sheets and dwindled it down to 2 to become what we know today as CSS. In 1995 the W3C had a workshop on style sheets proposed ideas and a structure for CSS 1. Here is the agenda to the workshop. There were many times that CSS level one recommendations were revised and updated, while the CSS level 2 drafts began in 1997, and CSS level 3 drafts began in 1999.
Today CSS 3 is not fully compatible with all browsers, but is used quite often.

I assume this is the security at the W3C headquarters, and they really like cats.

So What Exactly Are We Talking About?

CSS essentially helps to make your website look good. I could talk about this all day, but showing you is much easier to grab the concept. Here is the site in its full entirety.

And here it is without CSS.

As you can see, it is much more elegant and aesthetic. Why wouldn’t you want to do this for your website?

Technical Features

CSS has its own syntax which isn’t too hard to understand. www.HTMLdog.com is a favorite resource for me. It has tutorials, reference sections, articles, and examples that are extensively useful.
Now CSS3 has stepped it up and has more features, with often times less code. HTMLdog does not have CSS3 features yet, but here are some features that are quite useful.
Some of the most exciting new features are box-shadows, multiple backgrounds, opacity with RGBA, HSL, and HSLA colors, text-shadows, and multi-column layouts. Transform and Transition is one that is still not being used to its full extent. The best example I can find involves a javascript file, which will be held back for a different blog later on, but uses the transform and transitions very creatively.
There is much more to look into with new CSS features. You are essentially a young child, curious and enlightened by the unknown. So go explore and try something new, the worst that will happen is you will learn something.
If you have a pet tiger, the road may be safer.

Watch Out For Cow Pies!

The road will not be a paved highway, it will be an off-road path, so in doing so, try to make sure that you watch where you step. You may design something that surpasses the Mona Lisa in beauty, and when you open it up in Internet Explorer, it looks like a bad Picasso piece.


Oh The Beauty!
There will be kinks and bumps in the road and the only way to battle that is to expect it and seek out solutions.

Conclusion

Whether you are new to web design, or feel as if you are a guru, practice makes perfect. You are never alone in your search for creating beautiful websites. There are generators, tutorials, techniques, and inspiration  everywhere!
Your journey will be long, so a fore warning, the internet is obsessed with cats. So I figured I would go ahead and help out to. Enjoy the video! 

No comments:

Post a Comment