Tag: responsive design

rem vs px in CSS: What’s the Difference and When to Use Each?

When working with CSS, you often see units like px and rem.
But many developers get confused:

🤔 Should I use px or rem?

In this guide, you’ll learn:

  • What px and rem are
  • Key differences
  • Real-world use cases
  • When to use each (very important)

What is px in CSS?

px stands for pixels.

👉 It is a fixed unit, meaning it does not change based on screen size or user settings.

Example

h1 {
  font-size: 16px;
}

👉 The font size will always be 16 pixels

What is rem in CSS?

rem stands for root em.

👉 It is a relative unit, based on the root (html) font size.

Example

html {
  font-size: 16px;
}h1 {
  font-size: 1rem;
}

👉 1rem = 16px

How rem Works

If:

html {
  font-size: 16px;
}

Then:

rempx
1rem16px
2rem32px
0.5rem8px

Key Differences Between rem and px

Featurepxrem
TypeFixedRelative
Responsive❌ No✅ Yes
Based onScreen pixelsRoot font size
Accessibility❌ Poor✅ Better
ScalingNoYes

Why rem is Preferred in Modern CSS

🔹 1. Better Responsiveness

If root font size changes:

html {
  font-size: 18px;
}

👉 All rem values scale automatically

🔹 2. Accessibility Support

Users can change browser font size → rem adjusts automatically

👉 Helps users with vision issues 👍

🔹 3. Consistent Design

You can control entire UI from one place (html)

When to Use px

Use px when you need precise control:

  • Borders
  • Shadows
  • Icons (fixed size)
  • Hairline elements

Example

border: 1px solid black;

When to Use rem

Use rem for:

  • Font sizes
  • Spacing (margin, padding)
  • Layout scaling

Example

p {
  font-size: 1rem;
  margin: 1.5rem;
}

Real-World Example

❌ Using px (Not Flexible)

.container {
  padding: 20px;
}

✅ Using rem (Flexible)

.container {
  padding: 1.25rem;
}

👉 Automatically adjusts with root font size

Common Mistakes

❌ Mixing units randomly

👉 Keep consistency

❌ Setting root font size incorrectly

html {
  font-size: 10px;
}

👉 Use carefully

rem vs em (Quick Note)

  • rem → based on root
  • em → based on parent

👉 rem is easier to manage

Best Practice

👉 Use both together:

  • rem → layout & typography
  • px → borders & fine details

Real-World Use Cases

  • Responsive websites
  • Design systems
  • UI frameworks (like MUI)
  • Accessibility-friendly apps

Interview Tip

If asked:

“px vs rem?”

👉 Answer:

“px is fixed, while rem is relative to the root font size, making it more responsive and accessible.”

🏁 Final Summary

  • px = fixed unit
  • rem = scalable unit
  • Use rem for responsiveness
  • Use px for precision

👉 Modern CSS prefers rem

Related Articles

👉 Add these:

💡 Found this helpful? Subscribe to get simple CSS guides, real-world examples, and frontend tips. Happy Coding!

CSS Variables Explained: A Complete Guide with Examples (Beginner to Advanced)

CSS Variables (also called Custom Properties) are one of the most powerful features in modern CSS. They help you write clean, reusable, and maintainable styles.

In this guide, you’ll learn:

  • What CSS Variables are
  • Why we need them
  • How they work
  • Real-world examples
  • Best practices

What Are CSS Variables?

CSS Variables are custom values that you define and reuse in your CSS.

👉 They start with -- and are accessed using var().

Basic Example

:root {
  --primary-color: blue;
}button {
  background-color: var(--primary-color);
}

👉 Output:

  • Button background becomes blue

Why Do We Need CSS Variables?

Before CSS Variables, we had problems like:

❌ Repeating same values everywhere
❌ Difficult to update styles
❌ No dynamic theming

Example Without Variables

button {
  background-color: blue;
}.header {
  color: blue;
}

👉 If you want to change blue → red, you must update everywhere ❌

With CSS Variables

:root {
  --primary-color: blue;
}button {
  background-color: var(--primary-color);
}.header {
  color: var(--primary-color);
}

👉 Change once → updated everywhere ✅

How CSS Variables Work

🔹 Defining Variables

:root {
  --main-color: green;
}

👉 :root = global scope

🔹 Using Variables

p {
  color: var(--main-color);
}

Scope of CSS Variables

🔹 Global Scope

:root {
  --color: red;
}

👉 Available everywhere

🔹 Local Scope

.card {
  --color: blue;
}.card p {
  color: var(--color);
}

👉 Only inside .card

Updating Variables Dynamically

You can update variables using JavaScript:

document.documentElement.style.setProperty('--primary-color', 'red');

👉 Instantly updates UI 🔥

Real-World Use Case: Theme Switching

Light Theme

:root {
  --bg-color: white;
  --text-color: black;
}

Dark Theme

.dark {
  --bg-color: black;
  --text-color: white;
}

Usage

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

👉 Just toggle .dark class → theme changes instantly

Fallback Values (Very Important)

color: var(--primary-color, red);

👉 If variable not defined → fallback to red

Advanced Example

:root {
  --spacing: 10px;
}.container {
  padding: calc(var(--spacing) * 2);
}

👉 Works with calculations 🔥

🆚 CSS Variables vs SCSS Variables

FeatureCSS VariablesSCSS Variables
Runtime change✅ Yes❌ No
Works in browser✅ Yes❌ Precompiled
Dynamic themes✅ Yes❌ No

Best Practices

  • Use meaningful names (--primary-color)
  • Define global variables in :root
  • Avoid overusing variables
  • Use for themes and reusable values

Where CSS Variables Are Used

  • React (MUI, Tailwind configs)
  • Theming systems
  • Design systems
  • Dark/light mode

Interview Tip

If asked:

“What are CSS variables?”

👉 Answer:

“CSS variables are reusable custom properties that allow dynamic styling and runtime updates in CSS.”

🏁 Final Summary

  • CSS Variables improve maintainability
  • They support dynamic updates
  • Useful for themes and reusable styles
  • Work directly in browser

Related Articles

💡 Found this helpful? Subscribe to get simple frontend tutorials, real-world examples, and developer tips. Happy Coding!