HTML CSS Fundamentals Practice Exam

Question 1 HTML CSS Fundamentals

What is the mobile-first approach in responsive design?

<address> provides contact information for the nearest <article> or <body> ancestor. Typically rendered in italic by browsers. Inside an article it identifies the author; on a page it identifies the site owner. It is not for arbitrary postal addresses — semantic context is required. Mobile-first means writing base CSS for small screens and adding complexity for larger ones using min-width media queries:

/* Base: mobile */
.container { width: 100%; }
/* Tablet */
@media (min-width: 768px) { .container { width: 750px; } }
/* Desktop */
@media (min-width: 1024px) { .container { width: 960px; } }

This results in faster mobile loading and cleaner progressive enhancement. clamp(min, preferred, max) sets a value that adapts between a minimum and maximum range. It is especially useful for fluid typography:
font-size: clamp(1rem, 2.5vw, 2rem);
This means the font size will be at least 1rem, ideally 2.5vw, but never more than 2rem. It replaces many media queries for responsive sizing. The CSS cascade resolves conflicts using this priority order (highest to lowest):

Importance – !important declarations
Origin – author styles > user styles > browser defaults
Specificity – inline > ID > class > element
Source order – later rules win when specificity is equal

Understanding the cascade prevents unexpected style overrides and reduces the need for !important.

Question 2 HTML CSS Fundamentals

What is the difference between `1fr` and `auto` in CSS Grid?

The fr unit stands for fraction and represents a share of the available space in a grid container.
Example: grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others.
It is similar to Flexbox's flex-grow but for Grid. The fr unit distributes space after fixed and content-sized tracks are calculated. The transform property applies 2D or 3D transformations to elements without affecting document flow. Common functions:

translate(x, y) – moves the element
rotate(deg) – rotates the element
scale(x, y) – resizes the element
skew(x, y) – skews the element

Example: transform: translateX(50px) rotate(45deg);
Transforms are GPU-accelerated and ideal for animations. draggable="true" makes an element draggable via the HTML5 Drag and Drop API. Pair with event handlers (dragstart, dragover, drop) and call event.preventDefault() in dragover to allow dropping. Useful for kanban boards, file uploads, and reorderable lists. 1fr consumes remaining space after fixed/content tracks are sized.
auto sizes the track to fit its content (max-content by default) and then any leftover space is distributed to fr tracks.
Mixing them lets you build flexible grids: grid-template-columns: auto 1fr auto (sidebar, content, sidebar) where the middle expands.

Question 3 HTML CSS Fundamentals

What does the `cubic-bezier()` timing function represent?

The <head> contains metadata about the document that is not rendered as visible content: title, character set, viewport settings, CSS links, scripts, Open Graph tags, and SEO information. Only one <head> per document. Elements like <title>, <meta>, <link>, and <style> belong here. The prefers-reduced-motion media feature detects users who have requested less animation in their OS settings (often for vestibular disorders):

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

Always check this for accessibility before shipping motion-heavy UI. Key Flexbox item properties (applied to children):

flex-grow – how much the item grows relative to siblings (default 0)
flex-shrink – how much the item shrinks (default 1)
flex-basis – initial size before growing or shrinking
flex – shorthand for grow, shrink, basis (e.g., flex: 1 0 auto)
align-self – overrides align-items for this item
order – changes visual order

cubic-bezier(x1, y1, x2, y2) defines a custom speed curve by specifying two control points (P1 and P2) of a cubic Bézier curve. Values are usually between 0 and 1, but y can exceed 1 (overshoot/bounce) or go negative (anticipation).
Example: cubic-bezier(0.68, -0.55, 0.265, 1.55) creates a bouncy ease-out. Use tools like cubic-bezier.com to design curves visually.

Question 4 HTML CSS Fundamentals

What is the `<video>` tag's `preload` attribute?

mix-blend-mode controls how an element's content blends with the background using compositing modes like multiply, screen, overlay, color-dodge.
Example: a yellow text that multiplies over an image to create a duotone effect. isolation: isolate on a parent limits blending to within its subtree. place-items is shorthand for align-items + justify-items:
place-items: center; centers items both ways.
place-content is shorthand for align-content + justify-content, distributing space around the grid itself. These shorthands reduce verbosity in common layouts. <track> adds timed text tracks to <video> or <audio>:

<video>
  <source src="movie.mp4">
  <track kind="captions" src="captions.vtt" srclang="en" default>
</video>

kind values: captions, subtitles, descriptions, chapters, metadata. Captions are essential for accessibility. preload hints how much video data to fetch on page load:

none — nothing until the user interacts
metadata — only duration/dimensions
auto — full file (browser may ignore on data-saver)

Use metadata for off-screen videos and none for hero backgrounds where playback may never start.

Question 5 HTML CSS Fundamentals

What does `will-change` do and how should it be used?

will-change hints to the browser that an element is likely to change (transform, opacity, scroll-position). The browser may promote it to its own compositor layer for smoother animation. Use it sparingly and just-in-time:

Apply shortly before the change (not permanently)
Remove it when done
Overuse wastes GPU memory and slows the page

It is not a silver bullet — the change itself must still be cheap. place-items is shorthand for align-items + justify-items:
place-items: center; centers items both ways.
place-content is shorthand for align-content + justify-content, distributing space around the grid itself. These shorthands reduce verbosity in common layouts. A stylesheet <link> is render-blocking: the browser pauses rendering until the CSS is fetched and parsed, because unstyled content (FOUC) flashes badly.
A <script> is also parser-blocking by default. Adding defer makes scripts download in parallel and execute after parsing; async lets them execute as soon as downloaded, which is unsafe for scripts that depend on the DOM. autocomplete tells the browser what kind of value is expected so it can fill in saved data:
<input autocomplete="email">, autocomplete="cc-number", autocomplete="new-password".
Use autocomplete="off" on sensitive one-time fields (like 2FA codes). Proper values improve user experience and reduce form-friction.

Question 6 HTML CSS Fundamentals

What does the `async` attribute do on a `<script>` tag?

<head> is a metadata container for the whole document (title, meta, links) and is never rendered as visible content.
<header> is a landmark representing introductory content for its nearest sectioning ancestor (often the page banner with logo and nav). It can appear multiple times per page (e.g., inside <article>) and is visible content. The transform property applies 2D or 3D transformations to elements without affecting document flow. Common functions:

translate(x, y) – moves the element
rotate(deg) – rotates the element
scale(x, y) – resizes the element
skew(x, y) – skews the element

Example: transform: translateX(50px) rotate(45deg);
Transforms are GPU-accelerated and ideal for animations. async downloads the script in parallel with parsing and executes it as soon as it finishes downloading, regardless of DOM state or other scripts. Order is not guaranteed between async scripts. Use async for independent scripts (analytics, ads) and defer for scripts that depend on the DOM or on each other. Both accept a list of selectors and match any element matched by any of them:
:is(h1, h2, h3) { margin: 0; }
The difference: :is() takes the specificity of its most specific argument, while :where() always has zero specificity. Use :where() for low-priority resets that should never override real styles.

Question 7 HTML CSS Fundamentals

What is the `subgrid` value in CSS Grid?

grid-template-columns: subgrid lets a grid item's tracks inherit sizing from its parent's grid. Useful for aligning nested content (e.g., a card with internal grid sections that should align with siblings). Supported in modern browsers. Without subgrid, nested grids are independent and can drift out of alignment with the parent. <output> represents the result of a calculation or user action, typically wired to a form via the for attribute:
<input type="range" id="r"> <output for="r"></output>
It is semantically meaningful for screen readers and is the standard place to show computed values like order totals or filter results. object-fit controls how replaced content (like <img> or <video>) is resized to fit its container:

fill – stretches to fill (default, may distort)
contain – scales to fit, preserving aspect ratio
cover – scales to cover, cropping if needed
none – original size, may overflow
scale-down – uses none or contain, whichever is smaller

pattern defines a regular expression the input value must match to be valid:
<input type="text" pattern="[A-Za-z]{3}" title="Three letters">
The browser shows the value of title when validation fails. pattern only applies to text-like inputs and the value is matched against the entire string (implicit ^...$ anchors).

Question 8 HTML CSS Fundamentals

What are CSS attribute selectors?

They match elements based on attribute values:

[attr] — has the attribute
[attr="value"] — exact match
[attr^="value"] — starts with
[attr$="value"] — ends with
[attr*="value"] — contains
[attr~="value"] — word in space-separated list
[attr|="value"] — exact or prefix- (e.g., lang="en-")

Case sensitivity can be controlled with [attr="value" i]. HTML5 introduced many input types beyond text and password:

email – validates email format
url – validates URL format
number – numeric input with spinners
range – slider control
date, time, datetime-local
color – color picker
search – search field
tel – telephone number

CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously, while Flexbox is one-dimensional.
Use Grid for:

Full page layouts
Complex grid-based designs
When you need precise control over rows AND columns

Use Flexbox for simpler, single-axis layouts. They can be combined together. The CSS cascade resolves conflicts using this priority order (highest to lowest):

Importance – !important declarations
Origin – author styles > user styles > browser defaults
Specificity – inline > ID > class > element
Source order – later rules win when specificity is equal

Understanding the cascade prevents unexpected style overrides and reduces the need for !important.

Question 9 HTML CSS Fundamentals

What is the `<input type="file">` `accept` attribute used for?

grid-template-columns: subgrid lets a grid item's tracks inherit sizing from its parent's grid. Useful for aligning nested content (e.g., a card with internal grid sections that should align with siblings). Supported in modern browsers. Without subgrid, nested grids are independent and can drift out of alignment with the parent. A minimal HTML5 page contains:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>
<body></body>
</html>

The lang attribute on <html> and a <meta charset> declaration are essential for accessibility and correct character encoding. accept hints which file types the user should be able to select. Examples:
accept="image/*" (any image)
accept=".pdf,.doc" (specific extensions)
accept="image/png,image/jpeg" (specific MIME types)
It filters the file picker dialog. Note: it is a hint, not enforced validation — server-side validation is still required. The display property controls how an element is rendered:

block – takes full width, starts on new line (div, p, h1)
inline – flows with text, no width/height (span, a)
inline-block – inline but respects width/height
none – completely removed from layout
flex – enables Flexbox
grid – enables Grid

Question 10 HTML CSS Fundamentals

What is the `rel="canonical"` link and why is it used?

CSS selectors target HTML elements for styling. Basic types include:

Element: p { } – selects all paragraphs
Class: .intro { } – selects elements with class "intro"
ID: #header { } – selects the element with id "header"
Universal: * { } – selects all elements
Attribute: [type="text"] { } – selects by attribute

The fr unit stands for fraction and represents a share of the available space in a grid container.
Example: grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others.
It is similar to Flexbox's flex-grow but for Grid. The fr unit distributes space after fixed and content-sized tracks are calculated. <meta charset="UTF-8"> declares the character encoding used by the document. UTF-8 supports virtually every character from every language, including emojis. It must appear in the first 1024 bytes of the document so the browser does not have to re-parse the page. Missing it can cause mojibake (garbled characters) in non-ASCII text. <link rel="canonical" href="https://example.com/page"> tells search engines which URL is the master version of a page. Use it when the same content is reachable via multiple URLs (with/without trailing slash, query parameters, or from different domains) to consolidate SEO ranking signals and prevent duplicate-content penalties.

Question 11 HTML CSS Fundamentals

What is the difference between `:focus`, `:focus-visible`, and `:focus-within`?

:focus matches whenever the element has focus (including mouse clicks).
:focus-visible matches only when focus is shown (typically keyboard navigation), avoiding the ring on mouse clicks.
:focus-within matches an element when any descendant has focus. Best practice: style keyboard focus with :focus-visible for better UX. Both span multiple cells, but in different ways:
grid-column: span 2 — spans 2 columns starting from auto-placed position
grid-column: 1 / 3 — spans from line 1 to line 3 (also 2 columns)
Use span for flexible placement in dynamic grids; use line numbers for precise layouts. <hr> represents a thematic break between paragraphs or sections (a scene change in a story, a topic shift in a document). Historically used as a horizontal rule for visual styling, modern HTML treats it as semantic. Use CSS borders on elements for purely decorative dividers instead. position: absolute positions an element relative to its nearest positioned ancestor (an ancestor with position other than static). It scrolls with the page.
position: fixed positions an element relative to the viewport. It stays in place even when the page is scrolled. Both remove the element from the normal document flow.

Question 12 HTML CSS Fundamentals

What is the `<meta name="theme-color">`?

display: none completely removes the element from the document flow — it takes up no space and is invisible.
visibility: hidden makes the element invisible but it still occupies space in the layout.
Key difference for accessibility: display: none hides content from screen readers. visibility: hidden also hides from screen readers, but the layout space is preserved. box-sizing: border-box changes how the width and height of an element are calculated. Instead of adding padding and border on top of the specified width, they are included within it.
Example: An element with width: 200px; padding: 20px; border: 5px solid; will be exactly 200px wide total instead of 250px. <meta name="theme-color" content="#3498db"> sets the color of the browser chrome (address bar on mobile, title bar on desktop) on supporting browsers. Pair with media="(prefers-color-scheme: dark)" for separate dark-mode colors. A small touch that makes PWAs and mobile sites feel native. align-items aligns flex items within their own row along the cross axis (works for any number of rows).
align-content distributes space between rows of wrapped flex items — it only takes effect with flex-wrap: wrap and multiple lines. If there's only one row, align-content does nothing.

Question 13 HTML CSS Fundamentals

What does `prefers-reduced-motion` do?

A minimal HTML5 page contains:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>
<body></body>
</html>

The lang attribute on <html> and a <meta charset> declaration are essential for accessibility and correct character encoding. The order property changes only the visual order of items. The DOM source order stays the same, so:

Tab order follows DOM, not visual order (accessibility issue if abused)
Screen readers read DOM order
JavaScript iteration follows DOM order

Use order for minor visual tweaks. For major content reorganization, fix the DOM order instead. The prefers-reduced-motion media feature detects users who have requested less animation in their OS settings (often for vestibular disorders):

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

Always check this for accessibility before shipping motion-heavy UI. Explicit tracks are defined by grid-template-columns/grid-template-rows. When items are placed beyond the explicit grid, the browser creates implicit tracks automatically.
Control their size with grid-auto-columns and grid-auto-rows. This lets you declare a base layout while letting extra items flow into overflow rows.

Question 14 HTML CSS Fundamentals

What are `srcset` and `sizes` for responsive images?

The prefers-reduced-motion media feature detects users who have requested less animation in their OS settings (often for vestibular disorders):

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

Always check this for accessibility before shipping motion-heavy UI. Void elements cannot have children or closing tags: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>.
Writing <br></br> is invalid — they are self-contained. This is an HTML-specific rule, not a general XML one. srcset lists multiple image sources with their intrinsic widths:
srcset="small.jpg 400w, large.jpg 1200w"
sizes tells the browser how wide the image will display at different breakpoints:
sizes="(max-width: 600px) 100vw, 50vw"
The browser picks the most efficient file, saving bandwidth on small screens and serving sharp images on retina displays. draggable="true" makes an element draggable via the HTML5 Drag and Drop API. Pair with event handlers (dragstart, dragover, drop) and call event.preventDefault() in dragover to allow dropping. Useful for kanban boards, file uploads, and reorderable lists.

Question 15 HTML CSS Fundamentals

What is the difference between `margin` and `padding`?

content-visibility: auto; tells the browser to skip rendering work for off-screen elements until they approach the viewport. Combined with contain-intrinsic-size (to reserve space), this dramatically improves initial render and scroll performance for long pages. Treat it as a CSS equivalent of lazy-loading for layout. The View Transitions API enables smooth animated transitions between DOM states (page navigations, modal open/close, theme switches):
document.startViewTransition(() => updateDOM());
With CSS ::view-transition-group, ::view-transition-old, and ::view-transition-new pseudo-elements you control how elements morph between states. Replaces much of the JS animation work needed for SPA-feel transitions. margin is space outside the border, between this element and its neighbors. It collapses vertically with adjacent margins (the larger wins).
padding is space inside the border, between the border and the content. Padding does not collapse and is part of the element's box (it receives the background color). Both accept 1–4 values for top/right/bottom/left. srcset lists multiple image sources with their intrinsic widths:
srcset="small.jpg 400w, large.jpg 1200w"
sizes tells the browser how wide the image will display at different breakpoints:
sizes="(max-width: 600px) 100vw, 50vw"
The browser picks the most efficient file, saving bandwidth on small screens and serving sharp images on retina displays.

Question 16 HTML CSS Fundamentals

What are the differences between `<strong>` and `<b>`?

The display property controls how an element is rendered:

block – takes full width, starts on new line (div, p, h1)
inline – flows with text, no width/height (span, a)
inline-block – inline but respects width/height
none – completely removed from layout
flex – enables Flexbox
grid – enables Grid

<hr> represents a thematic break between paragraphs or sections (a scene change in a story, a topic shift in a document). Historically used as a horizontal rule for visual styling, modern HTML treats it as semantic. Use CSS borders on elements for purely decorative dividers instead. <strong> carries semantic importance: screen readers may announce it with emphasis, and search engines may weight it. <b> is purely stylistic (bold) without implying importance.
Similarly, <em> conveys stress/emphasis semantically, while <i> is just italic styling (often used for technical terms or foreign phrases). Prefer the semantic tags when meaning matters. CSS variables make theming simple by defining theme values on a selector:

:root { --bg: #fff; --text: #333; }
[data-theme="dark"] { --bg: #1a1a1a; --text: #eee; }

Elements reference the variables:
body { background: var(--bg); color: var(--text); }
Toggle themes by changing the data-theme attribute with JavaScript. No need to rewrite any CSS rules.

Question 17 HTML CSS Fundamentals

What are the main CSS animation properties?

The transform property applies 2D or 3D transformations to elements without affecting document flow. Common functions:

translate(x, y) – moves the element
rotate(deg) – rotates the element
scale(x, y) – resizes the element
skew(x, y) – skews the element

Example: transform: translateX(50px) rotate(45deg);
Transforms are GPU-accelerated and ideal for animations. <canvas> is an immediate-mode, pixel-based drawing surface. You draw into it via JavaScript (ctx.fillRect(...)); once drawn, the browser forgets the shapes. Best for many objects, animations, games, image editing.
SVG is retained-mode, vector-based, and lives in the DOM. Each shape is an element you can style and bind events to. Best for icons, charts, and small interactive graphics. autocomplete tells the browser what kind of value is expected so it can fill in saved data:
<input autocomplete="email">, autocomplete="cc-number", autocomplete="new-password".
Use autocomplete="off" on sensitive one-time fields (like 2FA codes). Proper values improve user experience and reduce form-friction. Key animation properties:

animation-name – references a @keyframes rule
animation-duration – how long one cycle takes
animation-timing-function – speed curve
animation-delay – wait before starting
animation-iteration-count – number of cycles (infinite)
animation-direction – normal, reverse, alternate
animation-fill-mode – forwards, backwards, both

Question 18 HTML CSS Fundamentals

What is the `cite` element?

The <label> element associates a text description with a form control. It improves accessibility by allowing screen readers to announce the label when a user focuses the input.
Two methods:
<label for="name">Name</label><input id="name">
or wrapping:
<label>Name <input></label> <cite> marks the title of a cited work: book, article, film, song. Example:
As described in <cite>The Pragmatic Programmer</cite>...
It is for work titles only; do not use it for a person's name. For person names use no element, or in HTML5.2+ a <span> with appropriate ARIA. Browser default styles italicize it. Pseudo-elements style specific parts of an element, written with ::. They differ from pseudo-classes which target states.

::before – inserts content before the element
::after – inserts content after the element
::first-line – styles the first line of text
::first-letter – styles the first letter
::placeholder – styles placeholder text

CSS position values:

static – default, follows normal document flow
relative – offset from its normal position, still occupies original space
absolute – removed from flow, positioned relative to nearest positioned ancestor
fixed – removed from flow, positioned relative to the viewport
sticky – toggles between relative and fixed based on scroll position

Question 19 HTML CSS Fundamentals

What is the transform property in CSS?

object-fit controls how replaced content (like <img> or <video>) is resized to fit its container:

fill – stretches to fill (default, may distort)
contain – scales to fit, preserving aspect ratio
cover – scales to cover, cropping if needed
none – original size, may overflow
scale-down – uses none or contain, whichever is smaller

<datalist> provides a list of suggested values for an <input> while still allowing the user to type any value:

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

It is a hybrid between <select> (forced choice) and a free text field. The transform property applies 2D or 3D transformations to elements without affecting document flow. Common functions:

translate(x, y) – moves the element
rotate(deg) – rotates the element
scale(x, y) – resizes the element
skew(x, y) – skews the element

Example: transform: translateX(50px) rotate(45deg);
Transforms are GPU-accelerated and ideal for animations. user-scalable=no prevents users from zooming the page, which violates WCAG accessibility. Users with low vision need zoom. Avoid it entirely. If you must limit zoom (rarely a good idea), at minimum allow scaling: maximum-scale=2 or higher. Mobile-first design should never lock users out of zoom.

Question 20 HTML CSS Fundamentals

What does the <figure> and <figcaption> combination do?

The fr unit stands for fraction and represents a share of the available space in a grid container.
Example: grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others.
It is similar to Flexbox's flex-grow but for Grid. The fr unit distributes space after fixed and content-sized tracks are calculated. <figure> wraps self-contained content like images, diagrams, or code snippets that are referenced in the main flow. <figcaption> provides a caption or legend for the figure.
Example:
<figure><img src="chart.png"><figcaption>Sales data</figcaption></figure> It overrides the container's align-items for just that item, centering it vertically within its grid cell. Useful when most items stretch but one needs custom alignment. Other values: start, end, stretch (default). Combines with justify-self for full per-item control. scrollbar-gutter: stable; reserves space for the scrollbar even when there's no overflow. Prevents layout shifts when content dynamically grows to need a scrollbar. Values: auto (default, browser decides), stable, stable both-edges (symmetric reservation).

Question 21 HTML CSS Fundamentals

What does `as="image"` with `imagesrcset` do in `<link rel="preload">`?

opacity: 0 — invisible but interactive and in layout; animatable; still in accessibility tree
visibility: hidden — invisible and non-interactive but space is preserved; not in accessibility tree
display: none — completely removed from layout, accessibility, and interaction

Use display: none for content that should not exist; visibility: hidden to preserve layout; opacity: 0 with pointer-events: none for animated reveals. Pseudo-elements style specific parts of an element, written with ::. They differ from pseudo-classes which target states.

::before – inserts content before the element
::after – inserts content after the element
::first-line – styles the first line of text
::first-letter – styles the first letter
::placeholder – styles placeholder text

<link rel="preload" as="image" imagesrcset="small.jpg 400w, large.jpg 1200w" imagesizes="100vw"> preloads the right image for the current viewport, telling the browser to use the srcset selection logic. Avoids preloading a huge image for mobile. The browser respects responsive selection instead of blindly fetching the largest variant. pointer-events controls whether an element responds to mouse/touch events. Useful values:

auto — normal
none — click events pass through to underlying elements
visiblePainted — only painted visible parts (default for SVG)

Common use: making an overlay decorative without blocking clicks on the content below, or making a heading non-clickable when overlaid on a link.

Question 22 HTML CSS Fundamentals

What does the `pattern` attribute do on an input?

@layer reset, base, components, utilities; declares a priority order for layers. Styles in later layers win over earlier ones regardless of specificity. This solves the !important wars and lets you safely use low-specificity utility styles without worrying they'll be overridden:
@layer utilities { .text-center { text-align: center; } }
Unlayered styles beat layered styles. Key animation properties:

animation-name – references a @keyframes rule
animation-duration – how long one cycle takes
animation-timing-function – speed curve
animation-delay – wait before starting
animation-iteration-count – number of cycles (infinite)
animation-direction – normal, reverse, alternate
animation-fill-mode – forwards, backwards, both

pattern defines a regular expression the input value must match to be valid:
<input type="text" pattern="[A-Za-z]{3}" title="Three letters">
The browser shows the value of title when validation fails. pattern only applies to text-like inputs and the value is matched against the entire string (implicit ^...$ anchors). <iframe> embeds another HTML page inside the current one. Security attributes:

sandbox – restricts what the embedded page can do (no scripts, no forms, etc.)
allow – grants specific feature permissions (camera, fullscreen)
referrerpolicy – controls the Referer header sent
loading="lazy" – defers loading until needed

Always embed trusted sources and consider sandboxing even trusted content.

Question 23 HTML CSS Fundamentals

What is the purpose of ARIA attributes in HTML?

Logical properties describe directions relative to the writing mode, not the viewport:

margin-inline-start (instead of margin-left)
padding-block (top + bottom)
border-inline-end
inset-inline-start

They automatically adapt to direction: rtl and vertical writing modes, essential for internationalization. CSS animations use @keyframes to define multi-step sequences and can run automatically without a trigger. Transitions only animate between two states and require a trigger (like :hover).
Example:

@keyframes slide { from { left: 0; } to { left: 100px; } }
.box { animation: slide 2s ease infinite; }

Animations support looping, direction, delays, and complex multi-step sequences. ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for users with disabilities. Key attributes include:

aria-label – provides an accessible name
aria-hidden – hides elements from screen readers
aria-live – announces dynamic content changes
role – defines the purpose of an element

Use ARIA only when native HTML semantics are insufficient. Mobile-first means writing base CSS for small screens and adding complexity for larger ones using min-width media queries:

/* Base: mobile */
.container { width: 100%; }
/* Tablet */
@media (min-width: 768px) { .container { width: 750px; } }
/* Desktop */
@media (min-width: 1024px) { .container { width: 960px; } }

This results in faster mobile loading and cleaner progressive enhancement.

Question 24 HTML CSS Fundamentals

What is the `:is()` and `:where()` pseudo-class?

ch equals the width of the 0 glyph in the element's font. It's ideal for optimal line length in body text:
.article { max-width: 65ch; }
This produces ~65 characters per line, the recommended measure for readability. Avoids the brittleness of pixel-based widths that don't adapt to font changes. They match elements based on attribute values:

[attr] — has the attribute
[attr="value"] — exact match
[attr^="value"] — starts with
[attr$="value"] — ends with
[attr*="value"] — contains
[attr~="value"] — word in space-separated list
[attr|="value"] — exact or prefix- (e.g., lang="en-")

Case sensitivity can be controlled with [attr="value" i]. Both accept a list of selectors and match any element matched by any of them:
:is(h1, h2, h3) { margin: 0; }
The difference: :is() takes the specificity of its most specific argument, while :where() always has zero specificity. Use :where() for low-priority resets that should never override real styles. <track> adds timed text tracks to <video> or <audio>:

<video>
  <source src="movie.mp4">
  <track kind="captions" src="captions.vtt" srclang="en" default>
</video>

kind values: captions, subtitles, descriptions, chapters, metadata. Captions are essential for accessibility.

Question 25 HTML CSS Fundamentals

What is the difference between HTTP `GET` and `POST` in forms?

GET appends form data to the URL as query parameters (?name=value). Use it for searches and idempotent actions. Visible in browser history and bookmarks. Limit ~2KB.
POST sends data in the request body. Use it for any state-changing action (creating accounts, posting comments). Not bookmarkable, no URL length limit. Forms default to GET; set method="post" explicitly. CSS variables make theming simple by defining theme values on a selector:

:root { --bg: #fff; --text: #333; }
[data-theme="dark"] { --bg: #1a1a1a; --text: #eee; }

Elements reference the variables:
body { background: var(--bg); color: var(--text); }
Toggle themes by changing the data-theme attribute with JavaScript. No need to rewrite any CSS rules. A stylesheet <link> is render-blocking: the browser pauses rendering until the CSS is fetched and parsed, because unstyled content (FOUC) flashes badly.
A <script> is also parser-blocking by default. Adding defer makes scripts download in parallel and execute after parsing; async lets them execute as soon as downloaded, which is unsafe for scripts that depend on the DOM. Combinators define relationships between selectors:

Descendant (space) — A B: B anywhere inside A
Child (>) — A > B: B is a direct child of A
Adjacent sibling (+) — A + B: B immediately follows A
General sibling (~) — A ~ B: B is a later sibling of A

Each has different specificity behavior — combinators themselves add no specificity.

Question 26 HTML CSS Fundamentals

What is the difference between `<em>` and `<strong>` vs `<i>` and `<b>`?

<address> provides contact information for the nearest <article> or <body> ancestor. Typically rendered in italic by browsers. Inside an article it identifies the author; on a page it identifies the site owner. It is not for arbitrary postal addresses — semantic context is required. <ul> is an unordered list rendered with bullets, used when order is irrelevant (shopping list, nav menu).
<ol> is an ordered list rendered with numbers, used when sequence matters (recipe steps, ranking). Both contain <li> items. Lists should only be used for actual list content, never as a layout hack (use Flexbox or Grid instead). Semantics vs presentation:

<em> — semantic emphasis (stress when read aloud)
<strong> — semantic strong importance
<i> — alternate voice/mood, technical terms, foreign phrases (presentational italic)
<b> — stylistically offset without extra importance (keywords, product names)

When in doubt, choose the semantic tags. Use CSS for visual emphasis. <meta charset="UTF-8"> declares the character encoding used by the document. UTF-8 supports virtually every character from every language, including emojis. It must appear in the first 1024 bytes of the document so the browser does not have to re-parse the page. Missing it can cause mojibake (garbled characters) in non-ASCII text.

Question 27 HTML CSS Fundamentals

What is the `enctype` attribute on `<form>`?

enctype specifies how form data is encoded. Default: application/x-www-form-urlencoded. For file uploads, use multipart/form-data — required to send binary data. text/plain exists but is rarely used. The <form> must declare enctype="multipart/form-data" for any file inputs to work. Grid items can be placed using line-based placement:

grid-column: 1 / 3 – spans from column line 1 to 3
grid-row: 2 / 4 – spans from row line 2 to 4
grid-area: 1 / 1 / 3 / 3 – shorthand (row-start / col-start / row-end / col-end)

Or using named areas:
grid-area: header; (with grid-template-areas on the container). overscroll-behavior controls what happens when a user scrolls past the edge of an element:

auto — normal scroll chaining to parent
contain — prevent scroll chaining (modals, side panels)
none — prevent chaining and prevent pull-to-refresh

Essential for modal dialogs that shouldn't scroll the page behind them. They define the main axis of a flex container:

row — items laid out left-to-right; main axis is horizontal; justify-content affects horizontal, align-items affects vertical
column — items laid out top-to-bottom; main axis is vertical; justify-content affects vertical, align-items affects horizontal

Choosing the main axis correctly is the key to understanding Flexbox alignment.

Question 28 HTML CSS Fundamentals

How does the CSS z-index property work?

z-index controls the stacking order of positioned elements (those with position other than static). Higher values appear in front of lower values.
Key rules:

Only works on positioned elements
Creates a stacking context
Child elements are confined within their parent's stacking context
Default value is auto (equivalent to 0)

Both span multiple cells, but in different ways:
grid-column: span 2 — spans 2 columns starting from auto-placed position
grid-column: 1 / 3 — spans from line 1 to line 3 (also 2 columns)
Use span for flexible placement in dynamic grids; use line numbers for precise layouts. defer tells the browser to download the script in parallel with HTML parsing and execute it after the document is fully parsed, in document order. Deferred scripts run before DOMContentLoaded. They behave as if placed just before </body> but without blocking earlier parsing, improving perceived load time. Pseudo-classes select elements based on their state or position without adding extra classes. Common examples:

:hover – mouse is over the element
:focus – element has keyboard focus
:first-child – first child of its parent
:nth-child(n) – nth child of its parent
:not(selector) – elements that do not match
:checked – checked inputs

Question 29 HTML CSS Fundamentals

What does the HTML `lang` attribute do?

Container queries respond to the size of a parent container instead of the viewport:
@container (min-width: 400px) { .card { flex-direction: row; } }
First declare container-type: inline-size on the parent. They enable truly reusable components that adapt wherever they're placed — solving the media-query limitation where components couldn't react to their actual context. <progress> represents the completion progress of a task (uploading, downloading, loading).
<meter> represents a scalar measurement within a known range, like disk usage, battery level, or a rating score.
Use progress for dynamic tasks, meter for static values that fluctuate within bounds. Both have min/max/value attributes. The display property controls how an element is rendered:

block – takes full width, starts on new line (div, p, h1)
inline – flows with text, no width/height (span, a)
inline-block – inline but respects width/height
none – completely removed from layout
flex – enables Flexbox
grid – enables Grid

<html lang="en"> declares the primary language of the document. Screen readers use it to pick the right voice and pronunciation engine. Search engines use it for geo-targeting. Browser translation tools rely on it. You can also set lang on individual elements for mixed-language pages (<span lang="fr">bonjour</span>).

Question 30 HTML CSS Fundamentals

What does `animation-fill-mode: forwards` do?

CSS selectors target HTML elements for styling. Basic types include:

Element: p { } – selects all paragraphs
Class: .intro { } – selects elements with class "intro"
ID: #header { } – selects the element with id "header"
Universal: * { } – selects all elements
Attribute: [type="text"] { } – selects by attribute

box-sizing: border-box changes how the width and height of an element are calculated. Instead of adding padding and border on top of the specified width, they are included within it.
Example: An element with width: 200px; padding: 20px; border: 5px solid; will be exactly 200px wide total instead of 250px. forwards makes the element retain the styles from the last keyframe after the animation finishes.
Without it, the element snaps back to its pre-animation state. backwards applies the first keyframe's styles during the delay period. both applies both behaviors. Use forwards for one-shot animations that should leave a visible end state (like a progress bar completing). em is relative to the font-size of the parent element, which can cause compounding when nested.
rem is relative to the root element's font-size (<html>), making it consistent everywhere.
Example: If root is 16px, 1.5rem = 24px always. But 1.5em inside a 20px parent = 30px.
Best practice: Use rem for consistent sizing and em for component-relative scaling.

Question 31 HTML CSS Fundamentals

What is the difference between `<meter>` and `<progress>`?

target="_blank" opens the link in a new tab. Best practice: combine it with rel="noopener noreferrer":

noopener prevents the new page from accessing window.opener (security: tabnabbing)
noreferrer removes the Referer header (privacy)

Modern browsers default to noopener, but adding it explicitly is safer and more compatible. <progress> represents the completion progress of a task (uploading, downloading, loading).
<meter> represents a scalar measurement within a known range, like disk usage, battery level, or a rating score.
Use progress for dynamic tasks, meter for static values that fluctuate within bounds. Both have min/max/value attributes. async downloads the script in parallel with parsing and executes it as soon as it finishes downloading, regardless of DOM state or other scripts. Order is not guaranteed between async scripts. Use async for independent scripts (analytics, ads) and defer for scripts that depend on the DOM or on each other. <div role="button" tabindex="0"> looks like a button to screen readers but misses native behavior: no built-in keyboard activation on Enter/Space, no disabled handling, no form submission semantics, and no default styling. Always prefer the real <button>; use ARIA roles only when no native element fits.

Question 32 HTML CSS Fundamentals

What are CSS timing functions?

The <head> contains metadata about the document that is not rendered as visible content: title, character set, viewport settings, CSS links, scripts, Open Graph tags, and SEO information. Only one <head> per document. Elements like <title>, <meta>, <link>, and <style> belong here. These math functions pick a value from arguments:

min(a, b) — smaller of a and b
max(a, b) — larger of a and b
clamp(min, pref, max) — value between min and max, ideally pref

Examples:
width: min(100%, 800px); — never wider than 800px
font-size: clamp(1rem, 2.5vw, 2rem); — fluid typography <script src="jquery.js" integrity="sha384-abc..." crossorigin="anonymous"> includes a cryptographic hash. The browser refuses to execute the resource if it doesn't match, protecting against compromised CDNs. Always combine with crossorigin. Particularly important for third-party scripts you include from CDNs. Timing functions define the speed curve of transitions and animations:

ease – slow start, fast middle, slow end (default)
linear – constant speed
ease-in – slow start
ease-out – slow end
ease-in-out – slow start and end
cubic-bezier(x1,y1,x2,y2) – custom curve
steps(n) – discrete steps

Question 33 HTML CSS Fundamentals

What is the `mix-blend-mode` property?

flex: 1 is shorthand for flex: 1 1 0% — grow:1, shrink:1, basis:0%. The basis of 0% means each item starts from zero and grows proportionally to share space equally. flex: auto is 1 1 auto (start from content size). flex: none is 0 0 auto (fixed size, never grows/shrinks). flex: 1 0 200px starts at 200px, can grow, never shrinks. ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for users with disabilities. Key attributes include:

aria-label – provides an accessible name
aria-hidden – hides elements from screen readers
aria-live – announces dynamic content changes
role – defines the purpose of an element

Use ARIA only when native HTML semantics are insufficient. HTML elements belong to categories that describe how they may contain or be contained:

Flow content – most body content
Metadata content – lives in <head>
Phrasing content – inline text-level elements
Embedded content – images, video, audio
Interactive content – links, form controls

Rules define which categories can nest inside which. mix-blend-mode controls how an element's content blends with the background using compositing modes like multiply, screen, overlay, color-dodge.
Example: a yellow text that multiplies over an image to create a duotone effect. isolation: isolate on a parent limits blending to within its subtree.

Question 34 HTML CSS Fundamentals

What is the difference between `visibility: collapse` and `display: none`?

This trio describes a description list (formerly definition list):
<dl> wraps the list, <dt> is the term, <dd> is its description.
Example: a glossary or FAQ where each term needs an explanation. A single <dt> may be followed by multiple <dd>s, and vice versa. pattern defines a regular expression the input value must match to be valid:
<input type="text" pattern="[A-Za-z]{3}" title="Three letters">
The browser shows the value of title when validation fails. pattern only applies to text-like inputs and the value is matched against the entire string (implicit ^...$ anchors). display: none removes the element entirely from layout.
visibility: collapse removes the element visually but preserves its layout space (except inside table rows/columns, where it collapses the row/column entirely). It is rarely used outside tables but is occasionally useful for "loading" placeholders that shouldn't shift the layout. Key Grid container properties:

display: grid – activates grid layout
grid-template-columns – defines column sizes (e.g., 1fr 2fr 1fr)
grid-template-rows – defines row sizes
gap – space between grid cells
grid-template-areas – names regions of the grid
justify-items / align-items – aligns items within cells

Question 35 HTML CSS Fundamentals

What are the basic CSS Grid container properties?

Key Grid container properties:

display: grid – activates grid layout
grid-template-columns – defines column sizes (e.g., 1fr 2fr 1fr)
grid-template-rows – defines row sizes
gap – space between grid cells
grid-template-areas – names regions of the grid
justify-items / align-items – aligns items within cells

opacity: 0 — invisible but interactive and in layout; animatable; still in accessibility tree
visibility: hidden — invisible and non-interactive but space is preserved; not in accessibility tree
display: none — completely removed from layout, accessibility, and interaction

Use display: none for content that should not exist; visibility: hidden to preserve layout; opacity: 0 with pointer-events: none for animated reveals. <fieldset> groups related form controls, and <legend> provides a caption describing the group:

<fieldset>
  <legend>Shipping address</legend>
  ...inputs...
</fieldset>

It improves accessibility (screen readers announce the legend for each contained control), supports disabled propagation, and gives browsers a default visual style. contain: layout; tells the browser that the element's internal layout is independent of the rest of the page, allowing it to skip reflow calculations elsewhere. Values: layout, paint, size, style, content (shorthand for layout + paint + style), or strict (adds size). Powerful for performance in large pages or components.

Question 36 HTML CSS Fundamentals

How do you center an element both vertically and horizontally with Flexbox?

The simplest way to center an element with Flexbox:

display: flex;
justify-content: center;
align-items: center;

Apply these to the parent container. The parent must have a defined height (e.g., min-height: 100vh) for vertical centering to be visible. This centers all direct children. <abbr> marks an abbreviation or acronym. The full expansion belongs in the title attribute:
<abbr title="HyperText Markup Language">HTML</abbr>
Screen readers may announce the expansion on focus, and browsers often show it as a tooltip. Helps both accessibility and SEO. Both accept a list of selectors and match any element matched by any of them:
:is(h1, h2, h3) { margin: 0; }
The difference: :is() takes the specificity of its most specific argument, while :where() always has zero specificity. Use :where() for low-priority resets that should never override real styles. Void elements cannot have children or closing tags: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>.
Writing <br></br> is invalid — they are self-contained. This is an HTML-specific rule, not a general XML one.

Question 37 HTML CSS Fundamentals

What does `prefers-color-scheme` enable?

:nth-child() selects elements based on their position among siblings. It accepts formulas:

:nth-child(3) – selects the 3rd child
:nth-child(odd) – 1st, 3rd, 5th...
:nth-child(even) – 2nd, 4th, 6th...
:nth-child(3n) – every 3rd (3, 6, 9...)
:nth-child(3n+1) – 1st, 4th, 7th...

Great for styling table rows and lists with alternating patterns. loading="lazy" tells the browser to defer fetching the resource until it is near the viewport. It reduces initial page weight, saves bandwidth, and improves Largest Contentful Paint. Use it for below-the-fold images. Do not use it for above-the-fold (hero) images — eager loading is faster for content the user sees immediately. Void elements cannot have children or closing tags: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>.
Writing <br></br> is invalid — they are self-contained. This is an HTML-specific rule, not a general XML one. The prefers-color-scheme media feature detects whether the user has requested light or dark mode at the OS level:

@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --fg: #eee; }
}

Pair with CSS custom properties to switch entire themes automatically. Respecting this preference reduces eye strain and is now an expected baseline for modern sites.

Question 38 HTML CSS Fundamentals

What is the difference between :nth-child() and :nth-of-type()?

:focus matches whenever the element has focus (including mouse clicks).
:focus-visible matches only when focus is shown (typically keyboard navigation), avoiding the ring on mouse clicks.
:focus-within matches an element when any descendant has focus. Best practice: style keyboard focus with :focus-visible for better UX. <time> represents a specific period in time. Its datetime attribute carries a machine-readable value:
<time datetime="2026-05-13">May 13</time>
This helps search engines, browsers, and assistive tech understand and process dates (e.g., offering to add events to calendars). The visible content can be human-friendly while the attribute stays precise. :nth-child(n) counts all sibling elements regardless of type.
:nth-of-type(n) counts only siblings of the same element type.
Example: p:nth-child(2) selects a <p> only if it is the 2nd child overall. p:nth-of-type(2) selects the 2nd <p> regardless of other sibling types. Use :nth-of-type() when elements are mixed. Three strategies for scripts in the head:

Default: pause parsing, fetch, execute, resume parsing (blocks everything)
defer: fetch in parallel, execute after parsing finishes, in document order
async: fetch in parallel, execute as soon as ready, possibly mid-parse

For best perceived performance: put critical CSS inline, defer non-critical JS, and load analytics async.

Question 39 HTML CSS Fundamentals

What does `forced-colors` media query detect?

object-position controls where the focal point of an <img> sits inside its box when used with object-fit: cover or contain:
object-position: top right; keeps the top-right of the image visible when it's cropped. Useful for ensuring faces in portraits aren't cut off by responsive crops. @media (forced-colors: active) detects Windows High Contrast Mode and similar forced-color modes. Users with these settings expect browsers to use system colors:

@media (forced-colors: active) {
  .button { border: 1px solid CanvasText; background: ButtonFace; color: ButtonText; }
}

Special keywords Canvas, CanvasText, ButtonFace, ButtonText automatically reference the user's chosen system colors. minmax(min, max) defines a size range for grid tracks. The track will be at least the min and at most the max.
Example:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
This creates a responsive grid where columns are at least 250px wide but expand to fill available space. Combined with auto-fill, it creates responsive layouts without media queries. ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for users with disabilities. Key attributes include:

aria-label – provides an accessible name
aria-hidden – hides elements from screen readers
aria-live – announces dynamic content changes
role – defines the purpose of an element

Use ARIA only when native HTML semantics are insufficient.

Question 40 HTML CSS Fundamentals

What is the `ch` unit good for?

<cite> marks the title of a cited work: book, article, film, song. Example:
As described in <cite>The Pragmatic Programmer</cite>...
It is for work titles only; do not use it for a person's name. For person names use no element, or in HTML5.2+ a <span> with appropriate ARIA. Browser default styles italicize it. float removes an element from normal flow and places it to the left or right, with text wrapping around it. Problem: floated elements cause their parent to collapse.
Clearfix solution:

.parent::after {
  content: "";
  display: table;
  clear: both;
}

Modern layouts using Flexbox or Grid have largely replaced floats for page layout. The <head> contains metadata about the document that is not rendered as visible content: title, character set, viewport settings, CSS links, scripts, Open Graph tags, and SEO information. Only one <head> per document. Elements like <title>, <meta>, <link>, and <style> belong here. ch equals the width of the 0 glyph in the element's font. It's ideal for optimal line length in body text:
.article { max-width: 65ch; }
This produces ~65 characters per line, the recommended measure for readability. Avoids the brittleness of pixel-based widths that don't adapt to font changes.

Question 41 HTML CSS Fundamentals

What are the CSS logical properties and why use them?

<figure> wraps self-contained content like images, diagrams, or code snippets that are referenced in the main flow. <figcaption> provides a caption or legend for the figure.
Example:
<figure><img src="chart.png"><figcaption>Sales data</figcaption></figure> @property --x { syntax: '<number>'; inherits: false; initial-value: 0; } registers a custom property with a type, initial value, and inheritance behavior. The key benefit: the browser can animate the property natively (interpolating numbers smoothly) instead of treating the value as a string. Unlocks smooth animation of CSS variables. <picture> enables art direction in responsive images — serving different crops or compositions per breakpoint, not just different resolutions. It contains <source> elements with media queries and a fallback <img>:

<picture>
  <source media="(min-width:800px)" srcset="wide.jpg">
  <img src="narrow.jpg" alt="">
</picture>

Logical properties describe directions relative to the writing mode, not the viewport:

margin-inline-start (instead of margin-left)
padding-block (top + bottom)
border-inline-end
inset-inline-start

They automatically adapt to direction: rtl and vertical writing modes, essential for internationalization.

Question 42 HTML CSS Fundamentals

What is the purpose of the `<base>` element?

place-items is shorthand for align-items + justify-items:
place-items: center; centers items both ways.
place-content is shorthand for align-content + justify-content, distributing space around the grid itself. These shorthands reduce verbosity in common layouts. The order property changes only the visual order of items. The DOM source order stays the same, so:

Tab order follows DOM, not visual order (accessibility issue if abused)
Screen readers read DOM order
JavaScript iteration follows DOM order

Use order for minor visual tweaks. For major content reorganization, fix the DOM order instead. <base href="https://example.com/"> sets a default base URL for all relative links and images in the document. Useful when serving content from a CDN or subdirectory. Only one <base> is allowed, and it must appear in <head>. It also accepts a target attribute that affects all anchors. A minimal HTML5 page contains:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>
<body></body>
</html>

The lang attribute on <html> and a <meta charset> declaration are essential for accessibility and correct character encoding.

Question 43 HTML CSS Fundamentals

What are the main CSS combinators?

The <head> contains metadata about the document that is not rendered as visible content: title, character set, viewport settings, CSS links, scripts, Open Graph tags, and SEO information. Only one <head> per document. Elements like <title>, <meta>, <link>, and <style> belong here. Combinators define relationships between selectors:

Descendant (space) — A B: B anywhere inside A
Child (>) — A > B: B is a direct child of A
Adjacent sibling (+) — A + B: B immediately follows A
General sibling (~) — A ~ B: B is a later sibling of A

Each has different specificity behavior — combinators themselves add no specificity. box-sizing: border-box changes how the width and height of an element are calculated. Instead of adding padding and border on top of the specified width, they are included within it.
Example: An element with width: 200px; padding: 20px; border: 5px solid; will be exactly 200px wide total instead of 250px. margin is space outside the border, between this element and its neighbors. It collapses vertically with adjacent margins (the larger wins).
padding is space inside the border, between the border and the content. Padding does not collapse and is part of the element's box (it receives the background color). Both accept 1–4 values for top/right/bottom/left.

Question 44 HTML CSS Fundamentals

What is the `<wbr>` element?

preload hints how much video data to fetch on page load:

none — nothing until the user interacts
metadata — only duration/dimensions
auto — full file (browser may ignore on data-saver)

Use metadata for off-screen videos and none for hero backgrounds where playback may never start. <wbr> (word break opportunity) suggests where a long word may break across lines if needed, without forcing a break:
https://verylong.domain.com
Unlike <br>, the browser only breaks there when necessary, preserving readability. Useful for URLs and compound words. They enable scroll snapping for carousels and galleries:
.container { scroll-snap-type: x mandatory; overflow-x: scroll; }
.item { scroll-snap-align: start; }
The browser snaps items to positions after scrolling. mandatory forces snapping; proximity allows skipping. Pure CSS, no JS required for basic snap behavior. The order property changes only the visual order of items. The DOM source order stays the same, so:

Tab order follows DOM, not visual order (accessibility issue if abused)
Screen readers read DOM order
JavaScript iteration follows DOM order

Use order for minor visual tweaks. For major content reorganization, fix the DOM order instead.

Question 45 HTML CSS Fundamentals

What is the `draggable` attribute?

draggable="true" makes an element draggable via the HTML5 Drag and Drop API. Pair with event handlers (dragstart, dragover, drop) and call event.preventDefault() in dragover to allow dropping. Useful for kanban boards, file uploads, and reorderable lists. Key Flexbox item properties (applied to children):

flex-grow – how much the item grows relative to siblings (default 0)
flex-shrink – how much the item shrinks (default 1)
flex-basis – initial size before growing or shrinking
flex – shorthand for grow, shrink, basis (e.g., flex: 1 0 auto)
align-self – overrides align-items for this item
order – changes visual order

<small> represents side comments and fine print like copyright notices, legal disclaimers, or licensing terms. It is semantic (different from simply shrinking font size with CSS) and is typically rendered in smaller text by browsers. It should not be used purely to reduce font size for emphasis. <link rel="preload" href="font.woff2" as="font"> fetches a resource with high priority for the current page (e.g., a font needed above the fold).
<link rel="prefetch" href="next-page.html"> fetches a resource with low priority for the next navigation. Use preload for critical current-page resources and prefetch for likely-future resources.

Question 46 HTML CSS Fundamentals

What does the `loading="lazy"` attribute do on images and iframes?

loading="lazy" tells the browser to defer fetching the resource until it is near the viewport. It reduces initial page weight, saves bandwidth, and improves Largest Contentful Paint. Use it for below-the-fold images. Do not use it for above-the-fold (hero) images — eager loading is faster for content the user sees immediately. cubic-bezier(x1, y1, x2, y2) defines a custom speed curve by specifying two control points (P1 and P2) of a cubic Bézier curve. Values are usually between 0 and 1, but y can exceed 1 (overshoot/bounce) or go negative (anticipation).
Example: cubic-bezier(0.68, -0.55, 0.265, 1.55) creates a bouncy ease-out. Use tools like cubic-bezier.com to design curves visually. Logical properties describe directions relative to the writing mode, not the viewport:

margin-inline-start (instead of margin-left)
padding-block (top + bottom)
border-inline-end
inset-inline-start

They automatically adapt to direction: rtl and vertical writing modes, essential for internationalization. Key Grid container properties:

display: grid – activates grid layout
grid-template-columns – defines column sizes (e.g., 1fr 2fr 1fr)
grid-template-rows – defines row sizes
gap – space between grid cells
grid-template-areas – names regions of the grid
justify-items / align-items – aligns items within cells

Question 47 HTML CSS Fundamentals

What does the `<hr>` element represent?

clamp(min, preferred, max) sets a value that adapts between a minimum and maximum range. It is especially useful for fluid typography:
font-size: clamp(1rem, 2.5vw, 2rem);
This means the font size will be at least 1rem, ideally 2.5vw, but never more than 2rem. It replaces many media queries for responsive sizing. Timing functions define the speed curve of transitions and animations:

ease – slow start, fast middle, slow end (default)
linear – constant speed
ease-in – slow start
ease-out – slow end
ease-in-out – slow start and end
cubic-bezier(x1,y1,x2,y2) – custom curve
steps(n) – discrete steps

<link rel="canonical" href="https://example.com/page"> tells search engines which URL is the master version of a page. Use it when the same content is reachable via multiple URLs (with/without trailing slash, query parameters, or from different domains) to consolidate SEO ranking signals and prevent duplicate-content penalties. <hr> represents a thematic break between paragraphs or sections (a scene change in a story, a topic shift in a document). Historically used as a horizontal rule for visual styling, modern HTML treats it as semantic. Use CSS borders on elements for purely decorative dividers instead.

Question 48 HTML CSS Fundamentals

What is the `contain` CSS property?

A minimal HTML5 page contains:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>
<body></body>
</html>

The lang attribute on <html> and a <meta charset> declaration are essential for accessibility and correct character encoding. scroll-padding adds an offset inside a scroll container when snapping or scrolling to an anchor. Prevents content from sticking to the very edge:
.container { scroll-padding-top: 80px; } (clears a sticky header). Pairs well with scroll-snap-align and :target navigation. contain: layout; tells the browser that the element's internal layout is independent of the rest of the page, allowing it to skip reflow calculations elsewhere. Values: layout, paint, size, style, content (shorthand for layout + paint + style), or strict (adds size). Powerful for performance in large pages or components. Transitions fire transitionend once when the property finishes. Animations fire animationstart, animationend, and animationiteration (per loop). Use them in JS for chaining or cleaning up animation state. Note: animationend may not fire if the animation is canceled or removed mid-run — handle cleanup carefully.

Question 49 HTML CSS Fundamentals

What is the difference between `id` and `class` attributes?

When used in font-size: 1.5em, em refers to the parent's font-size.
When used in padding: 0.5em, em refers to the element's own font-size.
This self-referential behavior for padding makes components nicely scalable: change the button's font-size and its padding scales proportionally, even if nested in different parent sizes. id is unique per page (one element). class can appear on multiple elements and one element can have many classes.
CSS: #header selects by ID; .btn by class. JS: document.getElementById vs document.querySelectorAll. IDs add specificity and create global JS namespaces — prefer classes for styling and components. :has() is a parent selector: article:has(h2) matches any <article> containing an <h2>. Long awaited, it is now broadly supported. Powerful use cases: styling a card when its image has failed, highlighting a form section when an input is invalid, or theming based on child state. Often called the "parent selector" and unlocks many previously-impossible patterns. <time> represents a specific period in time. Its datetime attribute carries a machine-readable value:
<time datetime="2026-05-13">May 13</time>
This helps search engines, browsers, and assistive tech understand and process dates (e.g., offering to add events to calendars). The visible content can be human-friendly while the attribute stays precise.

Question 50 HTML CSS Fundamentals

What is the <article> element used for?

Pseudo-elements style specific parts of an element, written with ::. They differ from pseudo-classes which target states.

::before – inserts content before the element
::after – inserts content after the element
::first-line – styles the first line of text
::first-letter – styles the first letter
::placeholder – styles placeholder text

forwards makes the element retain the styles from the last keyframe after the animation finishes.
Without it, the element snaps back to its pre-animation state. backwards applies the first keyframe's styles during the delay period. both applies both behaviors. Use forwards for one-shot animations that should leave a visible end state (like a progress bar completing). pointer-events controls whether an element responds to mouse/touch events. Useful values:

auto — normal
none — click events pass through to underlying elements
visiblePainted — only painted visible parts (default for SVG)

Common use: making an overlay decorative without blocking clicks on the content below, or making a heading non-clickable when overlaid on a link. The <article> element represents a self-contained composition that could be independently distributed or reused. Examples include:

Blog posts
News articles
Forum posts
Product cards

Each <article> should make sense on its own, even outside the context of the page.

What is the mobile-first approach in responsive design?

What is the difference between 1fr and auto in CSS Grid?

What does the cubic-bezier() timing function represent?

What is the <video> tag's preload attribute?

What does will-change do and how should it be used?

What does the async attribute do on a <script> tag?

What is the subgrid value in CSS Grid?

What are CSS attribute selectors?

What is the <input type="file"> accept attribute used for?

What is the rel="canonical" link and why is it used?

What is the difference between :focus, :focus-visible, and :focus-within?

What is the <meta name="theme-color">?

What does prefers-reduced-motion do?

What are srcset and sizes for responsive images?

What is the difference between margin and padding?

What are the differences between <strong> and <b>?

What are the main CSS animation properties?

What is the cite element?

What is the transform property in CSS?

What does the <figure> and <figcaption> combination do?

What does as="image" with imagesrcset do in <link rel="preload">?

What does the pattern attribute do on an input?