As somebody who has been writing CSS for 13 years and watched numerous people fail here is the deal. You have to confront the challenges head on and solve for

As somebody who has been writing CSS for 13 years and watched numerous people fail here is the deal. You have to confront the challenges head on and solve for them directly. Unlike JavaScript there is no magic framework abstraction hide from your fears shortcut. You have to embrace this reality both cognitively and emotionally. This is the reality, accept it. If you cannot get past this barrier give up and do something else with your life. That said CSS isn’t too hard but it takes some very real practice up front to wrap your mind around it. The browser tools are much better than they used to be. First you have to understand that CSS describes markup and markup is a tree structure. A solid understanding of the DOM is helpful but not required. Most CSS properties cascade down to descendant DOM nodes but some do not, particularly anything addressing the box model. Second you have to embrace the box model. Don’t use the box-sizing property to redefine reality. Embrace the box model and understand it deeply. It isn’t hard but needs to be seared into your brain so that you are thinking about it visually instead of as code properties. Once you have mastered comfort with the box model you can use box-sizing if you want, but you probably won’t. Third, understand dimensions. For learning I recommend not using pixels. Set the body to font-size: 10px and use em units for everything else. This simplifies things by setting 1em to 10px for initial definitions and forces you to consider how the cascading works when 1em becomes some multiplicative value. You are already an experienced developer so the math won’t be hard. You just need to wrap your mind around why the value changes how to correct for it in the code. Fourth, learn float. Float Changes an element into something like display:inline-block and allows content to flow around it. Specify clear:both on another element to stop the flowing/wrapping behavior. You can create columns by creating a parent element filled with floating children. Add a final child element with display:block and clear:both to limit the floating behavior to the parent. Fifth, understand position. Default is position static. Avoid value absolute unless you deliberately want to impose layering and completely remove the element from the flow control of the page. The properties top, right, bottom, and left refer back to the last positioned ancestor node. Finally, play with pseudo classes to be familiar with what’s available. Practice those things and build up your confidence. It gets easy but it takes some effort. It is a different skill than programming logic. After I had first started learning there was something called the CSS Zen Garden that made for some practice. Here was my attempt: http://mailmarkup.org/zen/ http://mailmarkup.org/zen/ Browsers evolve in how they render text, but when I made that Zen Garden thing all the text columns were in complete vertical alignment cross browser.