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.

<table><tbody><tr><td><strong>SL</strong></td><td><strong>History & basic concept</strong></td></tr><tr><td>6</td><td><a href=“/resizing-images-css/”>How to change image size?</a></td></tr><tr><td>7</td><td><a href=“/style-button-css/”>How to style buttons?</a></td></tr><tr><td></td><td><strong>Border</strong></td></tr><tr><td>2</td><td><a href=“/border-in-html-table/”>How to add borders in an HTML table</a></td></tr><tr><td>3</td><td><a href=“/hide-scrollbar-css/”>How to hide the scrollbar using CSS</a></td></tr><tr><td>4</td><td><a href=“/css-gradient-border/”>CSS gradient border examples & explanation</a></td></tr><tr><td></td><td><strong>Background</strong></td></tr><tr><td>2</td><td><a href=“/background-images-size-css/”>Background images size CSS</a></td></tr><tr><td>3</td><td><a href=“/animated-background-css/”>Animated background examples</a></td></tr><tr><td></td><td><strong>Hover</strong></td></tr><tr><td>2</td><td><a href=“/change-image-hover-css/”>How to change an image on hover</a></td></tr><tr><td>3</td><td><a href=“/image-hover-animation-effect-css/”>How to create an image hover animation effect only with CSS?</a></td></tr><tr><td>4</td><td><a href=“/hover-html-text-title-attribute/”>How to create a mouse hover HTML tooltip text?</a></td></tr><tr><td></td><td><strong>Centering elements</strong></td></tr><tr><td>1</td><td><a href=“/center-image-css/”>How to center an image in HTML CSS?</a></td></tr><tr><td>2</td><td><a href=“/css-vertically-center-text/”>CSS vertically center text</a></td></tr><tr><td>3</td><td><a href=“/css-centering-div/”>How to center a div in HTML CSS?</a></td></tr><tr><td>4</td><td><a href=“/centering-vertically-css/”>Centering anything vertically with CSS</a></td></tr><tr><td></td><td><strong>Alignment</strong> (other than the center)</td></tr><tr><td>1</td><td><a href=“/css-align-text-bottom/”>How to align text to the bottom of a div using CSS?</a></td></tr><tr><td>2</td><td><a href=“/right-align-image-html-css/”>How to right-align an image in HTML CSS?</a></td></tr><tr><td></td><td><strong>Round/circle</strong></td></tr><tr><td>1</td><td><a href=“/circle-css/”>How to create a circle with CSS?</a></td></tr><tr><td>2</td><td><a href=“/table-rounded-css/”>How to make a table rounded with CSS?</a></td></tr><tr><td>1</td><td><strong>Position</strong></td></tr><tr><td>2</td><td><a href=“/position-text-with-image-css/”>How to position text over an image with CSS?</a></td></tr><tr><td></td><td><strong>Flexbox</strong></td></tr><tr><td>1</td><td><a href=“/flexbox/”>Core concept on Flexbox CSS</a></td></tr><tr><td>2</td><td><a href=“/space-between-flexbox-items/”>How to create space between flex items?</a></td></tr><tr><td>3</td><td><a href=“/reverse-column-css/”>How to reverse the column on mobile?</a></td></tr><tr><td></td><td><strong>Scroll</strong></td></tr><tr><td>1</td><td><a href=“/hide-scrollbar-css/”>How to hide the scrollbar</a></td></tr><tr><td></td><td><strong>Selectors</strong></td></tr><tr><td>3</td><td><a href=“/adjacent-sibling-combinator-css/”>Adjacent sibling combinator</a></td></tr><tr><td></td><td><strong>Spacing</strong></td></tr><tr><td>4</td><td><a href=“/css-margins-vs-padding/”>Margin vs Padding</a> (Box Model)</td></tr><tr><td></td><td><strong>Lines</strong></td></tr><tr><td>2</td><td><a href=“/html-hr-color-css/”>How to change the hr color?</a></td></tr><tr><td></td><td><strong>Make your hands dirty</strong></td></tr><tr><td>1</td><td><a href=“/two-column-layout-html-css/”>Two-column layout</a></td></tr><tr><td>2</td><td><a href=“/how-to-create-3-column-layout-in-html-css/”>Three-column layout</a></td></tr><tr><td>3</td><td><a href=“/rotate-css-text-image/”>How to rotate text & images?</a></td></tr><tr><td>5</td><td><a href=“/multicolor-text-html-css/”>How to create multiple-color text?</a></td></tr><tr><td>6</td><td><a href=“/horizontal-list-css/”>How to make a horizontal list?</a></td></tr></tbody></table>

Beginner 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.

HTML CSS Projects

Each of the topics has its individual page. If you get stuck, 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, you’re always welcome to ask new questions.