3 ms·
I'm going to recommend what may be a controversial approach: learn CSS in a historical order. First off, do NOT attempt to learn using a framework. They're co
by cimmanom 8y ago
I'm going to recommend what may be a controversial approach: learn CSS in a historical order.
First off, do NOT attempt to learn using a framework. They're complicated and tend to make a lot of compromises in order to satisfy everyone.
Start with CSS1. This supports basic font selection and sizing, bold and italics; margins, padding, borders, and backgrounds. You can't do much in terms of positioning, but the simplicity will help you understand crucial basic concepts: the cascade and the difference between inline and block elements.
Next, learn CSS2, which adds more selectors, positioning and display properties, floats, and a more sophisticated box model. You'll know you've mastered this when you can produce 2-3 different variations of what used to be called the "Holy Grail" layout.
The holy grail layout is a header, 3 columns, and a footer. The columns are ordered center, left, right in HTML markup. Each column has a different background color or pattern, and they all stretch the full height of the layout, no matter how much content is in them or which one has the longest content. It does not have to be responsive, but bonus points if it is.
Responsive layouts can be created with CSS2, and knowing how will mean you've really mastered the concepts, but CSS3 has better features to support more flexible and sophisticated ones.
Smashing Magazine used to be a pretty good resource for CSS2 tutorials, and I bet you can still dig them up with some determined googling. If you want to see what CSS2 is capable of, check out the CSS Zen Garden.
Finally, learn one CSS3+ concept at a time: yet more selectors; generated content; more sophisticated backgrounds and borders; alternative box models; columns; grids; flexbox. Each of these concepts can take a little while to grasp, so they're best approached independently.
I'm not aware of a good source for tutorials on CSS3+ (maybe try W3Schools?), but MDN and CSS Tricks are my go-to references.