Cascading Style Sheets or more commonly known as CSS, is the language that describes the look and feel of a website. With CSS, web designers able to style a website creatively and it is the vital component in the front-end web development. It is the must learn language for web designers or people who wants to make websites. But CSS is not easy.
Fortunately there are a lot of free online resources that are accessible to everyone to read and learn. So in this article, I will share with you all 7 resources to learn understand the function and tricks of CSS. I think all the links introduced in this article will benefit not just beginners but also web professionals as well!
Visit Dedicated CSS Learning Websites
First up is the websites that dedicated to CSS. I recommend four CSS learning websites listed below. Well, I thin W3Schools is a very important reference site, as I am now still visiting this site from time to time. A new site discovered recently is the CSS 101 which explains some tricky CSS. Worth a visit.
Read CSS Articles and Tutorials
There are quite a number of great posts at some prestigious web development blogs, writing about essential resources to learn CSS, and teaches you to build website using CSS as well. When I start learning to code CSS 3 years ago, I learnt from Subcide’s article “Creating a CSS Layout from Scratch”. Now the article is a little old but it’s still a great learning material.
- Smashing Magazine – Mastering CSS Coding: Getting Started
- Six Revisions – 100 Exceedingly Useful CSS Tips and Tricks
- Sitepoint – Learn HTML and CSS: An Absolute Beginner’s Guide
- WPDFD – CSS From the Ground Up
- Subcide – Creating a CSS Layout From Scratch
Learn by Inspecting Elements
One thing unique about web designs is designers need to code the design. Design that done in graphic software, need to be sliced and reconstruct again in editor. So that’s why every web page has the source file that can be viewed via browsers “view source” function.
I think viewing source of a website is the essential way to learn CSS as well. As now many modern browsers have built-in Developer’s Tool to assist you on finding the CSS styles and HTML markups behind cool designs. I rely heavily on Firefox extension called Firebug to check out the great styles, then learn and play around with it. It is a very important tool for web designers and I think everyone who works with web should use it!
Use Cheat Sheets as reference
CSS has loads of properties and sometimes we just can’t remember all. A good cheat sheet will come in handy. Below are links to useful CSS cheat sheets for everyone. You can print it out and stick it some where near your workstation as quick reference.
Understand the browsers
There are different browsers in the market for example Firefox, Chrome, Safari, Internet Explorer, Opera etc and designs renders differently on them because of the different rendering engine used. Internet Explorer is the browser that gives the most headache because it is lacking behind in terms of Web Standards. Besides that, modern browsers also supports differently in CSS3 and need to attach the vendor prefixes to make it work.
It is important for web designers to get to know what is support and unsupported in different browsers, in order to create a website that is workable in major browsers.
- 9 Most Common IE Bugs and How to Fix Them
- Internet Explorer vs. the Standards
- 10 Best CSS Hacks
- CSS contents and browser compatibility
- HTML5 and CSS3 Compatibility
- Vendor Prefix Lists
Subscribe to CSS Blogs
There are also many web development blogs that discuss about the latest tricks as well as best practices when working with CSS. By reading these CSS related blogs, I sure you will improve a lot and be a smart CSS coder!
- CSS Tricks
- CSS Globe
- CSS3.info
- 456BereaStreet’s CSS articles
- Smashing Magazine’s CSS articles
- Six Revisions’ CSS articles
- A List Apart CSS articles
Ask the community!
I’m pretty sure every designers will comes to a point where has no clue to solve certain CSS problems. The best solution is to ask people! Besides asking web designer friends or colleagues, you can also join online forum, posting up questions and receive tips from experts. Stack Overflow is a great place to ask including CSS related issues.
Try them out and learn along!
Once you had read about the tips and tutorials, perhaps you should start try it out yourself! Well you can use your system’s text editor, or by using some online web editor! Personally I love JSFiddle because not only you can save it online, it provides version control as well.
End Word
Basically here is the conclusion of this article. I hope you guys enjoying it. Don’t forget to Tweet it, and share with people who wants to pick up CSS skills.
Comments