CSS Interview Preparation for Java Full Stack Developers

CSS Interview Preparation for Java Full Stack Developers

Overview

This document consolidates the complete CSS discussion for a Java Full Stack Developer interview preparation guide.

It covers:

• Basic CSS interview questions
• CSS box model
• Selectors
• Display types
• Positioning
• Flexbox
• Grid
• Responsive design
• CSS specificity
• Common CSS properties
• A complete single-file CSS/HTML cheat sheet
• Interview-ready answers

---

1. Basic CSS Interview Questions

1.1 What is CSS?

CSS (Cascading Style Sheets) is used to style HTML elements by controlling:

• Colors
• Fonts
• Spacing
• Layout
• Positioning
• Responsive behavior
• Animations
• Visual appearance

Example:

<p class="message">Hello CSS</p>

.message {
    color: blue;
    font-size: 20px;
}

---

1.2 What are the different ways to apply CSS?

There are three common approaches.

Inline CSS

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

Internal CSS

<style>
    p {
        color: red;
    }
</style>

External CSS

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

External CSS is generally preferred for maintainability and reuse.

---

1.3 What is the CSS Box Model?

Every HTML element can be understood as a box containing:

1. Content
2. Padding
3. Border
4. Margin

flowchart LR
    M[Margin] --> B[Border]
    B --> P[Padding]
    P --> C[Content]

Example:

.box {
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 3px solid black;
    margin: 20px;
}

---

1.4 Margin vs Padding

---

Margin Padding

---

Space outside the border Space inside the border

Separates an element from other Separates content from its border elements

Background does not extend into the Background extends into padding margin

Example:

.card {
    margin: 20px;
    padding: 20px;
}

---

1.5 display: none vs visibility: hidden

display: none

The element is removed from the layout.

.element {
    display: none;
}

visibility: hidden

The element is hidden, but its layout space remains.

.element {
    visibility: hidden;
}

---

1.6 ID vs Class

ID

#header {
    color: blue;
}

IDs are normally intended to identify a unique element.

Class

.button {
    background: blue;
}

Classes can be reused across multiple elements.

---

1.7 What is Flexbox?

Flexbox is a one-dimensional CSS layout system used to arrange items in a row or column.

Common properties:

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

---

1.8 Flexbox vs Grid

Flexbox Grid

---

One-dimensional Two-dimensional Row or column Rows and columns Great for component-level layouts Great for page-level layouts Content-oriented Layout-oriented

Example Flexbox:

.container {
    display: flex;
    gap: 20px;
}

Example Grid:

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

---

1.9 What is Responsive Design?

Responsive design allows a web application to adapt to different screen sizes.

Typical techniques include:

• Media queries
• Flexbox
• CSS Grid
• Relative units such as %, rem, em, vw, and vh
• Responsive images

Example:

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

---

1.10 What are Media Queries?

Media queries apply CSS conditionally based on device or viewport characteristics.

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

---

1.11 Position Values

The commonly discussed CSS position values are:

• static
• relative
• absolute
• fixed
• sticky

flowchart TD
    A[CSS position] --> B[static]
    A --> C[relative]
    A --> D[absolute]
    A --> E[fixed]
    A --> F[sticky]

---

1.12 Relative vs Absolute Position

position: relative

The element remains in the normal document flow.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

The element moves relative to its original position, but its original layout space is preserved.

position: absolute

The element is removed from the normal document flow.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 10px;
    right: 20px;
}

The absolutely positioned child is positioned relative to the nearest positioned ancestor.

If there is no positioned ancestor, the containing block is generally established by the initial containing block/viewport.

Interview answer

position: relative keeps the element in the normal document flow. Offsets such as top and left move it relative to its original position, while its original space remains reserved. It is also commonly used to establish a positioning context for an absolutely positioned child.

position: absolute removes the element from normal document flow and positions it relative to its nearest positioned containing block. It is commonly used for badges, icons, tooltips, and overlays.

Comparison

---

Relative Absolute

---

Remains in normal document flow Removed from normal document flow

Original space is preserved Original space is not preserved

Moves relative to its original Moves relative to a positioned position containing block

Frequently used on parent Frequently used on floating/overlay containers elements

Practical example

<div class="parent">
    <div class="child">Hello</div>
</div>

.parent {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.child {
    position: absolute;
    top: 20px;
    right: 20px;
}

The parent establishes the positioning context for the child.

---

1.13 CSS Specificity

When multiple CSS rules target the same element, specificity determines which rule has higher priority.

A simplified interview-level order is:

Inline style
    >
ID selector
    >
Class / attribute / pseudo-class
    >
Element / pseudo-element

Example:

p {
    color: black;
}

.message {
    color: blue;
}

#special {
    color: red;
}

If the same element matches all three selectors, the ID selector has greater specificity than the class and element selector.

Note: !important participates in the cascade and should generally be used sparingly.

---

1.14 em vs rem

em

Relative to the relevant parent/current element font sizing context.

.child {
    font-size: 2em;
}

rem

Relative to the root (html) font size.

.child {
    font-size: 2rem;
}

rem is often easier to reason about for application-wide spacing and typography scales.

---

1.15 What is z-index?

z-index controls stacking order when elements overlap and participate in an applicable stacking context.

.modal {
    position: fixed;
    z-index: 1000;
}

A larger z-index does not always guarantee that an element appears above everything else because stacking contexts can affect the result.

---

1.16 Inline vs Block vs Inline-block

Block

.block {
    display: block;
}

Typically starts on a new line and can take available width.

Inline

.inline {
    display: inline;
}

Flows within text and generally does not accept width/height in the same way as block-level elements.

Inline-block

.inline-block {
    display: inline-block;
    width: 100px;
}

Flows inline while allowing width and height.

---

1.17 Relative vs Absolute vs Fixed

---

Position Behavior

---

relative Moves relative to its normal position

absolute Removed from normal flow and positioned relative to a containing block

fixed Positioned relative to the viewport in the common case and remains fixed during scrolling

sticky Behaves relatively until a scroll threshold is reached, then sticks within its scrolling context

---

1.18 CSS Cascade

The cascade determines which declaration wins when multiple declarations apply.

Important concepts include:

1. Origin and importance
2. Cascade layers
3. Specificity
4. Source order

For equal specificity and otherwise equal cascade conditions, the later declaration generally wins.

---

1.19 Pseudo-classes

Pseudo-classes represent states or conditions.

Examples:

button:hover {
    background: orange;
}

input:focus {
    border-color: blue;
}

li:first-child {
    font-weight: bold;
}

li:last-child {
    margin-bottom: 0;
}

li:nth-child(2) {
    color: red;
}

---

1.20 Pseudo-elements

Pseudo-elements style a specific part of an element or generate content.

Examples:

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

p::before {
    content: "→ ";
}

p::after {
    content: " ✓";
}

---

2. Complete CSS Reference

The following single HTML file demonstrates the major CSS concepts discussed above and additional commonly used CSS properties.

Save it as:

css-cheatsheet.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete CSS Cheat Sheet</title>

<style>

/* ==========================================
   1. SELECTORS
========================================== */

/* Element Selector */
h1 {
    color: darkblue;
}

/* Class Selector */
.box {
    background: lightblue;
}

/* ID Selector */
#unique {
    color: red;
}

/* Universal Selector */
* {
    font-family: Arial, sans-serif;
}

/* Group Selector */
h2,
p {
    margin: 10px;
}

/* Attribute Selector */
input[type="text"] {
    border: 2px solid green;
}

/* Pseudo Class */
button:hover {
    background: orange;
}

/* Pseudo Element */
p::first-letter {
    font-size: 30px;
    color: red;
}


/* ==========================================
   2. COLORS & BACKGROUND
========================================== */

.background {
    background-color: lightyellow;
    background-image: linear-gradient(lightblue, white);
}


/* ==========================================
   3. FONT & TEXT
========================================== */

.font {
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
}


/* ==========================================
   4. BOX MODEL
========================================== */

.boxmodel {
    width: 300px;
    height: 100px;
    padding: 20px;
    margin: 20px;
    border: 3px solid black;
}


/* ==========================================
   5. DISPLAY
========================================== */

.block {
    display: block;
}

.inline {
    display: inline;
}

.inlineblock {
    display: inline-block;
    width: 100px;
}

.none {
    display: none;
}


/* ==========================================
   6. POSITION
========================================== */

.relative {
    position: relative;
    left: 20px;
}

.parent {
    position: relative;
    height: 150px;
    border: 2px solid black;
}

.absolute {
    position: absolute;
    top: 20px;
    right: 20px;
    background: yellow;
}

.fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: red;
    color: white;
    padding: 10px;
}

.sticky {
    position: sticky;
    top: 0;
    background: lightgreen;
}


/* ==========================================
   7. FLEXBOX
========================================== */

.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    border: 2px solid blue;
    padding: 20px;
}

.flex div {
    background: skyblue;
    padding: 20px;
}


/* ==========================================
   8. GRID
========================================== */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.grid div {
    background: pink;
    padding: 20px;
}


/* ==========================================
   9. OVERFLOW
========================================== */

.overflow {
    width: 200px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}


/* ==========================================
   10. VISIBILITY
========================================== */

.hidden {
    visibility: hidden;
}


/* ==========================================
   11. OPACITY
========================================== */

.opacity {
    opacity: 0.5;
}


/* ==========================================
   12. Z-INDEX
========================================== */

.container {
    position: relative;
    height: 150px;
}

.one {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 1;
}

.two {
    position: absolute;
    left: 50px;
    top: 30px;
    width: 100px;
    height: 100px;
    background: blue;
    z-index: 2;
}


/* ==========================================
   13. BORDER RADIUS
========================================== */

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
}


/* ==========================================
   14. BOX SHADOW
========================================== */

.shadow {
    width: 200px;
    padding: 20px;
    box-shadow: 5px 5px 10px gray;
}


/* ==========================================
   15. TEXT SHADOW
========================================== */

.textshadow {
    text-shadow: 2px 2px 5px gray;
}


/* ==========================================
   16. TRANSFORM
========================================== */

.transform:hover {
    transform: rotate(15deg) scale(1.2);
}


/* ==========================================
   17. TRANSITION
========================================== */

.transition {
    width: 100px;
    height: 100px;
    background: orange;
    transition: all 0.5s;
}

.transition:hover {
    width: 200px;
}


/* ==========================================
   18. ANIMATION
========================================== */

.animate {
    width: 100px;
    height: 100px;
    background: purple;
    animation: move 3s infinite;
}

@keyframes move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }
}


/* ==========================================
   19. CURSOR
========================================== */

.cursor {
    cursor: pointer;
}


/* ==========================================
   20. LIST STYLE
========================================== */

ul {
    list-style-type: square;
}


/* ==========================================
   21. FLOAT
========================================== */

.float {
    float: left;
    width: 100px;
    margin-right: 10px;
}


/* ==========================================
   22. OBJECT FIT
========================================== */

.image {
    width: 200px;
    height: 150px;
    object-fit: cover;
}


/* ==========================================
   23. MEDIA QUERY
========================================== */

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


/* ==========================================
   24. CSS VARIABLES
========================================== */

:root {
    --primary: blue;
}

.variable {
    color: var(--primary);
}

</style>

</head>

<body>

<h1>CSS Cheat Sheet</h1>

<h2>Selectors</h2>

<p>This paragraph demonstrates pseudo-element.</p>

<div class="box boxmodel">
    Box Model
</div>

<div id="unique">
    ID Selector
</div>

<input type="text" placeholder="Attribute Selector">

<br><br>

<button>
    Hover Me
</button>

<hr>

<h2>Position</h2>

<div class="relative">
    Relative Position
</div>

<div class="parent">

    Parent (Relative)

    <div class="absolute">
        Absolute
    </div>

</div>

<div class="sticky">
    Sticky Header
</div>

<hr>

<h2>Flexbox</h2>

<div class="flex">

    <div>1</div>
    <div>2</div>
    <div>3</div>

</div>

<hr>

<h2>Grid</h2>

<div class="grid">

    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>

</div>

<hr>

<div class="overflow">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

</div>

<hr>

<div class="opacity">
    Opacity Example
</div>

<hr>

<div class="container">

    <div class="one"></div>
    <div class="two"></div>

</div>

<hr>

<div class="circle"></div>

<hr>

<div class="shadow">
    Box Shadow
</div>

<h2 class="textshadow">
    Text Shadow
</h2>

<hr>

<img
    class="transform image"
    src="https://picsum.photos/300/200"
    alt="Image"
>

<hr>

<div class="transition"></div>

<hr>

<div class="animate"></div>

<hr>

<button class="cursor">
    Pointer Cursor
</button>

<hr>

<ul>

    <li>Java</li>
    <li>Spring Boot</li>
    <li>React</li>

</ul>

<hr>

<div class="variable">
    CSS Variable Example
</div>

<div class="fixed">
    Fixed
</div>

</body>
</html>

---

3. CSS Topics Covered

Topic Purpose

---

Selectors Target HTML elements Colors Text and background colors Fonts Size, family, weight, style Box Model Margin, border, padding, content Width/Height Control element dimensions Display Control layout behavior Position Control element positioning Flexbox One-dimensional layouts Grid Two-dimensional layouts Overflow Handle overflowing content Visibility Hide elements while preserving layout space Opacity Control transparency Z-index Control stacking order Border Draw borders Border-radius Rounded corners Box-shadow Add shadows around elements Text-shadow Add shadows to text Transform Rotate, scale, translate, skew Transition Smooth property changes Animation Keyframe-based animations Cursor Control pointer appearance List-style Style list markers Float Legacy/content-wrapping layout Object-fit Control replaced-element fitting Media Queries Responsive design CSS Variables Reusable custom values Pseudo-classes Style element states Pseudo-elements Style/generated portions of elements

---

4. Java Full Stack Interview Priority

For a Java Full Stack Developer, prioritize the following CSS concepts.

High Priority

1. Box Model
2. Flexbox
3. Grid
4. Relative vs Absolute
5. Fixed vs Sticky
6. Display types
7. CSS Specificity
8. Responsive design
9. Media queries
10. z-index
11. margin vs padding
12. display: none vs visibility: hidden
13. em vs rem
14. Pseudo-classes
15. Pseudo-elements

Medium Priority

• CSS variables
• Transitions
• Transforms
• Animations
• Overflow
• Object-fit
• Shadows
• Float

---

5. Quick Interview Revision

Box Model

Margin
  ↓
Border
  ↓
Padding
  ↓
Content

Specificity

Inline
  ↓
ID
  ↓
Class / Attribute / Pseudo-class
  ↓
Element / Pseudo-element

Position

static
relative
absolute
fixed
sticky

Layout

Flexbox → One dimension

Grid → Two dimensions

Responsive Design

flowchart LR
    A[Desktop] --> D[Responsive CSS]
    B[Tablet] --> D
    C[Mobile] --> D
    D --> E[Adaptive Layout]

---

6. Lead-Level Interview Perspective

For a senior Java Full Stack Developer, do not stop at memorizing CSS properties. Be prepared to explain how CSS decisions affect:

• Maintainability
• Responsive design
• Accessibility
• Component reuse
• Browser compatibility
• Performance
• React component architecture
• Design systems
• Cross-browser behavior

A strong interview response connects CSS fundamentals with frontend architecture.

For example:

“In a large React application, I would avoid putting large amounts of styling directly into individual components. I would establish reusable styling conventions, shared design tokens, responsive breakpoints, and reusable layout components. Flexbox would typically handle one-dimensional component layouts, while Grid would be used for more complex two-dimensional layouts. I would also enforce consistent naming and avoid excessive specificity so that styles remain predictable and maintainable.”

---

7. Final Interview Checklist

• Explain CSS Box Model
• Explain margin vs padding
• Explain inline vs block vs inline-block
• Explain Flexbox
• Explain Grid
• Explain Flexbox vs Grid
• Explain relative vs absolute
• Explain fixed vs sticky
• Explain CSS specificity
• Explain CSS cascade
• Explain z-index
• Explain display: none
• Explain visibility: hidden
• Explain opacity
• Explain em vs rem
• Explain media queries
• Explain responsive design
• Explain pseudo-classes
• Explain pseudo-elements
• Explain CSS variables
• Explain transitions
• Explain transforms
• Explain animations
• Explain overflow
• Explain object-fit
• Practice writing Flexbox layouts
• Practice writing Grid layouts
• Practice responsive layouts