[corywatilo]

If you know the basics, I'd say the best way is to actually build out some pages with different components and layouts. It's easy to code up one page, but when you get to having to build out multiple pages with different elements, it really makes you step back and start to componentize your CSS and make you think modularly. Nothing will beat experience and familiarizing yourself with different scenarios. When I was starting out, I went this route and utilized Experts Exchange when I got stuck. Great community over there (or at least 10ish years ago...)

If you're not a designer, take a popular webpage and build your own version of it, then look at the real source code and see how yours compares, or ask some CSS forum members to look over your code.

Build a library of frequently used styles. I have something like the following:

.small {font-size: 12px;} .big {font-size: 16px;} .bigger {font-size: 18px;} .biggest {font-size: 20px;}

...and it extends from everything like font sizes to colors.

.red {color: #f00;}

Then when you're building something out, you can reference generic styles from your own library. It makes things quick:

<p class="big red">foo</p>

I'd recommend against using something like Bootstrap early on. To really get the grasp of CSS, you'll want to work with ONLY your own code so you really understand how it works. Libraries are great, but you can only fully understand it if you control everything.

Hope these tips help!