Take a good hard look at yourself. Now look back. Now look to your right, now back at me. I am on a horse.
But in all seriousness, HTML and CSS has to be the hardest thing I’ve had to learn so far. I account that not only to microsoft
being so darn slow at implementing conformant browsers (A dollar for every time i’ve seen “for this to work in IE <7…”), but
mostly for the countless caveats I encounter. Add that to cascading rules that make documentation grinding a grim reality and
specificity laws that change with authorship, user-clients, position in stylesheet, selector ids, classes and pseudo-classes and
you have a surefire way of ensuring depletion of ones patience repositories.
But I’m a noob. Maybe I fail often just because I expect css to work just like java. That i would only need a small language subset
and it would all just flow nicely from the tips of my fingers. Instead i find myself writting rules not logic and scratching my
head because the element on my page turned grey instead of beige due to some hidden css selector somewhere in bootstrap’s stylesheet.
Firefox comes to the rescue here slightly, their inspector is second to none IMHO and given the options available I would
recommend mozilla in a heartbeat. What it doesn’t tell you though is where the selector is. For that i have to know what possible
style sheets i have referenced and find it myself. And thats why I don’t like CSS. It’s not that its hard, but it is tedious. and
highly error prone to all but those who know their style sheets through and through and css cascading rules in their head. I’ve never
seen a specification for rule inheritance as complex as css’s. I suppose you’d need it though. There’s all this stuff about specified values,
computed values, inherited values and so forth. Selector specificity is a monster in itself and easily off putting to those new to the
If you are starting out in HTML and CSS there are a couple of things I would suggest.
Learn from example:
download bootstrap and set up a few base components where you can look into the style sheet and observe why elements are doing what they are doing. CSS is best learned in the field not in the book. You won’t be memorizing key attributes but you’ll experience their effect in real life and thats how you’ll learn.
Reference a selector cheat sheet until you know it from heart:
CSS is all about zeroing in on document elements given a certain criteria and applying properties to that element. once you understand this, It is easy to read through css sheets and anticipate an element’s computed properties. but to fully understand what an element will contain you must…
Learn the Inheritance model:
Google ‘css inheritance tutorial’ and you’ll find something useful eventually. Understanding this is crucial to ensuring you don’t spend hours tweaking a selector to make the element do what you will. If you use a css framework like bootstrap, There exist a multitude of selectors that will clobber your page you need to ‘beat’ in order to make your page behave the way you want.
Don’t use ids too often:
the power in CSS is in it’s inheritance and selectors and therefore it’s don’t-repeat-yourselfness (DRY), Using ID’s means that you are creating styles that cannot be reused. This is often counter intuitive unless you are certain the element itself is a once off (I.e. Your company logo).
don’t sulk, just do it:
Obligatory Nike reference here. Too often in my early html, css days I found my self staring at my blank page feeling overwhlemed at the css documentation, html creation, style syndication that lay before me. There is no shortcut to learning web design other than simply starting to design something. If you are stuck for ideas then there are a multitude of sites that give examples of goals you can make. Like i said in my first point, This field is best learnt in the pudding not out. Make short, acheivable goals. And I mean small; make this element pink, Make this box float left, small gradual goals will help you build confidence slowly. back this up with a decent source control system [i.e. use Git], and a build system like grunt and you can have a tight workflow of cause and effect, seeing changes immediately as you edit your source files.
I hope you find hope in the mess that is HTML and CSS more than I did when i started. It’s not impossible and eventually you will find your rhythm like I am finding mine. Just keep going!
Happy coding fellas!