As a self-learnt web developer, I can recommend tutorials from Mozilla Developer Network’s Web Docs. You can find the one specific to CSS in this link: CSS Tutorials - MDN Web Docs.
To grok CSS, I think the simplest path is to create something simple. Maybe an empty webpage with:
- 2 lines of text with custom fonts (from local file, or from Google Fonts repository) in upper middle
- custom background colors (that maybe can change based on PC’s light/dark mode)
- a plain box with certain color, that you put exactly in lower left, following the screen even when user scroll.
You will learn about what is
index.css, and how you can add CSS inside
You can use simple plain-text editor like TextEdit or BBEdit (free version is enough). Then you’d edit local
index.html file with
<style></style> element inside
<head>, then open the html file in browser. Also regularly press ⌘R to refresh the local page each time you make a change
Browse your problem you encounter with Google / DuckDuckGo. You might often find solution in articles by CSS-Tricks. They provides great articles, and often includes interactive example you can edit and interact with.
Example: outline-color - CSS-Tricks
Other example of great introduction article: A Complete Guide to Flexbox - CSS-Tricks
If you want to try paid approach, I can recommend Frontend Masters that coincidentally is sponsor of CSS-Tricks.