back to course
Lesson 95 / 9699%· free preview
Exam Prep1/2
CSS Exam Questions
CSS theory, selectors, box-model, flex/grid, responsive design — frequent exam topics.
Overview
Most-asked CSS questions in BCA / B.Tech web technology exams.
1. Theory Questions
- What is CSS? Cascading Style Sheets — describes presentation (color, layout, fonts) of HTML.
- 3 ways to apply CSS?
- Inline —
style=""attribute - Internal —
<style>inside<head> - External — separate
.cssfile linked via<link>
- Inline —
- Why "cascading"? Multiple rules can apply; the cascade decides which wins via specificity + source order.
- What is specificity? Inline (1000) > ID (100) > class/attr/pseudo (10) > element (1). Higher number wins.
- What is the box model? Every element =
content + padding + border + margin. Usebox-sizing: border-boxto makewidthinclude padding+border.
2. Selectors (high-yield)
| Selector | Example | Matches |
|---|---|---|
| Type | p | All <p> |
| Class | .btn | class="btn" |
| ID | #hero | id="hero" |
| Descendant | nav a | <a> inside <nav> |
| Child | nav > a | direct child only |
| Pseudo-class | a:hover | on hover |
| Pseudo-element | p::first-line | first line of <p> |
3. Common Programs / WAP
- WAP a CSS rule that centers a div horizontally + vertically (use Flexbox).
- WAP to make a 3-column responsive grid.
- WAP to change link color on hover.
- WAP to apply CSS to alternate rows of a table (
tr:nth-child(even)).
4. Predict-the-output
cssp { color: red; } .note { color: blue; } #warn { color: green; }
html<p id="warn" class="note">?</p> <!-- green — ID wins -->
5. Flexbox / Grid (always asked)
- Flex container:
display: flex; justify-content: center; align-items: center; - Grid:
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; flex-wrapallows children to wrap to next line.
6. Responsive Design
- Media query syntax:
css@media (max-width: 768px) { .nav { display: none; } }
- Mobile-first approach — start with phone styles, add breakpoints upward.
7. Pro Tips
- Prefer classes over IDs for styling — keeps specificity low + reusable.
- Use CSS variables for themes:
:root { --primary: #facc15; }. !importantshould be a last resort (high marks for explaining specificity instead).
AI-powered recap
Quick recap quiz?
We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.
Ready to move on?
// example library
Want more hands-on snippets in CSS3?
Browse 1 runnable example · across 1 chapter · short, copy-paste-friendly · grouped by topic
// did you know?
One surprising fact before your next lesson
Bite-sized programming facts that make your next coffee-break explanation land.
// feedback.matters()
Did this lesson help you?