Learn CSS from the ground up

Throughout the years, I wrote a lot on CSS. This post contains all the resources that you should know to learn CSS from the ground up.

It will take you from the very basic to a little further. At least, these will give you a rock-solid concept of CSS.

All these posts contain source code, examples, and other necessary resources. Think of this post as a beginner guide to learning CSS.

SLHistory & basic concept
1What is CSS?
2What is the difference between CSS and CSS3?
3How to add a stylesheet to HTML?
4Comment for self note
5How to make text bold
6How to change image size?
7How to style buttons?
8How to deactivate links?
Border
1How to Use Border in CSS
2How to add borders in an HTML table
3How to hide the scrollbar using CSS
4CSS gradient border examples & explanation
5border-color CSS
Background
1How to use the background color in HTML CSS?
2Background images size CSS
3Animated background examples
Hover
1CSS hover
2How to change an image on hover
3How to create an image hover animation effect only with CSS?
4How to create a mouse hover HTML tooltip text?
Centering elements
1How to center an image in HTML CSS?
2Center text in CSS
3How to center a button in CSS?
4CSS vertically center text
5How to center a div in HTML CSS?
6Centering anything vertically with CSS
Alignment (other than the center)
1How to align text to the bottom of a div using CSS?
2How to right-align an image in HTML CSS?
Round/circle
1How to create a circle with CSS?
2CSS round corners
How to make a table rounded with CSS?
1Position
2How do CSS positions work?
3How to position text over an image with CSS?
Flexbox
1Core concept on Flexbox CSS
2How to create space between flex items?
3How to reverse the column on mobile?
Scroll
1How to style the scrollbar
2How to style scrollbar
3How to hide the scrollbar
Selectors
1Class vs ID
2How to use multiple class & ID selectors?
3Adjacent sibling combinator
Spacing
1Line Spacing CSS for Texts & Paragraphs
2Text-wrap
3Word Wrap Vs White Space
4Margin vs Padding
5Alternative to spacer
Lines
1How to create a vertical divider or separator line?
2How to change the hr color?
3How to remove the underline from a link
4Strikethrough
Make your hands dirty
1Two-column layout
2Three-column layout
3How to rotate text & images?
4How to make a box (2 methods)?
5How to create multiple-color text?
6How to make a horizontal list?
7How to create an alert box without Bootstrap?
Beginners guide to learning CSS

What’s next?

After completing this course, you will have a very good understanding of CSS and you’ll be able to create small things.

If you wish to take your skills to the next level, build some real-world projects. To help you with that, I have created a list of projects that you can practice.

Conclusion

Each of the topics has its individual page. If you get stuck at any point, you can ask questions on the individual page. If a topic is hard to explain in words, I included videos to explain it further. Therefore if you still have questions, you’re always welcome to ask new questions.