CSS accent-color Property

What is accent-color ?

The accent-color CSS property applies the custom accent-color for user-interface controls like <input type=”checkbox”>, <input type=”radio”>, <input type=”range”> and <progress> .

For Example, default color of checkbox for the following code is as follows

			
.task-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
}

		

After applying accent-color as red, it will show as follows

			
.task-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
  accent-color: red;
}

		

NOTE: By default, browser choose the accent-color. if we need any specific color, we need to give it manually like above.

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:

rem	px
1rem	16px
2rem	32px
0.5rem	8px

Key Differences Between `rem` and `px`

Feature	px	rem
Type	Fixed	Relative
Responsive	❌ No	✅ Yes
Based on	Screen pixels	Root font size
Accessibility	❌ Poor	✅ Better
Scaling	No	Yes

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

👉 Add these:

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

💡 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

Feature	CSS Variables	SCSS 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

💡 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)

Unit	Use Case
rem	Font sizes
%	Containers
vw/vh	Viewport-based elements
px	Borders & 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.

What is accent-color ?

What is px in CSS?

Example

What is rem in CSS?

Example

How rem Works

Key Differences Between rem and px

Why rem is Preferred in Modern CSS

🔹 1. Better Responsiveness

🔹 2. Accessibility Support

🔹 3. Consistent Design

When to Use px

Example

When to Use rem

Example

Real-World Example

❌ Using px (Not Flexible)

✅ Using rem (Flexible)

Common Mistakes

❌ Mixing units randomly

❌ Setting root font size incorrectly

rem vs em (Quick Note)

Best Practice

Real-World Use Cases

Interview Tip

🏁 Final Summary

Related Articles

What Are CSS Variables?

Basic Example

Why Do We Need CSS Variables?

Example Without Variables

With CSS Variables

How CSS Variables Work

🔹 Defining Variables

🔹 Using Variables

Scope of CSS Variables

🔹 Global Scope

🔹 Local Scope

Updating Variables Dynamically

Real-World Use Case: Theme Switching

Light Theme

Dark Theme

Usage

Fallback Values (Very Important)

Advanced Example

🆚 CSS Variables vs SCSS Variables

Best Practices

Where CSS Variables Are Used

Interview Tip

🏁 Final Summary

Related Articles

What Is Responsive Design?

Why Responsive Design Is Necessary

1️⃣ Users Use Multiple Devices

2️⃣ Google Uses Mobile-First Indexing

3️⃣ Accessibility & Inclusion

Core Responsive Design Standards to Follow

1️⃣ Mobile-First Design

2️⃣ Use Fluid Layouts (Not Fixed Widths)

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

4️⃣ Breakpoints Based on Content, Not Devices

5️⃣ Responsive Images

6️⃣ Touch-Friendly Design

7️⃣ Typography Responsiveness

Key Concepts You Must Understand

🔹 Media Queries

🔹 Flexbox & Grid

🔹 Viewport Meta Tag

When You Should NOT Use Responsive Design

❌ Avoid or rethink if:

Common Mistakes to Avoid

Performance Is Part of Responsiveness

Final Checklist (Use This)

Final Thought

What is `px` in CSS?

What is `rem` in CSS?

How `rem` Works

Key Differences Between `rem` and `px`

Why `rem` is Preferred in Modern CSS

When to Use `px`

When to Use `rem`

❌ Using `px` (Not Flexible)

✅ Using `rem` (Flexible)