CSS Made Easy: Colors, Spacing, Flexbox & Grid
If HTML is the skeleton, CSS is the style — colors, fonts, spacing and layout. With just a few properties you can make any page look professional.
By Learn Refill Mentors · Updated
Why learn CSS?
- Makes your websites look modern and professional
- Flexbox and Grid solve almost every layout problem
- Needed for every frontend job
1Connect a CSS file
Create style.css and link it inside the head of your HTML.
<link rel="stylesheet" href="style.css" />2Selectors, colors and fonts
A selector picks elements, then you set properties. Use classes (.name) for reusable styles.
body {
font-family: Arial, sans-serif;
color: #3a2820;
}
.title {
color: #6b1e2b;
font-size: 32px;
}3Understand the box model
Every element is a box: content, padding (inside space), border and margin (outside space). box-sizing: border-box makes sizes easier to control.
* { box-sizing: border-box; }
.card {
padding: 16px;
border: 1px solid #ddd;
margin: 12px;
border-radius: 12px;
}4Line things up with Flexbox
Flexbox arranges items in a row or column. justify-content controls the main direction, align-items the cross direction.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}5Build page layouts with Grid
Grid is perfect for card layouts. This makes 3 equal columns that become 1 column on mobile.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.cards { grid-template-columns: 1fr; }
}Common mistakes
- Using fixed widths in px everywhere — layouts break on mobile
- Confusing margin and padding
- Adding !important to fix every problem
Practice task
Style your 'About Me' page: a centered card, a flex navbar and a 3-column grid of skill cards that becomes 1 column on mobile.
Frequently asked questions
Flexbox or Grid — which should I use?
Flexbox for one direction (a row of buttons, a navbar). Grid for two directions (a page layout or a gallery of cards).
Should I learn Tailwind CSS instead?
Learn plain CSS first. Tailwind is much easier once you understand how CSS properties work.