DEV Community

Cover image for Top 10 CSS Tips I Wish I Knew as a Beginner
Chukwunonso Joseph Ofodile
Chukwunonso Joseph Ofodile

Posted on

Top 10 CSS Tips I Wish I Knew as a Beginner

#webdev #frontend #css #programming

When I started learning CSS, I thought it was all about colors and fonts. But the real power of CSS is in how it controls layout, spacing, and structure.

Here are 10 CSS tips I wish I knew earlier they would’ve saved me hours of frustration.

1. Use * { box-sizing: border-box; }

This makes every element calculate width and height including padding and border.
It saves you from weird box sizing issues.

* {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

2. Center Anything with Flexbox

The easiest way to center both vertically and horizontally:

display: flex;
justify-content: center;
align-items: center;
Enter fullscreen mode Exit fullscreen mode

3. Use CSS Variables for Consistency

You don’t need to repeat colors or fonts — define them once:

:root {
  --main-color: #ff4757;
}
button {
  background: var(--main-color);
}
Enter fullscreen mode Exit fullscreen mode

4. Master the gap Property

You don’t need margins everywhere.
Flexbox and Grid both support:

gap: 20px;
Enter fullscreen mode Exit fullscreen mode

5. Use min() and max() for Responsive Sizing

font-size: min(4vw, 20px);
Enter fullscreen mode Exit fullscreen mode

Makes text scale on smaller screens without becoming huge.

6. Learn clamp() for Dynamic Responsiveness

font-size: clamp(1rem, 2vw, 2rem);
Enter fullscreen mode Exit fullscreen mode

This keeps text size flexible but within limits.

7. Use :not() to Exclude Styles

p:not(:last-child) {
  margin-bottom: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Applies spacing to all paragraphs except the last one.

8. Reset Margins and Padding

Browsers add default spacing — remove it at the start:

* {
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

9. Use transition for Smooth Effects

button {
  transition: all 0.3s ease;
}
button:hover {
  transform: scale(1.05);
}
Enter fullscreen mode Exit fullscreen mode

It instantly makes your UI feel smoother.

10. Use DevTools Like a Pro

Right-click → “Inspect Element.”
You can tweak CSS live and see what works best — the fastest way to learn.

Keep Learning CSS the Smart Way

CSS doesn’t have to be confusing. Once you understand its logic, it becomes one of your most powerful tools as a web developer.

I share more short, beginner-friendly tutorials like this at LearnWithJoosy.com
— your step-by-step guide

Top comments (0)