CSS Pseudo-elements, Media Queries & Responsive Design

Day 7 - CSS - Pseudo-elements, Media Queries & Responsive Design

Niotechone Marketing Team
November 22, 2025
11:30 am

Introduction

Welcome to Day 7 of your CSS Learning Experience! Today’s tutorial will highlight one of the most exciting and practical aspects of modern web development, Responsive Design.

Have you ever wondered how all of these websites are so magically responsive and look perfect on your phone, tablet, and computer? It’s all because of responsive design! In this tutorial, you’d build a beautiful responsive Profile Card that is interactive and looks great on every screen.

Why should students and beginners care about Responsive Design?

Real-world skills: Over half of web traffic in 2023 was from mobile devices. Employers expect developers to build responsive websites.
It improves user experience: Your pages would look great on devices from tiny phones to large desktop monitors.
It’s professional: Media queries and pseudo-elements give your projects extra polish and show that you know modern CSS.

In the end, you would know how to use media queries to create a mobile first page and add polish and sophistication with pseudo-elements.

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

First, let’s establish the basic structure of our project using valid HTML:

🌐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Profile Card</title>
  <link rel="stylesheet" href="day7.css">
</head>
<body>
  <form>
    <label for="fileupload">upload file</label>
    <input type="file" id="fileupload"/>
  </form><br>
  
  <div class="card">
    <h2>NioTechone🎀</h2>
    <p>Frontend Developer</p>
  </div>
</body>
</html>

What’s going on here?

<meta name=”viewport”>: This is the most important line when it comes to responsive design! It tells mobile browsers that you want to use your css and not automatically scale the display. Without this, media queries won’t work right on phones.
- width=device-width makes the width of the page the same width as the device screen.
- initial-scale=1 just sets the initial zoom level of the page to 100%.
Form element: We have used a very simple file upload form to demonstrate responsive design on the multiple elements.
Card div: This is our primary profile card that we will style using responsive to different screen resolutions.

Pro Tip: Always make sure to add the viewport meta tag in the <head> section of any responsive website you build as the first rule of mobile-friendly design!

Step 2: CSS Reset and Base Styles

Next, we will begin our CSS with a reset using the universal selector:

🎨

* { margin: 0; padding: 0; box-sizing: border-box; }

Why do we need this?

* (universal selector): This will select all elements on the page
margin: 0; padding: 0;: This resets the default margin & padding that browsers automatically add. Different browsers have a different default so this will ensure consistency.

box-sizing: border-box;: This is a total game changer! This simplifies calculating widths because lengths and widths include padding and borders in the overall width of an element when this property is applied. Without it, an addition of padding would expand the size of your elements in comparison to what you set the width for.

Note: Think of box-sizing: border-box like packing a suitcase. With this property, the suitcase stays the same size, even when you pack clothes (padding) inside!

Step 3: Styling the Body with Modern Gradients

Now let’s create a stunning background and center our content

🎨

body {
  font-family: 'Poppins', Arial, sans-serif;
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
  padding: 20px;
}

Breaking it down:

font-family: ‘Poppins’: Uses a modern, clean font (Poppins), and falls back to Arial if Poppins is not available.
background: linear-gradient(135deg, #a8edea, #fed6e3): Creates a beautiful diagonal gradient from cyan to pink
- 135deg is the angle (diagonal from top-left to bottom-right).
min-height: 100vh: Makes the body at least 100% of the viewport height (vh = viewport height).
Flexbox properties: Center everything horizontally and vertically.
- flex-direction: column to stack items vertically.
- align-items: center to center horizontally.
- justify-content: center to center vertically.
padding: 20px: Provide breathing room on all sides.

Pro Tip: Using vh (viewport height) and vw (viewport width) units makes your design truly responsive. 100vh is always going to equal the full height of the screen, regardless if it is a phone or a 4K monitor!

Step 4: Creating a Beautiful File Upload Form

Let’s style the form, so even a basic file input looks polished:

🎨

form {
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  text-align: center;
}

label {
  font-weight: 600;
  color: #444;
  margin-right: 10px;
}

input[type="file"] {
  padding: 8px;
  font-size: 1rem;
  border: 2px solid #2575fc;
  border-radius: 8px;
  background-color: #f0f4ff;
  cursor: pointer;
  transition: 0.3s ease;
}

input[type="file"]:hover {
  background-color: #e0e7ff;
  border-color: #6a11cb;
}

Breaking it down:

box-shadow: Creates a subtle shadow for dimension, the syntax is: horizontal vertical blur color
- rgba(0, 0, 0, 0.1) = black with 10% opacity (very light shadow)
border-radius: 12px: Rounded corners for a modern look
input[type=”file”]: An attribute selector that targets only file inputs.

:hover pseudo-class: This occurs when you place your mouse over the input
transition: 0.3s ease: Animates any changes smoothly over 0.3 seconds
cursor: pointer: Changes the cursor to a hand pointer that indicates it is clickable

Note: The :hover pseudo-class is different from pseudo-elements (::before, ::after). Pseudo-classes select an element in one specific state, while pseudo-elements create virtual elements.

Step 5: Building the Responsive Profile Card

Let’s start designing our primary profile card:

🎨

.card {
  background: #fff;
  border-radius: 15px;
  padding: 40px 60px;
  text-align: center;
  width: 300px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #ffffff, #f6f6f6);
}

.card h2 {
  font-size: 1.8rem;
  color: #6a11cb;
  margin-bottom: 8px;
}

.card p {
  font-size: 1.1rem;
  color: #555;
  font-weight: 500;
}

What makes this card special?

transform: translateY(-8px): Raises the card up 8 pixels on hover, creating it to look like it is “floating”
transition: all 0.3s ease: Smoothly performs ALL property changes (transform, shadow, background) and ease
Stronger shadow on hover: Changing from 0 4px 15px to 0 8px 20px for added dimension
Subtle gradient on hover: Adding some dimension for the background with a light light gray gradient
.card h2 & .card p: These are descendant selectors styling the elements within the card.

Pro Tip: Use rem rather than px for font sizing. 1rem is the root font size (generally speaking, 16px). So, rem units scale better for accessibility when a user alters their browser font size!

Step 6: Implementing Media Queries (The Responsive Magic!)

Now, here is where we make everything responsive to the viewport/resolution! This is the most important part of today’s topic:

🎨

@media (max-width: 600px) {
  form {
    width: 90%;
  }
  
  .card {
    width: 90%;
    padding: 30px 20px;
  }
  
  .card h2 {
    font-size: 1.5rem;
  }
  
  .card p {
    font-size: 1rem;
  }
}

Learning media queries:

@media: This is the css rule that opens up the door to responsiveness
(max-width: 600px): This is called the breakpoint, which means: “Style if the window is 600px wide or smaller”
Why 600px?: This is a commonly executed breakpoint to fit mobile devices as phones are usually always 320px-480px wide, so 600 px effectively covers most mobile devices.

What will happen in mobile:

The form and cards now occupy 90% of the width: On small screens, fixed pixel widths can feel tight. Switching to a percentage makes elements more flexible and adjustable to the screen size.
Padding is reduced: We changed from 40px 60px to 30px 20px to utilize valuable spacing on small screens.
Font sizes are decreased: Text shrinks slightly so that it fits better on mobile devices without the risk of line breaks.

Note: we refer to this method as mobile-first design when writing base styles for mobile devices and then using media queries for larger devices. Our example uses a desktop-first approach (base styles for desktop, and media query styles for mobile devices). Either approach is good practice, but mobile-first design is now considered best practice!

Common breakpoints you should know:

320px: small mobile phones
480px: larger mobile phones (landscape)
600: small tablets
768px: tablets (portrait)
1024px: tablets (landscape) and small laptops
1200px: desktops and larger displays

Code Explanation Sections

Section 1: The Power of Viewport Units

Throughout this project, we utilized viewport units (vh, vw):

🎨

body {
  min-height: 100vh;
  padding: 20px;
}

Here’s how viewport units are defined:

100vh = 100% of viewport height (the height of your browser window)
100vw = 100% of viewport width (the width of your browser window)
Viewport units automatically adjust when you either resize the browser or rotation of your device

Why do I find these units better than using percentages:

Percentages are relative to the parent element
Viewport units are always relative to the browser window

This makes them suitable to use for full page sections and spacing that is responsive

Section 2: The Transition Property (Smooth Animations)

We used transitions throughout project:

🎨

.card {
  transition: all 0.3s ease;
}

Here is a breakdown of the syntax:

all: Animate all properties that change (transform, shadow, background, etc.)
0.3s: Duration (300 milliseconds)
ease: Timing function (starts out slow, speeds up then slows at end)

Here are some others you could use:

linear: Constant speed
ease-in: Starts slow
ease-out: Ends slow
ease-in-out: Slow start and end

Pro Tip: Don’t animate all properties on production code! Less performant. Instead, be specific about what you are animating. For example: transition: transform 0.3s ease, box-shadow 0.3s ease;

Section 3: Box Shadow for Depth

We created depth using box-shadow:

🎨

.card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
```

**Box-shadow syntax:**
```
box-shadow: [horizontal] [vertical] [blur] [spread] [color];

Horizontal offset (0): No shadow on the left/right
Vertical offset (4px): Shadow goes down 4px
Blur radius (15px): How soft the shadow is
Spread (optional, not used here): Makes the shadow bigger or smaller
Color: rgba(0, 0, 0, 0.15) = Black shaved to 15% opacity

How to create realistic shadows:

Small offset + large blur = object lifted off surface (like our card)
Large offset + small blur = light source from the side
Multiple box-shadows = hyper-realistic depth

Section 4: Pseudo-elements (::before and ::after)

Although we are not using pseudo-elements in our project, they are included as part of the topic today. Here is how you could embed begins:

🎨

.card h2::before {
  content: "👤 ";
}

.card h2::after {
  content: " ✨";
}

What are pseudo-elements?

::before and ::after allow you to create a virtual element,
which appears to be before or after the element’s original content.
You must use the content property (even empty: content: “”)
It’s great to use pseudo-elements if you have a decorative element to add without the need to clutter up the HTML.

Common uses for this are:

Icons or decorative text.
Shapes (triangles, ribbons, etc.)
Clearfix hacks.
Loading spinners.
Quotation marks in blockquotes.

Tables of Key Concepts

1. Components / Keywords Used

Name	Description
@media	CSS rule that applies styles based on device characteristics (screen size, orientation, etc.)
max-width	Media query condition that triggers when viewport is at or below specified width
min-height	Sets the minimum height; element can grow taller but never shorter than this value
viewport meta tag	HTML tag that controls how mobile browsers display the page
box-sizing	Controls how width/height calculations include padding and borders
linear-gradient()	Creates smooth color transitions across an element
translateY()	Moves an element vertically without affecting document flow
transition	Smoothly animates property changes over a specified duration
box-shadow	Creates shadow effects to add depth and elevation
:hover	Pseudo-class that applies styles when user hovers over element
rem	Relative unit based on root font size (more accessible than px)
vh (viewport height)	Unit equal to 1% of viewport height (100vh = full screen height)
rgba()	Color function with red, green, blue, and alpha (opacity) values

2. Key Properties / Parameters / Features

Name	Description
width: device-width	Makes viewport width match device screen width (critical for mobile)
initial-scale=1	Sets initial zoom level to 100% on mobile devices
border-radius	Rounds corners of elements; higher values = rounder corners
padding	Inner spacing between content and border
margin	Outer spacing between element and neighbors
flex-direction: column	Stacks flex items vertically instead of horizontally
align-items: center	Centers flex items along cross axis (horizontally in columns)
justify-content: center	Centers flex items along main axis (vertically in columns)
font-weight	Controls text boldness (300=light, 400=normal, 600=semi-bold, 700=bold)
cursor: pointer	Changes mouse cursor to hand icon indicating clickability
text-align: center	Centers text and inline elements horizontally
background	Sets background color, image, or gradient
transform	Applies 2D or 3D transformations (translate, rotate, scale, skew)
Breakpoint (600px)	Screen width threshold where layout changes for mobile devices

Useful References

Here are some great ways to help you learn about responsive design and CSS:

Official Documentation:

MDN Web Docs – Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
MDN – Responsive Design: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
MDN – Pseudo-elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Learning Platforms:

W3Schools – Responsive Web Design: https://www.w3schools.com/css/css_rwd_intro.asp
W3Schools – Media Queries: https://www.w3schools.com/css/css3_mediaqueries.asp
CSS-Tricks – A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Practice Platforms:

Frontend Mentor: https://www.frontendmentor.io/ – Real-world responsive design challenges
Responsive Design Checker: https://responsivedesignchecker.com/ – Test your designs on different devices
CodePen: https://codepen.io/ – Experiment with code and see results instantly

Tools & Generators:

Gradient Generator: https://cssgradient.io/
Box Shadow Generator: https://cssmatic.com/box-shadow
Google Fonts: https://fonts.google.com/ – Free web fonts like Poppins

Video Tutorials:

Kevin Powell (YouTube): One of the best CSS educators online
Traversy Media (YouTube): Excellent responsive design tutorials
freeCodeCamp: https://www.freecodecamp.org/learn/2022/responsive-web-design/

Source code:

https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/CSS-Fundamentals/Day%207%20-%20CSS%20-%20Pseudo-elements%2C%20Media%20Queries%20%26%20Responsive%20Design

Summary – What You Learned

Day 7 taught you how to make websites fully responsive using media queries, viewport units, and pseudo-elements. You built a responsive profile card that adjusts for mobile screens, added hover effects, and learned how :: before, :: after, and breakpoints make layouts modern and mobile-friendly.

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What are pseudo-elements in CSS?

CSS pseudo-elements allow you to style interior portions of an element such as the first line, first letter, before and after content. The following are pseudo-elements:

::before
::after
::first-letter
::first-line

How are pseudo-elements different from pseudo-classes?

Pseudo-classes are used to style some state of an element (e.g., :hover, :focus).
Pseudo-elements style covering a portion of an element (e.g., ::before, ::after).

Can pseudo-elements have real HTML content?

No, Pseudo-elements can only be used to insert text, emoji, or generated content using the content: property, not real HTML tags.

Why are media queries important for responsive design?

Media queries allow websites to cater to different screen sizes so that your layout looks great on a laptop, tablet, or smartphone.

What is responsive design?

Responsive design is a method of making pages in a way that the layout, font sizes, and content adjust automatically to any device screen, enhancing usability and UX.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Day 7 - CSS - Pseudo-elements, Media Queries & Responsive Design

Table of Contents

Introduction

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

Step 2: CSS Reset and Base Styles

Step 3: Styling the Body with Modern Gradients

Step 4: Creating a Beautiful File Upload Form

Step 5: Building the Responsive Profile Card

Step 6: Implementing Media Queries (The Responsive Magic!)

Code Explanation Sections

Section 1: The Power of Viewport Units

Section 2: The Transition Property (Smooth Animations)

Section 3: Box Shadow for Depth

Section 4: Pseudo-elements (::before and ::after)

Tables of Key Concepts

Useful References

Summary – What You Learned

Output

Categories

Related Articles

Day 8 – CSS Variables (Custom Properties) and CSS Functions

Day 6 – CSS – CSS Grid, Transitions and Animations

Day 5 – CSS – Positioning and Flexbox

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales

Contact For Careers