These are the CSS concepts I think everyone should know to be comfortable using and designing anything with CSS.
I will also leave links to some resources below.
- changing text colors
- changing text size
- style a text (italic, bold, ...etc)
- spacing letters or words (
- changing capitalization (uppercase, lowercase, small-caps...etc)
- removing bullet points
- changing the default bullet points
- using roman numbers in lists
- color specificity (very important to know)
- background and foreground color
- background images
- clipping the background
You can also learn about Pseudo-Element/Class after background, or you can wait after the box model.
- padding, margin and border
- box shadows
- display types (
- block-level and inline elements
Sites with only colors and good fonts, are great. But without positioning, they are terrible to the eyes.
- positions (
- normal flow of elements
Always try to use position no matter how small.
floatsare hardly used these days, they are dying if not already.)
Learn how flex affects the container and children, when and how to use them efficiently.
- center text/elements with
Much harder to learn than Flexbox, but they can do what Flexbox does and more. Use both for their correct use.
minmax()and grid units - fractions (fr)
- media queries
- choosing good break points
- keyframe animation
Everything else that comes after these are features to boost productivity and adds more cool features to your skills and designs. Like:
- imports, replacing images, feature detection,...etc
Feel free to add anything I might have missed, and please leave your comments below.