What is the Viewport?
The viewport is the visible area of a web page inside the browser window.
It changes depending on:
- screen size
- device (mobile, tablet, desktop)
- zoom level
📌 Why is the viewport important?
For responsive design.
Common viewport meta tag (used in every modern website):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
✔ What this does?
width=device-width→ match screen sizeinitial-scale=1.0→ no zoom by default
✔ Ensures the website looks correct on mobile
✔ Prevents shrinking/stretched UI
🧠 In short:
The viewport is the visible area of the web page. The viewport meta tag ensures proper responsive behavior on different devices.
What are Selectors in CSS?
Selectors are patterns used to select HTML elements you want to style.
📌 Types of Selectors:
🔹 1. Element Selector
p { color: blue; }
🔹 2. Class Selector
.title { font-size: 20px; }
🔹 3. ID Selector
#header { background: black; }
🔹 4. Attribute Selector
input[type="text"] { border: 1px solid red; }
🔹 5. Descendant Selector
div p { color: green; }
🔹 6. Child Selector
div > p { color: purple; }
🔹 7. Pseudo-Class Selector
a:hover { color: red; }
🔹 8. Pseudo-Element Selector
p::first-line { font-weight: bold; }
🔹 9. Universal Selector
* { margin: 0; }
🎯 Short Interview Answer
Viewport:
The viewport is the visible area of the web page in the browser. The
<meta name="viewport">tag makes layouts responsive across devices.
Selectors:
Selectors in CSS are used to target HTML elements for styling. Examples include element, class, ID, attribute, pseudo-class, and pseudo-element selectors.
