Tag: css

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!

A Standard Guide to Responsive Web Design

Responsive design is no longer optional.
But blindly “making things responsive” without understanding the standards often creates poor user experience.

This guide explains responsive design clearly, practically, and honestly.

What Is Responsive Design?

Responsive design means:

Designing websites that adapt smoothly to different screen sizes, devices, and orientations without breaking usability.

It’s not just about shrinking content —
it’s about preserving intent and usability.

Why Responsive Design Is Necessary

1️⃣ Users Use Multiple Devices

  • Mobile phones
  • Tablets
  • Laptops
  • Large desktops

A fixed-width site fails on most of them.

2️⃣ Google Uses Mobile-First Indexing

Google evaluates:

  • Mobile layout
  • Performance
  • Usability

❌ Non-responsive sites rank poorly.

3️⃣ Accessibility & Inclusion

  • Larger text
  • Touch-friendly buttons
  • Screen reader compatibility

Responsive design supports everyone, not just mobile users.

Core Responsive Design Standards to Follow

1️⃣ Mobile-First Design

Start designing for small screens first, then scale up.

❌ Desktop-first causes clutter on mobile
✅ Mobile-first forces clarity

/* Mobile styles */
body { font-size: 16px; }
/* Tablet and above */
@media (min-width: 768px) {
  body { font-size: 18px; }
}

2️⃣ Use Fluid Layouts (Not Fixed Widths)

❌ Avoid:

.container { width: 1200px; }

✅ Prefer:

.container { max-width: 1200px; width: 100%; }

This allows content to adapt naturally.

3️⃣ Flexible Units (rem, em, %, vw)

UnitUse Case
remFont sizes
%Containers
vw/vhViewport-based elements
pxBorders & icons

❌ Pixel-only layouts break on different screens.

4️⃣ Breakpoints Based on Content, Not Devices

❌ Bad practice:

  • “iPhone breakpoint”
  • “iPad breakpoint”

✅ Good practice:

  • Break when layout looks broken

Common starting points:

  • 480px
  • 768px
  • 1024px
  • 1280px

5️⃣ Responsive Images

Images must adapt without distortion.

img {
  max-width: 100%;
  height: auto;
}

Use:

  • srcset
  • sizes
  • Modern formats (WebP)

6️⃣ Touch-Friendly Design

Mobile users don’t have a mouse.

Standards to follow:

  • Minimum touch target: 44×44px
  • Enough spacing between buttons
  • Avoid hover-only interactions

7️⃣ Typography Responsiveness

Readable text matters more than layout.

Standards:

  • Base font size: 16px minimum
  • Line height: 1.4 – 1.6
  • Limit line width to ~75 characters

Key Concepts You Must Understand

🔹 Media Queries

They apply styles conditionally.

@media (min-width: 1024px) {
  .layout { display: flex; }
}

🔹 Flexbox & Grid

Modern layout systems replace floats.

  • Flexbox → one-dimensional layouts
  • Grid → two-dimensional layouts

They adapt naturally to screen changes.

🔹 Viewport Meta Tag

Without this, mobile browsers scale pages incorrectly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

When You Should NOT Use Responsive Design

Responsive design is not always the best solution.

❌ Avoid or rethink if:

  • You are building a device-specific kiosk
  • You need pixel-perfect print layouts
  • Performance budget is extremely strict
  • Complex data tables need different UX

Sometimes:
➡ Separate mobile experience is better.

Common Mistakes to Avoid

  • Hiding content instead of redesigning
  • Too many breakpoints
  • Desktop-heavy animations on mobile
  • Ignoring performance
  • Assuming “responsive = accessible” (it’s not)

Performance Is Part of Responsiveness

A responsive site that loads slowly fails.

Best practices:

  • Lazy-load images
  • Reduce CSS & JS
  • Avoid heavy libraries on mobile

Responsiveness includes speed.

Final Checklist (Use This)

✔ Mobile-first
✔ Fluid layouts
✔ Flexible units
✔ Content-based breakpoints
✔ Responsive images
✔ Touch-friendly UX
✔ Performance optimized

Final Thought

Responsive design is not about screens.
It’s about respecting users.

Follow standards when they improve usability.
Avoid them when they complicate experience.

A good responsive design feels natural, not forced.

Heart Beat Animation with ReactJS and CSS

Heart.js

import React from 'react';
import './Heart.css';

const Heart = () => {
  return (
    <div className="heart-container">
      <div className="heart"></div>
    </div>
  );
};

export default Heart;
Heart.css

/* Align the heart to the center of the page */
.heart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* creating two circles */
.heart::before,
.heart::after {
    content: "";
    width: 100px;
    height: 100px;
    background-color: #e63946;
    position: absolute;
    border-radius: 50%;
}

.heart::before {
    top: -50px;
}

.heart::after {
    left: 50px;
}

/* Creating square */
.heart {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #e63946;
    transform: rotate(-45deg);
    animation: beat 1s infinite;
}

/* Heart Beat Animation */
@keyframes beat {
    0%, 100% {
        transform: scale(1) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(-45deg);
    }
}
  • By using div with className(.heart) we have created heart shape
  • By using the div with the className(.heart-container) we have aligned the heart to the center of the page.
  • Heart Shape: We have created the heart by positioning two circular divs (::before and ::after) next to a square div, then rotating the main .heart div by -45deg.
  • Animation: The @keyframes beat animation makes the heart scale up and down, creating a “beating” effect.
  • 0%, 100%: The heart starts and ends at its original scale (1), so it returns to the original size after each beat.
  • 50%: The heart scales up to 1.2 times its original size, creating the “pumping” effect in the middle of each beat cycle.