Definition

Pseudo-elements are used to style specific parts of an element or insert virtual content.

Common Pseudo-elements

• ::before → inserts content before element
• ::after → inserts content after element

Example

p::before {
  content: "Note: ";
  color: red;
}

p::after {
  content: " ✔";
}

Key Points

• Require content property
• Do not exist in HTML DOM
• Used for decoration and UI enhancements

Interview Insight

Useful for adding icons, labels, or styling without extra HTML.

12. Difference between :nth-child and :nth-of-type

:nth-child()

• Selects element based on position among all siblings

li:nth-child(2) {
  color: red;
}

:nth-of-type()

• Selects element based on position among same type elements

p:nth-of-type(2) {
  color: blue;
}

Comparison

Interview Insight

Use nth-of-type when mixed elements exist.

13. What is :not() selector?

Definition

:not() excludes elements that match a specific selector.

Example

div:not(.active) {
  opacity: 0.5;
}

Use Case

• Apply styles except certain elements

Interview Insight

Improves selector flexibility and reduces extra classes.

14. What is :is() selector?

Definition

:is() groups multiple selectors and applies the same styles.

Example

:is(h1, h2, h3) {
  color: blue;
}

Benefit

• Reduces repetition
• Cleaner code

Specificity

Takes specificity of the most specific selector inside

15. What is :where() selector?

Definition

:where() works like :is() but with zero specificity.

Example

:where(h1, h2, h3) {
  margin: 0;
}

Key Difference

Interview Insight

Useful for writing reusable low-priority styles.

16. What is :root?

Definition

:root represents the root element (html).

Example

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

Use Case

• Define CSS variables (custom properties)

Interview Insight

Preferred place for global variables.

17. How does selector specificity work?

Definition

Specificity determines which CSS rule is applied when multiple rules target the same element.

Priority Order

1. Inline styles
2. ID selectors
3. Class, attribute, pseudo-class
4. Element selectors

Example

#id { color: red; }
.class { color: blue; }

Result: red (ID wins)

18. How to calculate specificity?

Specificity Format

(inline, id, class, element)

Example

#header .nav li {
  color: red;
}

Calculation:

• ID → 1
• Class → 1
• Element → 1

Final: (0,1,1,1)

Another Example

p {
  color: blue;
}

Final: (0,0,0,1)

Interview Insight

Higher value wins. If equal → last rule wins.

19. What are grouped selectors?

Definition

Grouped selectors allow applying the same styles to multiple elements.

Syntax

h1, h2, h3 {
  color: red;
}

Benefit

• Reduces duplication
• Improves readability

20. What is chaining selectors?

Definition

Chaining selectors means combining multiple selectors without space to target elements that match all conditions.

Example

div.active {
  color: blue;
}

This targets:

• <div class="active">

More Example

button.primary.large {
  padding: 10px;
}

Difference from grouping

• Grouping → multiple selectors
• Chaining → multiple conditions on same element 

21. What is mobile-first design?

Definition

Mobile-first design is an approach where you design for smaller screens first, then progressively enhance for larger screens.

Key Idea

Start with minimal layout → add features as screen size increases.

Example

/* Base styles (mobile) */
.container {
  font-size: 14px;
}

/* Larger screens */
@media (min-width: 768px) {
  .container {
    font-size: 18px;
  }
}

Advantages

• Better performance
• Simpler design decisions
• Improved accessibility

Interview Insight

Mobile-first aligns with modern usage trends and responsive best practices.

22. What are breakpoints?

Definition

Breakpoints are specific screen widths where layout changes using media queries.

Common Breakpoints

• 480px → mobile
• 768px → tablet
• 1024px → desktop

Example

@media (max-width: 768px) {
  body {
    background: lightgray;
  }
}

Key Insight

Breakpoints should be based on content needs, not just devices.

23. What is min-width vs max-width?

min-width

Applies styles when screen is larger than a value.

@media (min-width: 768px) {
  /* styles for larger screens */
}

max-width

Applies styles when screen is smaller than a value.

@media (max-width: 768px) {
  /* styles for smaller screens */
}

Comparison

Interview Insight

Use min-width for scalable, mobile-first design.

24. What are viewport units (vh, vw)?

Definition

Viewport units are relative to the browser window size.

Units

• vw → 1% of viewport width
• vh → 1% of viewport height

Example

div {
  width: 50vw;
  height: 100vh;
}

Use Cases

• Full-screen sections
• Responsive sizing

Interview Insight

Useful for fluid layouts but must handle mobile browser UI issues carefully.

25. What is clamp() function?

Definition

clamp() defines a value within a minimum and maximum range.

Syntax

clamp(min, preferred, max)

Example

font-size: clamp(14px, 2vw, 24px);

Behavior

• Grows with viewport
• Never exceeds limits

Interview Insight

Ideal for responsive typography without media queries.

26. What are container queries?

Definition

Container queries apply styles based on the size of a parent container, not the viewport.

Example

.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .item {
    display: flex;
  }
}

Key Advantage

• Component-level responsiveness
• More modular than media queries

Interview Insight

Modern CSS feature improving reusable components.

27. Difference between adaptive and responsive design

Responsive Design

• Fluid layouts
• Adjust continuously

Adaptive Design

• Fixed layouts for specific screen sizes

Comparison

Interview Insight

Responsive is preferred in modern web development.

28. What is aspect-ratio property?

Definition

Maintains a consistent width-to-height ratio.

Syntax

div {
  aspect-ratio: 16 / 9;
}

Example

img {
  aspect-ratio: 1 / 1;
}

Use Cases

• Videos
• Images
• Cards

Interview Insight

Simplifies responsive media layouts.

29. How to create responsive images?

Methods

1. Using max-width

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

2. Using srcset

<img src="small.jpg"
     srcset="medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw">

3. Using picture element

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <img src="large.jpg" alt="">
</picture>

Interview Insight

Use srcset and picture for performance optimization.

30. What is object-fit?

Definition

Controls how images or videos fit inside containers.

Values

• cover
• contain
• fill
• none
• scale-down

Example

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Behavior

• cover → fills container (may crop)
• contain → fits without cropping

31. What are gradients in CSS?

Definition

Gradients in CSS are used to create smooth transitions between two or more colors without using images.

Types

• Linear gradient
• Radial gradient
• Conic gradient

Example

div {
  background: linear-gradient(red, blue);
}

Advantages

• No need for image assets
• Lightweight and scalable
• Easily customizable

Interview Insight

Gradients improve performance and visual design compared to images.

32. What is linear-gradient?

Definition

Creates a gradient along a straight line.

Syntax

background: linear-gradient(direction, color1, color2);

Example

div {
  background: linear-gradient(to right, red, blue);
}

Advanced Example

background: linear-gradient(45deg, red, yellow, green);

Key Points

• Direction can be angle or keywords
• Supports multiple color stops

33. What is radial-gradient?

Definition

Creates a gradient that radiates from a center point outward.

Syntax

background: radial-gradient(shape, color1, color2);

Example

div {
  background: radial-gradient(circle, red, blue);
}

Variants

• circle
• ellipse

Use Cases

• Background effects
• Spotlight or glow effects

34. What is box-shadow?

Definition

Adds shadow effects around an element’s box.

Syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;

Example

div {
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

Multiple Shadows

box-shadow: 0 0 5px black, 0 0 10px gray;

Use Cases

• Elevation effects
• Card UI design

35. What is text-shadow?

Definition

Applies shadow to text.

Syntax

text-shadow: offset-x offset-y blur-radius color;

Example

h1 {
  text-shadow: 2px 2px 5px gray;
}

Use Cases

• Improving readability
• Decorative typography

36. What is filter property?

Definition

Applies graphical effects to elements like images or videos.

Common Values

• blur()
• brightness()
• contrast()
• grayscale()
• sepia()

Example

img {
  filter: grayscale(100%);
}

Multiple Filters

filter: blur(5px) brightness(120%);

Interview Insight

Used for dynamic visual effects without editing images.

37. What is backdrop-filter?

Definition

Applies effects to the background behind an element.

Example

div {
  backdrop-filter: blur(10px);
}

Use Case

• Glassmorphism UI
• Frosted glass effect

Important Note

Requires transparency:

background: rgba(255, 255, 255, 0.2);

38. What is opacity vs rgba?

Opacity

• Applies transparency to the entire element including children

div {
  opacity: 0.5;
}

RGBA

• Applies transparency to color only

div {
  background: rgba(255, 0, 0, 0.5);
}

Comparison

Interview Insight

Use rgba when you don’t want to affect child elements.

39. What is clip-path?

Definition

Defines a clipping region to show only part of an element.

Example

div {
  clip-path: circle(50%);
}

Other Shapes

• circle()
• ellipse()
• polygon()

clip-path: polygon(0 0, 100% 0, 50% 100%);

Use Cases

• Custom shapes
• Creative UI designs

40. What is transform property?

Definition

Applies transformations like moving, rotating, scaling, or skewing elements.

Common Functions

• translate()
• rotate()
• scale()
• skew()

Example

div {
  transform: rotate(45deg);
}

Multiple Transforms

transform: translateX(50px) scale(1.2);

41. What is CSS transition?

Definition

A CSS transition allows you to smoothly change property values over a specified duration.

Syntax

transition: property duration timing-function delay;

Example

button {
  background: blue;
  transition: background 0.3s ease;
}

button:hover {
  background: red;
}

Key Points

• Triggered by state change (e.g., :hover)
• Works between two states

Interview Insight

Transitions are simple and ideal for UI interactions.

42. What is animation in CSS?

Definition

CSS animation allows elements to change styles over multiple keyframes automatically, without user interaction.

Example

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

div {
  animation: move 2s infinite;
}

Key Points

• Runs automatically
• Supports multiple steps

Interview Insight

Use animations for complex motion and sequences.

43. Difference between transition and animation

Interview Insight

Use transitions for simple effects, animations for advanced sequences.

44. What is @keyframes?

Definition

@keyframes defines the stages of an animation.

Syntax

@keyframes name {
  0% { }
  50% { }
  100% { }
}

Example

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

Key Points

• Defines animation timeline
• Uses percentages or keywords (from, to)

45. What are animation properties?

Common Properties

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Shorthand

animation: move 2s ease-in-out 1s infinite;

Interview Insight

Shorthand improves readability but understanding each property is important.

46. What is easing function?

Definition

Easing functions control the speed curve of animation or transition.

Common Values

• linear
• ease
• ease-in
• ease-out
• ease-in-out

Example

transition: all 0.5s ease-in-out;

Custom Function

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Interview Insight

Easing improves realism and user experience.

47. What is transform translate()?

Definition

translate() moves an element along X and/or Y axis.

Example

transform: translate(50px, 100px);

Variants

• translateX()
• translateY()

Key Point

Does not affect document flow.

48. What is scale() and rotate()?

scale()

• Changes size of element

transform: scale(1.5);

rotate()

• Rotates element

transform: rotate(45deg);

Combined Example

transform: scale(1.2) rotate(10deg);

Interview Insight

Transforms are GPU-accelerated and efficient.

49. What is 3D transform?

Definition

3D transforms allow manipulation of elements in three-dimensional space.

Common Functions

• translateZ()
• rotateX()
• rotateY()
• rotateZ()

Example

transform: rotateY(180deg);

Use Cases

• Card flip effects
• 3D UI interactions

50. What is perspective?

Definition

perspective defines how far an element is from the viewer, creating depth.

Example

.container {
  perspective: 1000px;
}

.box {
  transform: rotateY(45deg);
}

Key Points

• Smaller value → stronger 3D effect
• Applied to parent element 

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

/* Normalize keeps heading sizes instead of removing them */

.block {}
.block__element {}
.block--modifier {}

.card {}
.card__title {}
.card--highlight {}

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

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

:root {
  --variable-name: value;
}

div {
  color: var(--variable-name);
}

.container {
  --padding: 10px;
}

p { color: blue; }
p { color: red; }

body {
  color: blue;
}

css/
  base/
  components/
  layout/
  utilities/

@import url("styles.css");

<link rel="stylesheet" href="styles.css">