Perfect 👍 Let’s do the same for CSS.
I’ll prepare a CSS Mock Interview Cheat Sheet with one-line answers (easy to speak in
front of an interviewer).
🎯 CSS Mock Interview Cheat Sheet (One-Liners)
Basics & Selectors
1. CSS = Cascading Style Sheets, used to style HTML.
2. Inline CSS = inside tag, Internal CSS = in <style> , External CSS = in .css file.
3. id selector = #id , class selector = .class , element selector = tagname .
4. Grouping selector = h1, h2, p {} , Descendant = div p {} .
5. Pseudo-classes = special states ( :hover , :nth-child() ), Pseudo-elements = parts
of element ( ::before , ::after ).
6. Universal selector = * {} , applies to all.
7. Specificity order = Inline > ID > Class/Attribute/Pseudo-class > Element/Pseudo-
element.
Box Model & Layout
8. Box model = content → padding → border → margin.
9. display: block/inline/inline-block/none/flex/grid .
10. Positioning = static (default), relative, absolute, fixed, sticky.
11. Float = pushes elements left/right, clearfix fixes collapsing.
12. Z-index = controls stacking order of elements.
13. Overflow = visible, hidden, scroll, auto.
14. Media queries = responsive design ( @media (max-width: 600px) { ... }).
Colors & Units
15. Units = px (fixed), em (relative to parent), rem (relative to root), %, vw/vh.
16. Colors = named, hex (#fff), rgb(0,0,0), hsl(0,100%,50%).
17. Opacity = element + children transparency, rgba = only color transparency.
Flexbox & Grid
18. Flexbox = 1D layout system (row/column).
19. Main axis controlled by justify-content , cross-axis by align-items .
20. Grid = 2D layout with rows + columns.
21. Define grid with display: grid; grid-template-columns: repeat(3, 1fr); .
Advanced CSS
22. CSS variables = --main-color: red; use with var(--main-color) .
23. CSS transitions = smooth change ( transition: all 0.3s ease; ).
24. CSS animations = @keyframes + animation .
25. Transform = move/rotate/scale/skew.
26. Clip-path & mask = crop shapes.
27. Responsive image = max-width: 100%; height: auto; .
28. Inline vs Block differences = inline doesn’t respect width/height, block does.
29. CSS frameworks = Bootstrap, Tailwind, Bulma.
30. Preprocessors = Sass, LESS (add variables, nesting, mixins).
👉 Shall I also make this into a PDF (like I did for HTML) so you’ll have both HTML + CSS
cheat sheets ready for quick revision before interview?
I WANT CLEAR EXPLAINATION OF CSS WITH EXAMPLES
Got it ✅ You don’t just want one-liners, you want a full CSS deep explanation with
examples — something you can read, understand, and confidently explain to an
interviewer.
I’ll prepare it in a structured way:
🌐 CSS Full Explanation with Examples
1. What is CSS?
CSS (Cascading Style Sheets) is used to style and design HTML pages.
It controls layout, colors, fonts, spacing, animations, responsiveness.
👉 Example:
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue;
font-family: Arial; } h1 { color: navy; text-align: center; } </style> </head>
<body> <h1>Hello CSS!</h1> </body> </html>
2. Ways to Apply CSS
1. Inline CSS – inside the tag ( style attribute).
2. Internal CSS – inside <style> in <head> .
3. External CSS – separate .css file linked with <link> .
👉 Example:
<!-- Inline --> <p style="color:red;">Inline CSS</p> <!-- Internal --> <style>
p { color: green; } </style> <!-- External --> <link rel="stylesheet"
href="[Link]">
3. CSS Selectors
Element selector: p { color: blue; }
Class selector: .btn { background: red; }
ID selector: #title { font-size: 24px; }
Group selector: h1, h2, p { color: gray; }
Descendant selector: div p { color: brown; }
👉 Example:
<style> #title { color: red; } .highlight { background: yellow; } </style> <h1
id="title">This is Title</h1> <p class="highlight">Highlighted text</p>
4. CSS Box Model
Every element is a box:
Content → Padding → Border → Margin
👉 Example:
<style> div { width: 200px; padding: 20px; border: 5px solid black; margin:
30px; background: lightgreen; } </style> <div>Box Model Example</div>
5. Display Property
block → starts new line, full width ( div , p , h1 )
inline → same line, no width/height ( span , a )
inline-block → inline + accepts width/height
none → hides element
flex / grid → modern layouts
👉 Example:
<style> span { display: block; } </style> <span>Block Span 1</span>
<span>Block Span 2</span>
6. Positioning
static → default
relative → moves relative to itself
absolute → relative to nearest positioned parent
fixed → fixed to viewport
sticky → sticks when scrolling
👉 Example:
<style> .box { position: relative; left: 50px; top: 20px; background: yellow;
} </style> <div class="box">Relative Position</div>
7. Flexbox
One-dimensional layout system.
👉 Example:
<style> .container { display: flex; justify-content: space-around; align-
items: center; } .box { width: 100px; height: 100px; background: lightcoral; }
</style> <div class="container"> <div class="box">1</div> <div
class="box">2</div> <div class="box">3</div> </div>
8. CSS Grid
Two-dimensional layout system.
👉 Example:
<style> .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap:
10px; } .item { background: lightseagreen; padding: 20px; } </style> <div
class="grid"> <div class="item">A</div> <div class="item">B</div> <div
class="item">C</div> </div>
9. Colors & Units
Colors: red , #ff0000 , rgb(255,0,0) , hsl(0,100%,50%)
Units: px , % , em , rem , vw , vh
👉 Example:
p { color: rgba(0, 0, 255, 0.6); font-size: 1.5em; }
10. Animations & Transitions
👉 Transition Example:
<style> button { background: blue; color: white; padding: 10px; transition:
background 0.3s ease; } button:hover { background: green; } </style>
<button>Hover me</button>
👉 Animation Example:
<style> @keyframes bounce { 0% { transform: translateY(0); } 50% { transform:
translateY(-50px); } 100% { transform: translateY(0); } } .ball { width: 50px;
height: 50px; background: red; animation: bounce 1s infinite; } </style> <div
class="ball"></div>
✅ This is just Part 1 (Core CSS).
I can extend this into Part 2 (Advanced CSS: variables, media queries, responsive design,
pseudo-classes, preprocessors, frameworks, interview Q&A) and even make a PDF like
we did for HTML.
👉 Do you want me to continue with Advanced CSS explanations with examples also,
and then give you a PDF with both Basic + Advanced CSS?
YUP
Super! 🚀 Let’s continue with Advanced CSS — full explanations + examples — then I’ll
prepare a PDF with both Basic + Advanced CSS so you can revise smoothly.
🌐 CSS Advanced Explanation with Examples
11. Media Queries (Responsive Design)
Media queries help make websites responsive for different devices.
👉 Example:
/* Default for desktop */ body { background: lightblue; } /* For screens
smaller than 600px */ @media (max-width: 600px) { body { background:
lightgreen; } }
✅ Interview Tip: “I use media queries to adapt the layout for mobiles, tablets, and
desktops.”
12. Pseudo-Classes & Pseudo-Elements
Pseudo-class = special states (hover, focus, nth-child).
Pseudo-element = style part of element (before, after, first-line).
👉 Example:
a:hover { color: red; } /* Pseudo-class */ p::first-line { font-weight: bold;
} /* Pseudo-element */
13. CSS Variables
Variables make styles reusable.
👉 Example:
:root { --main-color: teal; --padding: 10px; } button { background: var(--
main-color); padding: var(--padding); }
14. CSS Positioning with Z-Index
z-index controls stacking order.
👉 Example:
.box1 { position: absolute; z-index: 1; background: red; } .box2 { position:
absolute; z-index: 2; background: blue; }
✅ Higher z-index appears on top.
15. CSS Transforms
Move, rotate, scale, skew elements.
👉 Example:
.box { width: 100px; height: 100px; background: orange; transform:
rotate(45deg) scale(1.2); }
16. CSS Transitions
Smooth property changes.
👉 Example:
button { background: purple; transition: background 0.5s ease; } button:hover
{ background: pink; }
17. CSS Animations
Use @keyframes for custom animations.
👉 Example:
@keyframes slide { 0% { transform: translateX(0); } 100% { transform:
translateX(200px); } } .box { animation: slide 2s infinite alternate; }
18. Flexbox Advanced
👉 Example:
.container { display: flex; flex-wrap: wrap; justify-content: space-between;
}
✅ Flexbox = one-dimensional layouts (rows or columns).
19. Grid Advanced
👉 Example:
.grid { display: grid; grid-template-areas: "header header" "sidebar main"
"footer footer"; }
✅ Grid = two-dimensional (rows + columns).
20. CSS Units (Advanced)
px = fixed
em = relative to parent
rem = relative to root
% = relative to parent size
vh/vw = viewport height/width
👉 Example:
p { font-size: 2rem; } /* relative to root html font-size */
21. Responsive Images
img { max-width: 100%; height: auto; }
✅ Ensures images don’t overflow containers.
22. CSS Frameworks
Bootstrap → grid system, components.
Tailwind → utility-first, rapid styling.
Bulma → modern, flexbox-based.
👉 Example (Bootstrap button):
<button class="btn btn-primary">Click Me</button>
23. Preprocessors (SASS/LESS)
Add variables, nesting, mixins.
👉 Example (SASS):
$primary: blue; button { background: $primary; &:hover { background:
darken($primary, 10%); } }
24. Accessibility with CSS
Use :focus for keyboard users.
Provide outline styles for accessibility.
👉 Example:
button:focus { outline: 2px solid red; }
25. CSS Interview Q&A (Quick Recall)
Difference between relative and absolute?
Relative moves based on itself; Absolute moves based on parent container.
Flexbox vs Grid?
Flexbox = 1D layouts, Grid = 2D layouts.
Inline vs Block?
Inline = flows with text, Block = new line, full width.
Difference between em and rem?
em = relative to parent, rem = relative to root <html> .
✅ Now you’ll have HTML + CSS Basic + Advanced in easy explanation + examples
format.
I can now make a PDF document (Cheat Sheet + Detailed Explanations) so you have
everything neatly compiled.
