Top 80+ CSS Interview Questions and Answers (2026) — Freshers to Advanced

:has() selects an element based on what it contains or what follows it. Before :has(), CSS could only select children based on parents, not the other way around.

Basic syntax:

parent:has(child) {
 /* styles */
}

Example:

div:has(> img) {
 padding: 0;
}

This selects div elements that contain a direct child <img>.

It can also react to sibling relationships:

h1:has(+ p) {
 margin-bottom: 0;
}

This selects an h1 that is immediately followed by a p.

Another practical example:

form:has(:invalid) {
 border: 2px solid red;
}

This styles the entire form if any input inside it is invalid.

Multiple conditions can be combined:

article:has(h2):has(img) {
 border: 1px solid black;
}

This selects articles that contain both an h2 and an img.

Negation is also possible:

article:not(:has(img)) {
 background: #f5f5f5;
}

:has() is often called the “parent selector” because it allows selecting a parent based on its children, something that was not possible before.

Browsers optimize :has() internally, but complex selectors should still be used carefully in large documents.

CSS Subgrid allows a grid item’s children to align to the parent grid’s tracks instead of creating their own independent grid tracks.

Without subgrid, nested grids do not share row and column alignment. Each grid calculates its own tracks separately. This often causes alignment issues in layouts like card grids.

Example problem:

Multiple cards in a grid contain title, body, and footer sections. Without subgrid, these internal rows do not align consistently across cards.

Subgrid solves this.

Example:

.card-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto 1fr auto;
}
.card {
 display: grid;
 grid-template-rows: subgrid;
 grid-row: span 3;
}

Here, each card inherits the row structure from the parent grid. The title, body, and footer align across all cards.

Key behaviors:

• Subgrid inherits the parent’s track sizing.
• It inherits line names.
• It inherits gap values by default.
• Gap can be overridden using gap: 0; on the subgrid.
• It can be applied to rows, columns, or both independently.

Common use cases:

Form layouts where labels and inputs must align across rows.

Dashboard cards where header and footer heights must match.

Navigation menus with aligned sub-items.

Subgrid removes the need for manual height adjustments or JavaScript-based alignment fixes in nested layouts.

These are user preference media features that detect system-level accessibility or appearance settings.

prefers-color-scheme detects whether the user prefers light mode or dark mode.

Example:

@media (prefers-color-scheme: dark) {
 :root {
   --bg: #1a1a1a;
   --text: #f0f0f0;
 }
}

A common strategy is defining colors using CSS custom properties on :root, then overriding them inside the media query.

The color-scheme property can also be declared:

:root {
 color-scheme: light dark;
}

This tells the browser to adjust built-in UI elements such as scrollbars and form controls.

prefers-reduced-motion detects whether the user has enabled reduced motion in operating system accessibility settings.

Example:

@media (prefers-reduced-motion: reduce) {
 * {
   animation-duration: 0.01ms !important;
   transition-duration: 0.01ms !important;
 }
}

This reduces animations that may cause motion sickness or discomfort.

Other related features include:

• prefers-contrast
• forced-colors
• prefers-reduced-transparency

These features improve accessibility by respecting user-level preferences. They allow applications to adapt automatically without requiring manual theme switches.

The will-change property informs the browser that a specific property of an element is likely to change soon. This allows the browser to prepare optimizations in advance.

Example:

.card:hover {
 will-change: transform;
}

Or:

.animating {
 will-change: transform, opacity;
}

When an element animates properties like transform or opacity, the browser may create a new compositing layer. If that layer is created at the moment the animation begins, the first frame can stutter. will-change allows the browser to create that layer earlier.

How it works:

• The browser prepares GPU compositing for the specified property.
• Rendering becomes smoother when the animation starts.
• Memory usage increases because new layers are created.

When to use it:

Use it only when an element is about to animate.

Use it on specific elements, not globally.

When not to use it:

Do not apply will-change to many elements. Each layer consumes memory.

Do not use will-change: all. It prevents the browser from optimizing effectively.

Do not leave it permanently in stylesheets. It should be temporary.

A common pattern is applying it before animation and removing it afterward.

Example concept:

el.style.willChange = "transform";
el.addEventListener("animationend", () => {
 el.style.willChange = "auto";
});

will-change improves rendering smoothness but increases memory usage. It should be used carefully and only where performance issues are measurable.

CSS Logical Properties define layout using writing-direction–aware terms instead of fixed physical directions like left, right, top, and bottom.

Traditional CSS uses physical properties such as:

• margin-left
• padding-right
• width
• height
• top
• left

These assume a left-to-right horizontal layout. Logical properties replace these with flow-relative equivalents that adapt automatically based on writing direction and writing mode.

For example, in a standard horizontal left-to-right layout:

• margin-inline-start equals margin-left
• margin-inline-end equals margin-right
• margin-block-start equals margin-top
• margin-block-end equals margin-bottom

Logical shorthands also exist:

• margin-inline
• margin-block
• padding-inline
• padding-block
• border-inline
• border-block

Size properties also change:

• inline-size replaces width
• block-size replaces height

Positioning equivalents:

• inset-inline-start replaces left
• inset-block-start replaces top

Example:

.sidebar {
 margin-inline-start: 2rem;
 padding-block: 1rem;
 inline-size: 300px;
}

This works correctly in:

• Left-to-right layouts (English)
• Right-to-left layouts (Arabic, Hebrew)
• Vertical writing modes (Japanese, Chinese)

Why use logical properties:

They automatically adapt to different writing directions without needing separate RTL stylesheets.

They support vertical writing systems where block and inline axes switch.

They align with modern internationalized applications and global design systems.

They provide a clearer mental model:

• Inline direction = direction text flows.
• Block direction = stacking direction of elements.

Logical properties make layouts flexible and future-proof without duplicating styles for different languages.

The clamp() function restricts a value between a minimum and maximum while allowing it to scale fluidly.

Syntax:

clamp(MIN, PREFERRED, MAX)

It behaves like:

max(MIN, min(PREFERRED, MAX))

Example:

font-size: clamp(1rem, 2.5vw, 2rem);

The font size scales with viewport width (2.5vw) but never becomes smaller than 1rem and never larger than 2rem.

This is commonly used for fluid typography.

min() returns the smallest value:

width: min(90%, 1200px);

The width will be whichever is smaller.

max() returns the largest value:

padding: max(1rem, 5vw);

The padding will be whichever is larger.

Comparison:

• clamp() sets both lower and upper limits.
• min() sets a ceiling.
• max() sets a floor.

Common patterns:

Fluid typography:

font-size: clamp(1rem, 1rem + 1vw, 1.5rem);

Responsive spacing:

gap: clamp(0.5rem, 2vw, 2rem);

Flexible containers:

width: clamp(300px, 50%, 800px);

These functions allow responsive behavior without writing media queries. They also accept mixed units directly, unlike older techniques that required complex calculations.

Cascade Layers allow grouping styles into ordered layers, giving control over precedence without relying on selector specificity tricks.

Layer order is defined first:

@layer reset, base, components, utilities;

Styles are then placed inside layers:

@layer base {
 a {
   color: blue;
 }
}
@layer components {
 .link {
   color: green;
 }
}

Layer rules:

• Later layers override earlier layers.
• This happens regardless of selector specificity.
• Unlayered styles always override layered styles.
• When using !important, earlier layers win over later ones.

This changes how CSS conflicts are resolved. A low-specificity selector in a later layer can override a high-specificity selector in an earlier layer.

Example concept:

A .btn class in the utilities layer can override a more complex selector in the reset layer simply because its layer is defined later.

This makes it easier to structure large projects, especially when working with third-party CSS. External libraries can be placed in early layers, and project-specific styles can be placed in later layers.

Cascade Layers make CSS architecture predictable and reduce the need for overly specific selectors.

Container Queries allow a component to change its styles based on the size of its parent container instead of the viewport.

Traditionally, responsive design relied on Media Queries, which respond to the viewport width. This works at the page level but does not help when a component appears in different layouts within the same page.

Container Queries solve this by making components context-aware.

To use them, you first define a container:

.card-container {
 container-type: inline-size;
 container-name: card;
}

Then apply a container query:

@container card (min-width: 400px) {
 .card {
   flex-direction: row;
 }
}

Here, .card changes layout only when its container reaches 400px, regardless of viewport size.

container-type values:

• inline-size - responds to width
• size - responds to both width and height
• normal - no size containment

Key differences from Media Queries:

• Media Queries respond to viewport size.
• Container Queries respond to parent container size.
• Media Queries control page-level layout.
• Container Queries control component-level layout.
• The same component can render differently in a sidebar and in the main content area without JavaScript.

Container query units are also available:

• cqw - 1% of container width
• cqh - 1% of container height
• cqi - 1% of container inline size
• cqb - 1% of container block size

Container Queries are supported in all modern browsers since early 2023 and represent a major shift toward modular, reusable design systems.

The pointer-events property controls whether an element responds to mouse and touch interactions.

Basic values:

• auto - default behavior
• none - element does not receive pointer events

When pointer-events: none; is applied, clicks pass through the element to whatever is behind it.

Example:

.overlay {
 pointer-events: none;
}

Common use cases:

Disabling interaction visually:

.btn--disabled {
 pointer-events: none;
 opacity: 0.5;
}

Creating decorative overlays that should not block clicks underneath.

Disabling links without removing the href:

a.inactive {
 pointer-events: none;
}

Creating watermarks or transparent UI layers that should not capture clicks.

Important caveats:

pointer-events: none does not prevent keyboard interaction. The element can still receive focus and be activated using the keyboard. For complete disabling, use:

• tabindex="-1"
• aria-disabled="true"

Child elements can override the parent’s setting. If a parent has pointer-events: none, but a child has pointer-events: auto, the child will still respond to interaction.

In SVG, additional values exist such as visiblePainted, stroke, fill, and others.

pointer-events is frequently used in UI layering and interaction control, especially in complex layouts.

Text overflow happens when content exceeds the available space in its container. CSS provides multiple properties to control how text behaves.

text-overflow controls how hidden overflowed text is visually indicated.

Common values:

• clip - cuts the text abruptly (default)
• ellipsis - adds "..." at the end

For text-overflow: ellipsis to work, three conditions must be met:

.box {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

Without overflow: hidden and white-space: nowrap, ellipsis will not appear.

For multi-line truncation, the common pattern is:

.box {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

This limits text to three lines and adds ellipsis. Browser support varies slightly, but it works in modern browsers.

overflow-wrap (formerly word-wrap) controls whether long words can break inside themselves.

overflow-wrap: break-word;

This prevents long URLs or continuous strings from overflowing their container.

word-break gives more aggressive control:

• break-all breaks between any characters.
• keep-all prevents breaking in certain languages like CJK.

white-space controls how whitespace and line breaks behave:

• normal - collapses spaces and allows wrapping
• nowrap - prevents wrapping
• pre - preserves spaces and line breaks
• pre-wrap - preserves spaces but allows wrapping
• pre-line - collapses spaces but preserves line breaks

The hyphens property can automatically insert hyphenation points:

p {
 hyphens: auto;
}

This works best when the lang attribute is set correctly on the HTML element.

Handling text overflow properly prevents layout breakage and improves readability, especially in dynamic content systems.

The width property sets the exact width of an element. That width can be fixed (like 1200px) or relative (like 80%).

Example:

.container {
 width: 1200px;
}

Here, the container will always try to be 1200px wide. On small screens, this causes horizontal scrolling because the element cannot shrink below that value.

max-width works differently. It sets an upper limit. The element can become smaller, but it will never grow larger than the specified value.

Example:

.container {
 width: 100%;
 max-width: 1200px;
}

This means:

• On small screens, the container becomes 100% of the screen width.
• On large screens, it stops growing once it reaches 1200px.
• It stays centered if combined with margin: 0 auto;.

Full responsive pattern:

.container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}

This creates a layout that is fluid on mobile and capped on large screens without needing media queries.

Important behavior:

If both width and max-width are set and the width exceeds max-width, the max-width value wins.

Example:

.box {
 width: 1500px;
 max-width: 1200px;
}

The final width will be 1200px.

Common responsive image pattern:

img {
 max-width: 100%;
 height: auto;
}

This ensures images never overflow their container and scale proportionally.

Related properties:

• min-width sets a lower limit.
• min-height and max-height work the same way vertically.

One detail to remember:

Percentage-based max-width is relative to the containing block.
Viewport units like vw are relative to the viewport.

max-width is essential for responsive design because it prevents layout overflow while keeping content fluid.

The transform property applies geometric transformations to elements. It changes how an element appears visually without affecting the document flow.

2D transform functions:

translate(x, y) moves an element.
translateX() and translateY() move along a single axis.

transform: translate(50px, 20px);

rotate(angle) rotates an element.

transform: rotate(45deg);

scale(x, y) resizes an element.

transform: scale(1.5);

skew(x-angle, y-angle) tilts an element.

transform: skew(20deg);

3D transform functions:

• rotateX(), rotateY(), rotateZ()
• translate3d(x, y, z)
• scale3d()
• perspective()

Multiple transforms can be chained:

transform: translateX(50px) rotate(45deg) scale(1.2);

Transforms are applied from right to left.

The transform-origin property changes the pivot point.

transform-origin: top left;

By default, the origin is at the center.

From a performance perspective, transform and opacity are the safest properties to animate. They do not trigger layout recalculation and can be handled by the GPU, making them smoother than properties like width or margin.

CSS media queries apply styles only when certain conditions are met.

Basic syntax:

@media (condition) {
 /* rules */
}

Most common type is width-based:

@media (min-width: 768px) {
 .container {
   display: flex;
 }
}

This applies styles only when the viewport is 768px or wider.

Feature-based queries are also possible:

@media (orientation: landscape) { }

@media (hover: hover) { }

Conditions can be combined:

@media (min-width: 768px) and (max-width: 1024px) { }

Common breakpoint ranges:

• 320px - small mobile
• 480px - standard mobile
• 768px - tablet
• 1024px - laptop
• 1200px - desktop
• 1440px - large desktop

Mobile-first approach:

Base CSS targets small screens.

Enhancements are added using min-width media queries.

Example:

.container {
 display: block;
}
@media (min-width: 768px) {
 .container {
   display: flex;
 }
}

This keeps the base design simple and progressively enhances layout for larger screens.

Desktop-first approach does the opposite by using max-width queries to simplify layouts for smaller screens.

Mobile-first is generally preferred because it prioritizes performance and progressive enhancement.

BEM is a naming convention for CSS classes that creates a clear structure for components. It stands for Block, Element, Modifier.

Format:

block__element--modifier

Block represents a standalone component.

Example:

.card { }
.menu { }
.form { }

Element represents a part of the block that depends on it.

.card__title { }
.card__image { }
.menu__item { }

Modifier represents a variation or state.

.card--featured { }
.menu__item--active { }
.button--large { }

Example in HTML:

<div class="card card--featured">
 <h2 class="card__title">Title</h2>
 <p class="card__body">Content</p>
</div>

Why BEM is widely used:

• Class names describe structure clearly.
• Selectors usually remain single-class (low specificity).
• It avoids deep nesting and overly complex selectors.
• Naming conflicts are minimized because blocks are self-contained.
• It scales well in large projects where many developers work together.

Alternative methodologies exist, such as OOCSS, SMACSS, and utility-first approaches, but BEM remains popular because it is simple, readable, and framework-independent.

CSS transitions animate the change of a property between two states. The animation happens when a property value changes, for example on :hover, :focus, or when a class is added or removed.

Basic syntax:

transition: property duration timing-function delay;

Example:

.button {
 background: blue;
 transition: background 0.3s ease;
}
.button:hover {
 background: red;
}

When the button is hovered, the background color smoothly changes from blue to red over 0.3 seconds.

Timing functions control acceleration:

• ease (default)
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier()

CSS animations are more powerful. They use @keyframes and allow multiple intermediate steps.

Example:

@keyframes slide {
 0%   { left: 0; }
 50%  { left: 50%; }
 100% { left: 100%; }
}
.box {
 animation: slide 2s ease infinite;
}

Animations can:

• Run automatically
• Loop infinitely
• Reverse direction
• Pause and resume
• Define multiple stages

Key differences:

• Transitions require a state change to trigger.
• Animations can start automatically.
• Transitions move between two states only.
• Animations can define multiple keyframes.
• Transitions cannot loop.
• Animations can repeat using animation-iteration-count.

Both transitions and animations perform best when animating transform and opacity, as those properties avoid layout recalculation.

The filter property applies graphical effects to an element, similar to image editing tools.

Example:

.image {
 filter: grayscale(100%);
}

This removes color from the image.

Common filter functions include:

• blur(5px) - Applies blur effect.
• brightness(1.5) - Adjusts brightness.
• contrast(200%) - Changes contrast level.
• grayscale(100%) - Removes color.
• hue-rotate(90deg) - Shifts color tone.
• invert(100%) - Inverts colors.
• opacity(50%) - Adjusts transparency.
• saturate(200%) - Increases color intensity.
• sepia(100%) - Adds warm brown tone.
• drop-shadow(4px 4px 10px rgba(0,0,0,0.5)) - Adds shadow following the element’s shape.

Multiple filters can be combined:

.image {
 filter: grayscale(100%) blur(2px);
}

There is also backdrop-filter, which applies effects to the content behind an element.

Example:

.glass {
 backdrop-filter: blur(10px);
}

This is used for frosted-glass effects.

Filters are often hardware-accelerated and create a compositing layer. They should be used carefully in animations or scroll-heavy pages to avoid performance issues.

These are modern pseudo-class functions introduced to make selectors more flexible and readable.

1. :is() -:is() allows grouping multiple selectors inside a single rule.

Example:

:is(h1, h2, h3) {
 color: blue;
}

This replaces:

h1, h2, h3 {
 color: blue;
}

The important detail is specificity. The specificity of :is() equals the most specific selector inside it.

Example:

:is(.card, #main) {
 padding: 20px;
}

Since #main has ID specificity, the whole rule takes that specificity.

:is() is also forgiving. If one selector inside it is invalid, the browser ignores only that part instead of discarding the entire rule.

2. :where() -:where() works the same way as :is(), but it always has zero specificity.

Example:

:where(.card, .panel) .title {
 font-size: 18px;
}

The specificity here comes only from .title, not from .card or .panel.

This makes :where() useful for writing base styles that should be easy to override later.

3. :not() - :not() selects elements that do not match the given selector.

Example:

button:not(.active) {
 opacity: 0.5;
}

This selects all buttons that do not have the class active.

In modern CSS, :not() can accept multiple selectors:

:not(.a, .b)

These pseudo-class functions can also be combined:

article :is(h1, h2):not(.subtitle) {
 margin-bottom: 10px;
}

This selects h1 or h2 inside an article, except those with class subtitle.

These selectors make stylesheets shorter and easier to maintain, especially in large projects.

The object-fit property controls how replaced elements like <img> and <video> resize inside their container.

When you set a fixed width and height on an image, the image may stretch or distort. object-fit defines how the image should scale to fit that container.

Example:

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

The possible values are:

1. fill: This is the default value. The content stretches to fill the container completely. The aspect ratio is not preserved, so distortion can happen.

2. contain: The content scales to fit entirely inside the container while keeping its aspect ratio. No cropping occurs, but empty space (letterboxing) may appear on the sides or top/bottom.

3. cover: The content scales to completely cover the container while keeping its aspect ratio. Some parts may be cropped. This is commonly used for hero images and profile pictures.

4. none: The content keeps its original size. It does not resize. If it is larger than the container, it overflows.

5. scale-down: The browser compares none and contain and uses whichever results in a smaller image.

There is also a companion property called object-position. It controls how the image is aligned inside the container. The default is:

object-position: 50% 50%;

This means the image is centered.

Example of a circular avatar without distortion:

.avatar {
 width: 100px;
 height: 100px;
 object-fit: cover;
 border-radius: 50%;
}

The image fills the circle without stretching.

The rem unit stands for “root em.” It is a relative unit that is calculated based on the font size of the root <html> element.

By default, most browsers set:

html font-size = 16px

So:

1rem = 16px 
2rem = 32px 
0.5rem = 8px

No matter where an element is placed in the page, rem always refers back to the root font size.

The em unit is also relative, but it depends on the font size of the parent element. Because of this, its value can increase when elements are nested.

Example:

.parent {
 font-size: 20px;
}
.child {
 font-size: 2em;
}

Here, the child becomes 40px (2 × 20px). If another element inside .child also uses 2em, it becomes 80px. The size keeps multiplying based on nesting.

With rem, that multiplication does not happen. The value stays tied to the root.

Example:

.child {
 font-size: 2rem;
}

Even inside multiple nested elements, 2rem always equals 2 × root font size.

Because of this consistency, rem is commonly used for layout spacing, typography systems, and scalable designs. em is useful when sizing needs to stay proportional to a specific component.

A common setup is:

html {
 font-size: 62.5%;
}

Since 62.5% of 16px equals 10px:

1rem = 10px

This makes calculations simple and predictable.

The display property defines how an element generates boxes in the layout and how it participates in the document flow.

The basic display types are:

1. block: Starts on a new line and takes full available width. Width and height can be set.

Examples: div, p, section, h1.

2. inline: Flows within text and does not start on a new line. Width and height cannot be set directly.

Examples: span, a, strong.

3. inline-block: Flows inline but allows width and height to be set.

Modern layout systems use:

4. flex: Creates a one-dimensional layout container. Child elements become flex items and can be aligned and distributed along a row or column.

.container {
 display: flex;
}

5. grid: Creates a two-dimensional layout container with rows and columns.

.container {
 display: grid;
}

6. inline-flex and inline-grid behave like flex and grid but remain inline-level elements.

Other important values include:

7. none: Removes the element completely from the layout. It takes no space and is not rendered.

8. list-item: Displays the element as a list item with a marker.

9. table, table-row, table-cell: Used to create table-like structures without actual <table> markup.

10. flow-root: Creates a new block formatting context. Often used to contain floated elements.

11. contents: Removes the element’s own box but keeps its children in the layout.

Here’s a common comparison:

• display: none removes the element from layout completely.
• visibility: hidden hides the element but keeps its space.
• opacity: 0 makes the element transparent but keeps its space and allows animation.

The display property directly affects layout behavior, rendering, and spacing, which is why it is one of the most important CSS properties to understand clearly.

CSS inheritance means some properties automatically pass from a parent element to its children.

If a property is inherited, the child element uses the parent’s value unless it defines its own.

Example:

body {
 color: blue;
}

All text inside the body becomes blue unless another rule overrides it. The color property is inherited.

Most inherited properties are related to text and fonts. These include:

• font-family
• font-size
• font-weight
• font-style
• color
• line-height
• text-align
• text-transform
• letter-spacing
• word-spacing
• visibility
• cursor
• list-style

Layout and box-model properties are not inherited automatically. These include:

• margin
• padding
• border
• width
• height
• display
• position
• background
• overflow
• float
• z-index
• box-sizing

For example, if a parent element has a border, the child does not automatically get that border.

Inheritance can be controlled using keywords.

inherit forces a property to take the value from its parent.

.child {
 border: inherit;
}

initial resets a property to its default browser value.

unset behaves like inherit for inherited properties and like initial for non-inherited properties.

It is also possible to reset most properties at once:

.element {
 all: unset;
}

Inheritance affects how styles cascade through the DOM and determines how much CSS needs to be written explicitly.

The <img> element is part of the HTML structure. It represents actual content and appears in the DOM.

Key characteristics of <img>:

• It is semantic.
• It supports alt text for accessibility.
• It is indexed by search engines.
• It supports srcset and sizes for responsive images.
• It supports native lazy loading using loading="lazy".
• It contributes to layout and takes up space automatically.
• It prints by default.

Example:

<img src="photo.jpg" alt="Mountain landscape" loading="lazy">

CSS background-image is purely presentational. It is applied through CSS.

Example:

.card {
 background-image: url("photo.jpg");
}

Key characteristics of background-image:

• It is decorative.
• It does not support alt text.
• It is not indexed as content.
• It allows multiple backgrounds on one element.
• It requires explicit width and height on the element.
• It does not print by default.
• It supports background-size: cover and contain.

A practical rule:

If the image conveys meaning or content, use <img>.

If the image is decorative or purely aesthetic, use background-image.

It is also possible to use <img> with object-fit: cover; to achieve background-like behavior while keeping semantic and accessibility benefits.

Form elements such as <input>, <select>, <textarea>, and <button> are partially controlled by the browser and operating system. Their appearance is not entirely defined by CSS, which creates styling challenges.

Common challenges include:

Different browsers render form controls differently. A <select> dropdown may look different in Chrome, Firefox, and Safari.

Some elements resist full styling control, such as:

• <select> option dropdown list
• <input type="date"> calendar picker
• <input type="file"> upload button

To gain more control, developers often remove default styling using:

appearance: none;
-webkit-appearance: none;

This removes native styling and allows custom CSS design.

For checkboxes and radio buttons, a common technique is hiding the native control and styling a label or pseudo-element.

Example concept:

• Set checkbox to opacity: 0 and position: absolute
• Style label::before as the visible checkbox

Modern CSS provides the accent-color property, which simplifies styling of form controls:

input {
 accent-color: #0066ff;
}

This works for checkboxes, radio buttons, range inputs, and progress elements.

Useful pseudo-classes for form styling:

:focus applies when an element receives focus.

:focus-visible applies only when focus is triggered by keyboard navigation.

:placeholder-shown styles inputs when placeholder text is visible.

:valid, :invalid, and :required allow styling based on validation state.

Example:

input:invalid {
 border: 2px solid red;
}

Styling forms requires handling browser inconsistencies and sometimes combining CSS with custom markup for full control.

Shadow DOM is a web standard that allows encapsulating a part of the DOM and its CSS inside a component. It creates a separate DOM tree that is isolated from the main document.

When a shadow root is attached to an element using:

element.attachShadow({ mode: "open" });

a new DOM subtree is created. Styles written inside this shadow tree do not affect the main document, and styles from the main document do not leak into it.

This solves one of the long-standing issues in CSS: global scope. Normally, CSS rules can affect any matching element anywhere in the page. Shadow DOM prevents that.

However, there are important exceptions:

Inherited properties such as color and font-family still pass into the Shadow DOM because they are inherited by nature.

CSS custom properties (variables like --primary-color) also cross the shadow boundary. This allows theme control from outside.

Shadow DOM provides special selectors to control styling:

:host is used inside the shadow tree to style the host element.

:host {
 display: block;
}

:host-context(.dark-theme) allows styling based on an ancestor’s class outside the shadow root.

:host-context(.dark-theme) {
 background: black;
}

::part() allows external styling of specific parts that the component chooses to expose.

::part(button) {
 color: red;
}

Many UI libraries and Web Components use Shadow DOM for style encapsulation. Even some native browser elements such as <input type="range"> and <video> internally use Shadow DOM for their built-in UI.

Shadow DOM ensures component-level styling isolation while still allowing controlled customization.

data-* attributes allow storing custom data directly inside HTML elements.

Example:

<div data-status="active" data-count="5"></div>

These attributes do not affect layout or behavior by default. They simply store extra information.

CSS can target them using attribute selectors:

[data-status="active"] {
 color: green;
}

Partial matching is also possible:

[data-status^="act"]   /* starts with */
[data-status$="ive"]   /* ends with */
[data-status*="tiv"]   /* contains */

CSS also provides the attr() function to read attribute values inside pseudo-elements:

.badge::after {
 content: attr(data-count);
}

This displays the value of data-count visually.

Currently, attr() works reliably only with the content property. Using it for properties like width or font-size has limited browser support.

JavaScript can access these attributes using:

element.dataset.status

A common use case is theming:

[data-theme="dark"] {
 background-color: black;
 color: white;
}

Instead of adding multiple classes, the theme can be controlled using a single attribute.

data-* attributes help connect HTML, CSS, and JavaScript in a structured and scalable way.

HTML5 introduced semantic elements such as:

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption>, <details>, <summary>, <mark>, <time>

These elements provide meaning about the content they contain.

From a CSS perspective:

• Most semantic elements behave like display: block by default.
• They do not add extra visual styling.
• They can be styled just like <div> elements.

Example:

nav {
 background-color: black;
}

The main advantage is cleaner and more meaningful selectors.

Instead of:

.article-container .header-div

You can write:

article > header

This reduces unnecessary class names and improves readability.

From an accessibility perspective:

• <nav> creates a navigation landmark.
• <main> defines the primary content.
• <header> may act as a banner.
• <aside> represents complementary content.

Screen readers use these elements to build a navigation outline.

Search engines also use semantic structure to understand content hierarchy and importance.

Semantic HTML improves structure without changing visual styling behavior.

HTML presentational attributes were older ways of styling elements directly inside HTML tags.

Examples:

<body bgcolor="red">
<p align="center">Text</p>
<font size="5" color="blue">Hello</font>
<img border="1">

These attributes mix structure and presentation in the same file.

CSS replaces these with proper styling rules:

body {
 background-color: red;
}
p {
 text-align: center;
}
font {
 font-size: 20px;
 color: blue;
}
img {
 border: 1px solid black;
}

Key differences:

• HTML defines structure. CSS defines appearance.
• CSS allows one rule to style multiple elements.
• CSS supports media queries and responsive design.
• CSS provides cascade and specificity control.
• CSS is easier to maintain and update.

Many presentational attributes such as bgcolor, align, <font>, and <center> are deprecated in HTML5.

Some attributes still remain valid, such as:

• width and height on <img> (helps prevent layout shift)
• type on <ol>

Modern development separates structure (HTML) and presentation (CSS) completely.

The Critical Rendering Path (CRP) is the sequence of steps the browser follows to turn HTML and CSS into visible pixels on the screen.

When a browser loads a webpage, it does not immediately display content. It goes through a structured process:

1. HTML Parsing -> DOM Tree

The browser reads the HTML file and converts it into a Document Object Model (DOM). The DOM is a tree structure representing all HTML elements.

1. CSS Parsing -> CSSOM Tree

The browser reads CSS files and builds the CSS Object Model (CSSOM), which contains all style rules.

1. DOM + CSSOM -> Render Tree

The DOM and CSSOM combine to form the Render Tree. Only visible elements are included here.

Elements with display: none are excluded.

Elements with visibility: hidden remain in the tree.
 

1. Layout (Reflow)

The browser calculates the position and size of each element.

1. Paint

The browser fills pixels - colors, borders, text, shadows, etc.

1. Composite

Layers are merged in the correct stacking order (z-index, transforms, etc.).

CSS is render-blocking because the browser cannot paint anything until the CSSOM is fully constructed. Styles affect layout and appearance, so rendering waits for CSS to finish loading.

Common optimization strategies:

• Inline critical CSS for above-the-fold content
• Defer non-critical CSS
• Reduce unnecessary DOM depth
• Avoid forced layout recalculations

The Critical Rendering Path explains why CSS placement and loading strategy directly impact performance.