0 / 26 read

CSS

CSS styling, layout, animations, responsive design, and modern features

26 questions0 read5 interview prep

Questions21 shown

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of HTML documents.

Key concepts:

Cascading — Styles cascade from multiple sources (browser defaults, external sheets, inline styles) with specificity rules determining which applies

Selectors — Target HTML elements to style

Properties — Visual attributes like color, font-size, margin

Box Model — Every element is a rectangular box with content, padding, border, margin

CSS separates content (HTML) from presentation (styling), making websites maintainable and consistent.

Full page

Inheritance is the mechanism by which some CSS properties are automatically passed from parent elements to their children.

Inherited properties (by default):

color, font-family, font-size, line-height, text-align, visibility, cursor

Non-inherited properties:

margin, padding, border, width, height, background, display, position

You can force inheritance with inherit:

Code

.child { border: inherit; }

Or reset with initial, unset, or revert.

Full page

Specificity determines which CSS rule applies when multiple rules target the same element. It is calculated as a 4-part value:

| Level | Selector | Weight |

|-------|----------|--------|

| Inline styles | style="..." | 1,0,0,0 |

| IDs | #header | 0,1,0,0 |

| Classes, attributes, pseudo-classes | .nav, [type], :hover | 0,0,1,0 |

| Elements, pseudo-elements | div, ::before | 0,0,0,1 |

Rules:

1. Higher specificity wins

2. Equal specificity — last rule wins

3. !important overrides everything (avoid using it)

4. Inline styles beat IDs beat classes beat elements

Full page

1. External Stylesheet:

Code

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

2. Internal/Embedded CSS:

Code

<style>
  body { color: #333; }
</style>

3. Inline CSS:

Code

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

4. CSS @import:

Code

<style>
  @import url("styles.css");
</style>

Best practice: Use external stylesheets for maintainability. Avoid inline styles. @import causes additional HTTP requests and blocks parallel downloading.

Full page

Yes, technically you can place <style> in the <body> and browsers will still apply the styles. HTML5 allows it.

However, it is not recommended because:

1. It can cause a FOUC (Flash of Unstyled Content)

2. The browser may need to re-render the page when it encounters styles mid-document

3. It breaks separation of concerns

4. It makes styles harder to maintain

Best practice: Always place <style> tags in the <head> so styles are loaded before content is rendered.

Full page

!important overrides all other specificity rules:

Code

p { color: red !important; }
#special p { color: blue; } /* Red still wins */

Can you use it everywhere? Technically yes, but you should avoid it because:

1. It breaks the natural cascade and makes debugging very difficult

2. The only way to override !important is with another !important of higher specificity

3. It creates maintainability nightmares

Acceptable uses:

Overriding third-party library styles

Utility classes (e.g., .hidden { display: none !important; })

Accessibility overrides

Full page

1. Flexbox (recommended):

Code

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

2. CSS Grid:

Code

.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

3. Position + Transform:

Code

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox is the most versatile and widely used approach for modern layouts.

Code

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Full page

1. `static` (default) — Normal document flow, not affected by top/right/bottom/left.

2. `relative` — Positioned relative to its normal position. The element still occupies its original space.

3. `absolute` — Positioned relative to the nearest positioned ancestor. Removed from normal flow.

4. `fixed` — Positioned relative to the viewport. Stays in place during scrolling.

5. `sticky` — Hybrid of relative and fixed. Behaves as relative until a scroll threshold, then becomes fixed.

Code

.sticky-nav { position: sticky; top: 0; }

Full page

| Feature | position: sticky | position: fixed |

|---------|--------------------|-----------------|

| Scroll behavior | Toggles between relative and fixed | Always fixed |

| Positioned relative to | Nearest scrolling ancestor | Viewport |

| Document flow | Stays in flow until threshold | Removed from flow |

| Requires offset | Yes (top, bottom, etc.) | Optional |

| Common use | Sticky headers within sections | Fixed navbars, floating buttons |

Key difference: Sticky elements stay in the document flow and only "stick" when scrolled past their threshold. Fixed elements are always positioned relative to the viewport.

Full page

|----------|---------|-------------|--------|------------|

| opacity: 0 | No | Yes | Yes | Yes |

| visibility: hidden | No | Yes | No | Yes |

| display: none | No | No | No | No |

Use cases:

opacity: 0 — Fade animations, still interactive

visibility: hidden — Hide but maintain layout, no interaction

display: none — Completely remove from layout

Accessibility: Screen readers ignore display: none and visibility: hidden, but may read opacity: 0 content.

Full page

Use the overflow property:

Code

.container {
  overflow-x: auto;  /* Enable horizontal scroll */
  overflow-y: hidden; /* Disable vertical scroll */
  white-space: nowrap; /* Prevent content wrapping */
}

For the entire page:

Code

html, body {
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
}

Tip: Use overflow-x: scroll to always show the scrollbar, or auto to show it only when needed.

Code

.container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

Full page

Every HTML element is a rectangular box with 4 layers:

1. Content — The actual text/images (width and height)

2. Padding — Space between content and border

3. Border — Surrounds the padding

4. Margin — Space outside the border

Box-sizing:

content-box (default): width/height = content only

border-box: width/height = content + padding + border

Code

* { box-sizing: border-box; } /* Recommended */

The total space an element occupies = margin + border + padding + content.

Code

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Full page

The `calc()` function performs mathematical calculations to determine CSS property values, mixing different units: [code block] **Supported operations:** `+`, `-`, `*`, `/` **Rules:** - Spaces requ...