HTML Interview Guide by CodeHype
Contents
1. Introduction to CSS
2. CSS Fundamentals
3. Selectors, Specificity & Cascade
4. CSS Box Model
5. Layouts: Flexbox & Grid
6. Positioning in CSS
7. Responsive Design & Media Queries
8. Styling: Colors, Units, Variables
9. Animations & Transitions
10. Pseudo-classes, Pseudo-elements, and
Advanced Selectors
11. Advanced CSS: Preprocessors, Methodologies,
Architecture
12. Accessibility and Internationalization
13. Modern CSS
2
www.codehype.in
HTML Interview Guide by CodeHype
Introduction to CSS
1. What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language that
describes the presentation of HTML or XML documents. With CSS,
designers control layout, color, fonts, spacing, and even
animations.
CSS is a powerful styling language used to control the
appearance, layout, and behavior of HTML elements on a web
page. CSS separates content from presentation, making it
easier to maintain and scale websites.
The frontend trifecta:
• HTML: Defines the structure of a webpage.
• CSS: Adds design and layout aesthetics.
• JavaScript: Brings interactivity and dynamic content.
Example:
3
www.codehype.in
HTML Interview Guide by CodeHype
2. How does CSS work with HTML & JavaScript?
HTML forms the structure, CSS defines styling, and JavaScript
adds interactivity. CSS can be applied through inline styles,
internal <style> blocks, or external .css files. JavaScript can
dynamically manipulate CSS by changing classes, style
attributes, or even managing entire stylesheets.
CSS is no longer just about styling — it’s about crafting adaptive,
accessible, and lightning-fast user experiences..
3. Describe three ways to include CSS in a web page?
• Inline: <h1 style="color:red;">Title</h1>
• Internal: Placing CSS in a <style> block within <head>.
• External: Linking with <link rel="stylesheet" href="styles.css">.
Interview Tip: Always define a clear CSS reset or use a modern CSS reset
library. It ensures consistent styling across browsers by neutralizing default
styles.
Introduction to CSS
Basic Syntax
4
www.codehype.in
HTML Interview Guide by CodeHype
Example:
CSS Comments
Wrap comments in /* ... */
Selectors, Specificity & Cascade
1. Types of CSS Selectors
CSS selectors are powerful tools that let you target HTML
elements:
• Universal selector: * selects all elements.
• Type selector: Targets elements by tag (e.g., p, ul).
• Class selector: .classname for reusable styling.
• ID selector: #idname for unique elements.
5
www.codehype.in
HTML Interview Guide by CodeHype
• Attribute selector: [type="text"] targets based on attribute
value.
• Pseudo-classes: :hover, :nth-child(2), :focus, etc.
• Pseudo-elements: ::before, ::after, used to insert content.
2. Specificity
Specificity determines which CSS rule takes precedence when
conflicts arise.
Hierarchy:
• Inline styles: 1000
• ID selectors: 0100
• Classes, attributes, pseudo-classes: 0010
• Elements and pseudo-elements: 0001
Interview Tip: Never overuse !important; instead, manage specificity
properly.
3. Inheritance
Some properties automatically inherit (e.g., color, font-family),
while others (e.g., margin, padding) do not.
Use inherit, initial, and unset to control inheritance behavior.
6
www.codehype.in
HTML Interview Guide by CodeHype
The Box Model & Display Types
1. CSS Box Model
Everything in CSS is a box. The box model consists of:
• Content: The actual text/image.
• Padding: Space between content and border.
• Border: Wraps the padding and content.
• Margin: Outer spacing between elements.
Use box-sizing: border-box; to make layouts predictable by
including padding and border in the total width/height.
Interview Insight (2025): Companies are prioritizing web accessibility and
semantic markup to meet legal standards (e.g., WCAG) and build inclusive
products.
2. Display Types
Display determines how elements appear in layout:
• block: Starts on a new line, full width.
• inline: Flows with text.
7
www.codehype.in
HTML Interview Guide by CodeHype
• inline-block: Like inline, but supports width/height.
• none: Removes the element from flow.
• flex, grid, table: For layout control.
Debugging Tip: Use browser DevTools to toggle display properties live.
Positioning, Flexbox & Grid
1. CSS Position Property
Controls how elements are positioned in the document:
• static: Default flow.
• relative: Positioned relative to its normal position.
• absolute: Positioned relative to nearest positioned ancestor.
• fixed: Anchored to viewport.
• sticky: Mix of relative and fixed.
2. Flexbox
Flexbox is a 1D layout model ideal for components like navbars
or form rows. It arranges items in a row or column with flexible
sizing.
8
www.codehype.in
HTML Interview Guide by CodeHype
Key Properties of Flexbox
1. flex-direction
2. justify-content
3. align-items
4. gap (add space between items)
5. flex-wrap
3. Grid
CSS Grid is a 2D layout model suitable for entire page sections. It
arranges rows and columns together.
Q1. When is Flexbox preferred over Grid?
Flexbox is ideal for one-dimensional layouts (row/column). Grid
is better for complex layouts with both rows and columns.
Q2. How do you vertically center elements with Flexbox?
Set align-items: center; on the flex container.
9
www.codehype.in
HTML Interview Guide by CodeHype
Positioning in CSS
CSS positioning lets you control exactly where elements appear
within the document flow.
Types of Positioning
• Static Positioning: Default for all elements. Items are
positioned as they appear in the normal document flow.
• Relative Positioning: Moves an element relative to its
normal position, without removing it from the document
flow.
• Fixed Positioning: Positions the element relative to the
browser window (viewport). Stays in place when scrolling.
10
www.codehype.in
HTML Interview Guide by CodeHype
• Absolute Positioning: Removes the element from the
normal flow and positions it relative to the nearest
positioned ancestor (one with position:
relative/absolute/fixed/sticky). If none exists, it's positioned
relative to the <html> element.
• Sticky Positioning: Switches between relative and fixed
depending on the scroll position. Useful for sticky menus or
headers.
Stacking Context and z-index
z-index controls layer order (only applies to positioned
elements).
11
www.codehype.in
HTML Interview Guide by CodeHype
Responsive Design & Media Queries
Responsive web design means your site looks good on all
devices like mobile, tablet, desktop by adjusting layout and
styling based on screen size or capabilities.
1. The Viewport Meta Tag
Always include this in your <head> on responsive sites:
2. Media Queries
Media queries adapt your design for different screen sizes.
Use multiple breakpoints (576px, 768px, 992px, 1200px) for
mobile, tablet, and desktop.
12
www.codehype.in
HTML Interview Guide by CodeHype
Example:
3. Fluid Grids and Responsive Units
Use %, vw, or rem instead of always using px.
Responsive images: use max-width: 100% on images to prevent
them from overflowing their container.
4. How do you approach building a fully responsive web page?
Start with a mobile-first approach using fluid layouts and
scalable units, then layer on breakpoints using media queries
for tablets and desktops. Test across multiple devices and
aspect ratios.
13
www.codehype.in
HTML Interview Guide by CodeHype
5. How can you create a hamburger menu with only CSS?
Show/hide navigation using a combination of checkboxes or
hidden inputs for toggling visibility, or with the :target pseudo-
class, styled and positioned using media queries.
Colors, Typography & Design Tokens
1. Color Models
• HEX: Compact and common (#ffffff)
• RGB: rgb(255, 255, 255)
• RGBA: Adds opacity
• HSL: Hue-Saturation-Light (hsl(120, 100%, 50%))
2. Typography
Typography plays a big role in UI design.
• Use line-height for readability.
• Set font-weight with values like 400, 700.
• @font-face or Google Fonts for custom typefaces.
3. Units
• px: Fixed pixels
• em/rem: Relative to font-size
• %: Percent of parent
• vw/vh: Viewport width/height
• fr: In grid layouts, represents a fraction of available space
14
www.codehype.in
HTML Interview Guide by CodeHype
4. CSS Variables (Custom Properties)
Define once, use everywhere for consistency and
maintainability.
Q1. What are the benefits of using rem over em?
rem is always relative to the root (html) element, ensuring
consistent scaling regardless of nested contexts, making it
easier to maintain global sizing relationships.
Animations & Transitions
CSS supports smooth stylistic transitions and custom
animations, enabling interactive and engaging UI.
1. CSS Transitions
Allows property changes to occur smoothly over a specified
duration.
15
www.codehype.in
HTML Interview Guide by CodeHype
Example:
Not all CSS properties are animatable. Good choices include color, opacity,
transform, etc.
2. CSS Animations with Keyframes
Define reusable animation sequences using @keyframes.
3. Transformations
Manipulate the rendering of elements using scale(), rotate(),
translate().
16
www.codehype.in
HTML Interview Guide by CodeHype
4. How can you create fade-in and fade-out effects with CSS
only?
Use transitions on the opacity property and toggle visibility with
a class or state.
5. What’s the difference between CSS transitions and
animations?
Transitions animate changes from one state to another on
property changes (e.g., on hover), while animations can run
automatically using keyframes, and support complex
sequences and loops.
6. Pseudo-classes
Interact with elements based on their state or position.
17
www.codehype.in
HTML Interview Guide by CodeHype
• :hover – when mouse is over
• :active – when element is activated (clicked)
• :focus – when element is focused (input, button)
• :nth-child(n) – select nth element
• :not(selector) – all elements not matching selector
Example:
7. Pseudo-elements
Style part of an element:
• ::before – insert content before
• ::after – insert content after
• ::first-line, ::first-letter
Example:
18
www.codehype.in
HTML Interview Guide by CodeHype
8. Advanced Selectors
• [data-type="warning"] – attribute selector.
• .nav > li:first-child – direct children.
• div ~ p – select all siblings.
9. How does :nth-child(2n+1) work?
It selects all odd-numbered children (1st, 3rd, 5th, etc.) of a
parent element.
Accessibility and Internationalization
1. What is accessibility in web design, and how does CSS
support it?
Accessibility in web design refers to making websites usable for
everyone, including people with disabilities (visual, auditory,
motor, or cognitive impairments). CSS supports accessibility by
enabling:
• Consistent and readable layout using relative units (like em,
rem) and proper contrast.
• Focus indication using :focus, :focus-visible for keyboard
navigation.
• Responsive design that adapts to screen readers, zooming,
and screen sizes.
• Avoiding content hidden with display: none or visibility:
hidden, as they may not be announced by screen readers.
19
www.codehype.in
HTML Interview Guide by CodeHype
Example:
2. How can color contrast be handled in CSS for accessibility?
Good color contrast ensures that text is readable against its
background, especially for users with low vision or color
blindness. The WCAG (Web Content Accessibility Guidelines)
recommend:
• Minimum contrast ratio of 4.5:1 for normal text.
• Use tools like WebAIM Contrast Checker to test contrast.
• Avoid using color as the only means of conveying
information.
Example:
3. What is internationalization in CSS, and how is it
implemented?
Internationalization (i18n) means designing websites that
support multiple languages and cultural settings. CSS helps
implement this by:
20
www.codehype.in
HTML Interview Guide by CodeHype
Supporting text direction with direction: rtl for right-to-left
languages like Arabic or Hebrew.
Using unicode-bidi: bidi-override in combination with direction
to correctly display bidirectional text.
Avoiding fixed-width designs and using flexible units for
content that may expand or shrink in different languages.
Example:
4. How does :lang() pseudo-class help with internationalization
The :lang() pseudo-class applies styles based on the language
attribute in the HTML.
Use case: Different fonts, spacing, or alignments for different
languages.
Example:
21
www.codehype.in
HTML Interview Guide by CodeHype
5. How do responsive design and accessibility work together in
CSS?
Responsive design ensures that layouts work on all screen
sizes. Combined with accessibility:
• Use media queries to adapt layouts for screen readers and
magnifiers.
• Maintain keyboard and touch-friendly navigation.
• Avoid using hover-only actions (e.g., menus) without
alternatives for keyboard users.
Example:
Modern CSS Features
Modern CSS is evolving rapidly with powerful features that
improve responsiveness, maintainability, and performance.
1. CSS Custom Properties (Variables)
Custom properties enable reusable and dynamic styling:
22
www.codehype.in
HTML Interview Guide by CodeHype
• They cascade and can be scoped to elements.
• Enable theming (light/dark modes).
• Work well with JavaScript for dynamic updates.
Pro Tip: Use custom properties in design systems for maintainable and
consistent styling.
2. clamp(), min(), and max()
Responsive sizing without media queries:
• clamp(min, preferred, max) lets you define dynamic yet
bounded values.
• min() and max() ensure sizes remain responsive and
adaptable.
23
www.codehype.in
HTML Interview Guide by CodeHype
Use Case: Perfect for fluid typography and spacing without multiple
breakpoints.
3. Container Queries
Target element styles based on their container size:
• Requires container-type to be defined.
• Unlike media queries, container queries make components
context-aware.
4. Logical Properties
Replace directional properties with context-aware equivalents:
• margin-inline, padding-block, border-start, etc.
• Adapts to writing modes (LTR, RTL, vertical)
24
www.codehype.in
HTML Interview Guide by CodeHype
This Improves localization and layout in multilingual
applications.
5. Advanced Selectors
• :is(): Groups selectors to reduce repetition
• :where(): Like :is() but with 0 specificity
• :has(): Parent selector that reacts to child content
These enhance readability and reduce duplication, but may
need fallbacks for older browsers.
Disclaimer & Copyright Notice
This eBook is provided free of cost for educational purposes only. You are
welcome to share it with others only in its original, unmodified format.
Editing, rebranding, or removing the credits of CodeHype, or adding your
own credits, is strictly prohibited.
This content is copyright © CodeHype. All rights reserved.
Download 100+ FREE Ebooks from www.codehype.in
25
www.codehype.in
