Designing Your Own Website? Learn CSS… The Effective Way
While content is key (ok I know I’m getting redundant) then your websites design is the lock to open to door to a successful website.
The way you organize your site will determine how long people will visit your site and how accessible the information will be so as not to frustrate your users… (read more here).
To successfully design a site however, these days you really need to know CSS.
CSS stands for Cascading Style Sheets and its basic function is to let you “move around” and manipulate HTML so that you can neatly and effectively arrange text, images, and dividers on your site into any design limited solely by your imagination.
Quick example relating CSS to HTML? Click here to go to CSS Zen Garden, where there are various websites which use the exact same HTML… the only thing that has been changed is the CSS used to style the HTML. You will see some amazing looking websites, all vastly different from the other.
How do you learn CSS?
After attempting and failing a few times already, after buying books and reading manuals… the best way is to learn by example!
There are so many small details, trying to learn by reading is simply ridiculous. Please save your time and don’t even try to learn by picking up and reading a book.
You have to actually practice… ya dig?
So click here to go to CSStutorial.net, where there is a very good step by step tutorial which will have you create a very simple page using HTML and CSS, and then add on to it.
Another GREAT tool is Firebug, a FREE add-on for Firefox which lets you not only view the HTML and CSS of a website, you can change any site’s HTML and CSS real-time and actually see it change right there in your browser. You can add new code and see what happens! Invaluable for learning CSS and getting idea’s.
Click here for a great video tutorial on how to use Firebug.
To all of you running Thesis who want to be able to customize it, I highly recommend to learn CSS. I’m in the process of doing that now, and will post up a series of pictures showing the design transition of my website once I am finished tweaking the CSS where I want it to be.