Fix CSS

CSS stands for cascading style sheets. Something that really makes sense if you look at how this code works in the browser. It never stops. It's continuously flowing, like water. You put your hand there. You change the course for the water. Luckily there is a great tool you're gonna love for CSS. It's free, easy to access and it's integrated natively with Chrome. I can clearly imagine that you've already guessed what I was going to say: Chrome Developer Tools (Firebug for Firefox works mostly the same way).

What's awesome about these tools is that you are allowed to test your CSS with your browser and either decide to keep a change or not after you've checked all the possible consequences.

It happens very often that changing the course for the water at some point has side effects at some other point. If you don't like the changes you've made, just refresh the browser. And there you are again. Nothing did actually get broke. You like the changes. It looks better. Excellent! Copy the code, go to your Sublime Text and paste it.

I strongly recommend you use a sophisticated TextEditor for CSS (JS & HTML). Like Sublime or Text Wrangler, in this case I'm using Atom (a cool open-source weapon). Vertical lines and numbers are useful. Different colors for Selectors, Properties or Values and even curly braces, it's something you won't get with your textEdit.

As you see in the example above, you have the crimson color used to recognize any property you want to set to a related element in your HTML, you have the light-green color for a class selector, close to the end of the box (class selectors always start with a . ). And you also have the cyan color for the declarations, so you can see them all clearly in a blink.

You should try the autocomplete options this kind of programs brings. Especially to open and closing a section of the code (they are awesome for declarations in CSS, tags in HTML and code blocks in JS), but they are also great to get your code aligned from the ground. That saves a lot of time, believe me, and helps you writing a very clear and understandable code.

CSS3 has a very interesting way of animating objects directly with CSS that everyone should try at least once. It's not as wide as what you can manage with JavaScript, but it's very easy to render.

It's also a good idea to check your pages after every actualization of the browsers if you don't want surprises with these features.