🚀 Web Development Interview Questions with Answers — Part 2: CSS

🧠 21. What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style and design HTML elements.

CSS helps to:
• Add colors
• Set fonts
• Create layouts
• Add animations
• Make websites responsive

Example:

h1 {
   color: blue;
   font-size: 40px;
}

🧠 22. Difference Between Inline, Internal, and External CSS
Type : Description
Inline CSS : Written inside HTML element
Internal CSS : Written inside <style> tag
External CSS : Written in separate .css file

Inline CSS:

<h1 style="color:red;">Hello</h1>

Internal CSS:

<style>
h1 {
   color: blue;
}
</style>

External CSS:

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

🧠 23. What is Specificity in CSS?
Specificity determines which CSS rule is applied when multiple rules target the same element.

Priority Order:
1. Inline CSS
2. ID Selector
3. Class Selector
4. Element Selector

Example:

#title {
   color: red;
}

.heading {
   color: blue;
}

ID selector has higher priority.

🧠 24. Explain CSS Box Model
Every HTML element is treated as a box.

The box model contains:
• Content
• Padding
• Border
• Margin

Structure:

Margin
 └ Border
    └ Padding
       └ Content

Example:

div {
   padding: 20px;
   border: 2px solid black;
   margin: 10px;
}

🧠 25. Difference Between Margin and Padding
Margin : Space outside border
Creates gap between elements

Padding : Space inside border
Creates inner spacing

Example:

div {
   margin: 20px;
   padding: 20px;
}

🧠 26. What is Flexbox?
Flexbox is a one-dimensional layout system used for alignment and spacing.

Benefits:
✅ Easy alignment
✅ Responsive layouts
✅ Flexible spacing

Example:

.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

🧠 27. What is CSS Grid?
CSS Grid is a two-dimensional layout system.

It handles:
• Rows
• Columns

Example:

.container {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

🧠 28. Difference Between Relative, Absolute, Fixed, and Sticky Positioning
Position : Description
relative : Positioned relative to itself
absolute : Positioned relative to parent
fixed : Fixed on screen
sticky : Sticks during scrolling

Example:

div {
   position: absolute;
   top: 20px;
}

🧠 29. What is z-index?
z-index controls stack order of elements.

Higher z-index appears on top.

Example:

.box {
   z-index: 10;
}

🧠 30. Difference Between em, rem, %, px, vh, and vw
Unit : Meaning
px : Fixed pixels
% : Relative percentage
em : Relative to parent
rem : Relative to root
vh : Viewport height
vw : Viewport width

Example:

h1 {
   font-size: 2rem;
}

🧠 31. What are Pseudo-Classes?
Pseudo-classes define special states of elements.

Examples:

a:hover {
   color: red;
}

Common Pseudo-Classes:
• :hover
• :focus
• :first-child
• :last-child

🧠 32. What are Pseudo-Elements?
Pseudo-elements style specific parts of elements.

Example:

p::first-letter {
   font-size: 40px;
}

Common Pseudo-Elements:
• ::before
• ::after
• ::first-letter

🧠 33. Difference Between visibility:hidden and display:none
visibility:hidden : Element hidden but space remains
display:none : Element removed completely

Example:

.box {
   display: none;
}

🧠 34. What is Media Query?
Media queries make websites responsive.

Example:

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

🧠 35. Explain Responsive Design
Responsive design ensures websites work on:
• Mobile
• Tablet
• Desktop

Techniques:
✅ Media Queries
✅ Flexible layouts
✅ Responsive images 

🧠 36. What is Mobile-First Design? 
Mobile-first design means designing for smaller screens first and then scaling upward. 

Benefits: 
✅ Better performance 
✅ Better UX on mobile devices