I've found the best way is to build things over and over again. That may reflect a certain learning style but actually manipulating styles and layouts really helps hammer home the practical aspects of how it works.
I also approach writing CSS with the goal of writing as little as possible. Not because I don't like it - I tend to think it gets an unfairly bad rap - but because it teaches you how to more effectively style layouts without layering too many declarations.
I feel like this type of thinking is why 99% of people don't understands css though, when you are just building things you make up rules that don't exist and ignore the ones that do. And its not as straight forward as programming languages are so its very hard to tell when something is "wrong".
Yeah, maybe my suggestion could've been better stated. I'm not suggesting that you can ignore documentation and other forms of writing that explore paradigms and methodologies. I meant there's only so much you can read before actually writing CSS and practicing making layouts becomes a necessary part of learning CSS in depth.
And, to play devil's advocate a little: You can't make up a rule that doesn't exist. Either your CSS will work or it won't. And if it works it's not wrong.
> You can't make up a rule that doesn't exist. Either your CSS will work or it won't. And if it works it's not wrong.
So much this. Over the course of years, I've gone from writing my CV in Word, TeX, and (finally) straight HTML. Word processors are fairly straightforward -- and yet -- for more complex layouts you will eventually encounter internal sizing constraints that require messing with the global template.
This reality - combined with the fact that MS Office is a gigantic monster which is barely tolerable on macOS, led me to TeX. Plaintext -- more or less -- and good support for integrating with version control systems made it an easy choice.
Fast forward a few years and I'm all HTML + a handful of CSS rules w/ @print at this point. Cryptic error messages and the care and feeding of a BasicTex install just became too much work to bother with. At least in HTML, save for a showstopping error, your document will render something and the errors are usually pretty obvious.
Not so much in TeX...
Modern layout also meant I could ditch floats for nearly everything - flexbox will create reasonable page headers with much less gnashing of teeth.
This week I am refreshing my front-end skills, so I did a little market research.
The best resource on CSS basics, I have found, is https://web.dev/learn/css. It includes flexbox and grid.
For design guidelines I recommend Refactoring UI. It is full of actionable advice, which books such as The UX book is lacking.
In my project I use TailwindCSS (by the author of Refacturing UI) with Daisy UI components, so I don't actually write raw CSS. At first TailwindCSS feels like a step backwards to inline CSS, but it is just better than the alternative. I recommend giving it a chance.
The former is not meant as a learning resource for new web devs. And the latter (which is neither official nor authoritative) usually has information about the "baseline" support and browser compatibility tables.
The former, I'm not really new just looking to increase my understanding of some concepts and learning from that has not been too fun. I don't think MDN goes in depth as much as I'd like it to.
Learn flexbox. Learn the box model (especially when to use margin vs padding). Learn how style cascading works (and why we use SCSS and component development to mostly avoid thinking about it). Learn media queries and how to target different screen sizes. Most of all, don't ever feel badly about doing a web search “how to do x in css”, the spec is huge with tons to remember and you won’t memorize everything without using it regularly for an extended period of time.
I attempted CSS back when you had to float anything/everything for positioning and found it extremely confusing. I recently picked it back up, and flexbox and grid make it sooo much easier. I feel like I'm finally getting it.
Learn page layout and graphic design principles. A lot of CSS is spec'd to support these disciplines and it will make a lot more sense if you are familiar with them. The main reason developers have so much trouble with CSS is that they don't understand the problems it is trying to solve.
Best way to learn is to build sites with experimental layouts. You'll get stuck and thats when you'd want to look around the documentation or Stack Overflow. MDN docs are the incredibly dry, so avoid them until absolutely necessary.
Heh, off-topic, but this is one of my favourite "EU English"-isms: using actual to mean current.
Completely understandable, given how e.g. the Dutch translation of current is actueel (whereas the translation of actual is daadwerkelijk).
Anyway, maybe this is even helpful if a native speaker is confused :)