I85PREP
⌘ K
CIW Web Design study materials
CIW Web Design study resources

CIW Web Design practice questions

One question at a time. Build your CIW Web Design understanding.

First 50 of 200 questions. Each one lists the choices, the correct answer, and an explanation. The checker at the top of this page saves progress in this browser when it is available.

Continue in the practice tool above to load more questions, 50 at a time.

Question 1Web Design

A designer wants a single external stylesheet to control the appearance of every page in a site. Which HTML element and attribute pair accomplishes this?

  1. A <link> element in the head with rel="stylesheet" and href pointing to the CSS file Correct answer.
  2. A <script> element in the head with src pointing to the CSS file
  3. A <meta> element in the head with name="stylesheet" and content set to the CSS file
  4. A <style> element in the body containing @import rules for each page

Explanation

The <link> element placed in the document head with rel="stylesheet" and an href value loads an external CSS file and applies it to the page. Repeating that link on each page lets one stylesheet govern the whole site and keeps presentation separate from markup.

Question 2Web Design

Which CSS selector has the highest specificity among the following?

  1. nav ul li
  2. ul.menu
  3. #header Correct answer.
  4. body div

Explanation

Specificity is calculated from ID selectors, then classes and attributes, then element selectors. A single ID selector outweighs any number of class or element selectors, so #header wins against the others regardless of how many elements they chain.

Question 3Web Design

What is the primary purpose of the alt attribute on an <img> element?

  1. To specify a fallback image file if the original fails to load
  2. To provide a text alternative that describes the image when it cannot be perceived Correct answer.
  3. To improve the image's ranking in search engine results
  4. To set the caption text displayed beneath the image on the page

Explanation

The alt attribute supplies a textual equivalent of the image for users of screen readers and for situations where the image does not render. It is an accessibility requirement rather than a caption or a search optimization device.

Question 4Web Design

In the CSS box model, which area lies directly between the content and the border?

  1. Margin
  2. Padding Correct answer.
  3. Outline
  4. Border-radius

Explanation

The box model layers outward from content to padding, then border, then margin. Padding is the space inside the border that separates the border from the content itself.

Question 5Web Design

Which HTML5 element is the most semantically appropriate container for a site's primary navigation links?

  1. <aside>
  2. <section>
  3. <nav> Correct answer.
  4. <div>

Explanation

The <nav> element is defined to contain major navigation blocks such as menus and link lists. Using it conveys the role of the content to assistive technology and to search engines, which a generic container cannot do.

Question 6Web Design

A developer wants a form field to accept only a valid email address before submission. Which approach uses built-in HTML5 validation?

  1. Add a class named email to a text input
  2. Wrap the input in a <label> element
  3. Set the input's name attribute to email
  4. Set type="email" on the <input> element Correct answer.

Explanation

The email input type triggers the browser's native constraint validation, rejecting values that do not match the expected address pattern. Classes, names, and labels do not impose any validation behavior on their own.

Question 7Web Design

Which file format is best suited for a photograph on a web page when photographic detail must be preserved with efficient compression?

  1. JPEG Correct answer.
  2. GIF
  3. BMP
  4. SVG

Explanation

JPEG uses lossy compression designed for continuous-tone images such as photographs, producing small files with acceptable quality. The other formats are intended for limited color palettes, vector graphics, or uncompressed storage.

Question 8Web Design

What does the CSS declaration display: flex; applied to a container primarily enable?

  1. A one-dimensional layout system for distributing and aligning child items along a main axis Correct answer.
  2. Absolute positioning of children relative to the nearest positioned ancestor
  3. A grid of explicitly defined rows and columns for placing items in two dimensions
  4. Automatic conversion of child elements into inline-block elements

Explanation

Flexbox lays out children along a single main axis with control over spacing, order, and alignment on the cross axis. Two-dimensional placement with explicit rows and columns is the job of CSS Grid instead.

Question 9Web Design

A page has two competing rules: p { color: blue; } and .note { color: green; }, and a paragraph carries class="note". Which color applies?

  1. Green, because the rule written later in the file always wins
  2. Green, because a class selector outranks an element selector Correct answer.
  3. Blue, because the paragraph is the element being styled
  4. Blue, because element selectors are evaluated first

Explanation

When declarations conflict and no !important is involved, the browser compares specificity: a class selector has greater weight than a type selector. The class rule therefore overrides the element rule regardless of source order.

Question 10Web Design

Which statement accurately describes the difference between the id and class attributes in HTML?

  1. Both must be unique, but only classes can be targeted by CSS
  2. An id must be unique within a document, while a class may be reused on many elements Correct answer.
  3. An id may be reused, while a class must appear only once per page
  4. Both may be reused freely, but only ids can be targeted by JavaScript

Explanation

The id attribute identifies a single element and must not repeat in a valid document, which is why fragment links and scripts rely on it. The class attribute is designed for reuse so that one style or script behavior can apply to many elements.

Question 11Web Design

A designer sets width: 300px on a div that also has 20px padding and a 2px border on every side, with box-sizing left at its default. What is the element's total rendered width?

  1. 300px
  2. 324px
  3. 340px
  4. 344px Correct answer.

Explanation

With the default content-box model, the declared width covers only the content area. Padding and border are added on both sides, so 300 + 20 + 20 + 2 + 2 equals 344 pixels total.

Question 12Web Design

Which CSS technique most reliably centers a fixed-width block element horizontally within its parent?

  1. Set a width on the element and apply margin-left: auto and margin-right: auto Correct answer.
  2. Set text-align: center on the element itself
  3. Apply float: left and clear: both to the element
  4. Set position: static and left: 50% on the element

Explanation

For a block element with a defined width, equal automatic left and right margins distribute the leftover space evenly and center the box. Text alignment and floats affect inline content or flow, not the block's horizontal placement.

Question 13Web Design

What is the main advantage of using an external JavaScript file referenced with the defer attribute in the head?

  1. The script executes immediately, before any HTML is parsed
  2. The script is cached separately and therefore never re-downloaded
  3. The HTML parses without blocking, and the script executes after parsing completes Correct answer.
  4. The script runs only if the user interacts with the page

Explanation

The defer attribute tells the browser to download the script in parallel while continuing to parse the document, then execute it after parsing finishes and in document order. This avoids render-blocking while guaranteeing the DOM is available.

Question 14Web Design

Which HTTP status code indicates that a requested resource has permanently moved to a new URL, which is useful when restructuring a site?

  1. 500
  2. 200
  3. 301 Correct answer.
  4. 404

Explanation

A 301 response permanently redirects clients and search engines to the new location, transferring link equity during a site restructure. The other codes signal success, a missing resource, or a server error.

Question 15Web Design

Which markup correctly associates a text label with a form input for accessibility?

  1. <label>Email<input type="email"></label><span>Email</span>
  2. <label for="email">Email</label><input id="email" type="email"> Correct answer.
  3. <input type="email" placeholder="Email"><label>Email</label>
  4. <div class="label">Email</div><input type="email">

Explanation

The for attribute on a <label> must match the id of the associated control, which programmatically links the label to the input. Clicking the label then focuses the field, and assistive technology announces the label with the control.

Question 16Web Design

Which CSS unit is relative to the root element's font size and is often preferred for scalable typography?

  1. vh
  2. px
  3. rem Correct answer.
  4. pt

Explanation

The rem unit equals the computed font size of the root element, so changing the root size scales all rem-based values consistently. This supports user preferences better than fixed pixel or point sizes.

Question 17Web Design

A responsive layout should show three columns on wide screens and one column on narrow screens. Which CSS feature is designed for this?

  1. Media queries that apply different grid-template-columns values at breakpoints Correct answer.
  2. Inline styles that set fixed pixel widths for each column
  3. A table element with a fixed width in pixels
  4. Absolute positioning of each column at calculated pixel offsets

Explanation

Media queries evaluate viewport characteristics and apply conditional rule sets, letting a grid switch from three columns to one at a chosen breakpoint. Fixed pixel layouts and absolute positioning do not adapt to viewport changes.

Question 18Web Design

Which statement best describes the role of the DOCTYPE declaration in an HTML5 document?

  1. It defines the character encoding used by the document
  2. It tells the browser to render the page in standards mode rather than quirks mode Correct answer.
  3. It links the document to an external schema for validation
  4. It declares the language of the document's content

Explanation

A document beginning with the HTML5 doctype triggers standards mode, in which browsers apply modern layout rules. Without it, browsers may fall back to quirks mode and render CSS inconsistently.

Question 19Web Design

A navigation bar built with a list is styled display: flex on the ul. Which property distributes the list items evenly along the horizontal main axis?

  1. align-items: center
  2. flex-wrap: wrap
  3. flex-direction: column
  4. justify-content: space-between Correct answer.

Explanation

With the default row direction, justify-content controls distribution along the main axis, and space-between pushes items to the ends with equal gaps. The other properties affect cross-axis alignment, axis direction, or wrapping.

Question 20Web Design

A developer uses CSS Grid and wants an item to span the first two columns of a three-column grid. Which declaration achieves this?

  1. grid-column: 1 / 3; Correct answer.
  2. grid-row: 1 / 3;
  3. justify-self: span 2;
  4. grid-area: 2;

Explanation

Grid line numbering places an item from line 1 to line 3, which covers columns one and two. The grid-column shorthand sets both the start and end column lines.

Question 21Web Design

Why is it problematic to convey required-field status on a form using color alone?

  1. Color increases the page's file size beyond acceptable limits
  2. Color cannot be set with CSS on input elements
  3. Browsers ignore color applied to form controls
  4. Users with color vision deficiencies may not perceive the distinction, so a text or icon cue is also needed Correct answer.

Explanation

Accessibility guidelines require that information not depend on color perception alone, since some users cannot distinguish the chosen hues. Pairing color with a textual marker or icon ensures the required status is conveyed to everyone.

Question 22Web Design

A site must support right-to-left languages such as Arabic. Which CSS and HTML practice best supports this?

  1. Set dir="rtl" on the html element and use logical properties such as margin-inline-start Correct answer.
  2. Hard-code left and right values for every element and mirror them by hand
  3. Apply transform: scaleX(-1) to the whole page body
  4. Use only absolute positioning so elements can be placed manually

Explanation

The dir attribute establishes the base text direction, and logical properties like margin-inline-start resolve to the correct physical side automatically. This lets one stylesheet serve both left-to-right and right-to-left locales without duplicating rules.

Question 23Web Design

A page loads three render-blocking stylesheets and a large script in the head. Which change most improves first paint without altering visual design?

  1. Keep critical styles inline and load the remaining stylesheets asynchronously while deferring the script Correct answer.
  2. Increase the script size so it downloads in a single request
  3. Move all stylesheets to the end of the body and remove the script
  4. Convert every stylesheet rule to an inline style attribute on each element

Explanation

Render-blocking resources delay first paint because the browser waits for them before drawing. Inlining the critical CSS needed for above-the-fold content and deferring non-critical CSS and scripts lets the page paint sooner while preserving the final appearance.

Question 24Web Design

A designer wants a decorative background image to remain fixed relative to the viewport while content scrolls over it. Which CSS declaration achieves this?

  1. background-position: center;
  2. background-size: cover;
  3. background-attachment: fixed; Correct answer.
  4. background-repeat: no-repeat;

Explanation

The background-attachment property controls whether a background scrolls with the content or stays fixed to the viewport. Setting it to fixed pins the image while the page scrolls above it.

Question 25Web Design

Which practice best ensures that a responsive image does not download an unnecessarily large file on a small screen?

  1. Use a background image with background-size: cover
  2. Set a single high-resolution image as the src for all viewports
  3. Use the srcset and sizes attributes so the browser selects an appropriately sized source Correct answer.
  4. Apply width: 100% to a large image and rely on CSS scaling

Explanation

The srcset and sizes attributes give the browser a set of candidate sources and layout hints, letting it choose the file that fits the viewport and pixel density. CSS scaling alone still downloads the full-size file.

Question 26Web Design

A web designer wants to add a comment inside a CSS rule set that will not affect rendering. Which syntax is correct?

  1. // adjust spacing
  2. # adjust spacing
  3. <!-- adjust spacing -->
  4. /* adjust spacing */ Correct answer.

Explanation

CSS uses C-style block comments that begin with a slash-asterisk and end with an asterisk-slash. These comments can appear anywhere in a stylesheet, including inside a declaration block, and the browser ignores their contents entirely.

Question 27Web Design

Which HTML element is the most semantically appropriate container for a site's primary navigation links?

  1. <div class="nav">
  2. <nav> Correct answer.
  3. <menu>
  4. <section>

Explanation

The nav element is a semantic landmark that identifies a major block of navigation links, allowing assistive technology to expose it directly to users. A div with a class conveys no meaning to screen readers unless ARIA roles are added manually.

Question 28Web Design

A designer wants every paragraph inside an article to have a slightly larger line height without affecting paragraphs elsewhere on the page. Which selector achieves this?

  1. article > p { line-height: 1.6; }
  2. article, p { line-height: 1.6; }
  3. article p { line-height: 1.6; } Correct answer.
  4. p article { line-height: 1.6; }

Explanation

A descendant selector written as article p matches any paragraph nested anywhere inside an article element. This scopes the line-height change to the intended region while leaving other paragraphs unaffected.

Question 29Web Design

Which attribute on an img element provides a text alternative that screen readers can announce?

  1. alt Correct answer.
  2. title
  3. aria-label
  4. longdesc

Explanation

The alt attribute supplies the text alternative for an image and is the standard mechanism screen readers use when the image cannot be perceived. It should describe the image's purpose concisely, or be empty for purely decorative images.

Question 30Web Design

Which HTML element should be used to mark up a self-contained blog post that could be syndicated independently of the rest of the page?

  1. <div>
  2. <aside>
  3. <section>
  4. <article> Correct answer.

Explanation

The article element represents a complete, self-contained composition that would make sense distributed on its own, such as a blog post or news story. This semantic meaning helps browsers, search engines, and assistive technology understand the content structure.

Question 31Web Design

A stylesheet contains the rule h1 { color: navy; } and later the rule h1 { color: teal; } with equal specificity. Which color will an h1 display?

  1. A blend of navy and teal
  2. teal Correct answer.
  3. navy
  4. The browser default color

Explanation

When two rules have equal specificity, the one that appears later in the source order wins the cascade. Because the teal rule comes after the navy rule, the h1 will render in teal.

Question 32Web Design

Which value of the CSS position property removes an element from normal flow and positions it relative to its nearest positioned ancestor?

  1. static
  2. relative
  3. absolute Correct answer.
  4. sticky

Explanation

An absolutely positioned element is taken out of normal document flow and its offsets are calculated from the padding box of the nearest ancestor that is not statically positioned. If no positioned ancestor exists, it is placed relative to the initial containing block.

Question 33Web Design

Which HTML5 input type is designed to let users pick a date using a browser-provided date picker?

  1. type="date" Correct answer.
  2. type="datetime-local"
  3. type="text"
  4. type="calendar"

Explanation

The date input type produces a control for entering a calendar date and browsers commonly render a date picker. It also provides built-in validation and a machine-readable value format.

Question 34Web Design

A designer wants to apply a style only when the viewport is 600 pixels wide or narrower. Which media query is correct?

  1. @media (min-width: 600px) { ... }
  2. @media (width = 600px) { ... }
  3. @media (max-width: 600px) { ... } Correct answer.
  4. @media screen and width 600px { ... }

Explanation

The max-width media feature matches viewports whose width is less than or equal to the specified value, which is the standard way to target small screens. The rule inside the block then applies only while that condition is true.

Question 35Web Design

Which CSS property controls the order in which flex items appear along the main axis without changing the HTML source order?

  1. align-items
  2. flex-direction
  3. justify-content
  4. order Correct answer.

Explanation

The order property assigns a numeric weight to flex items, and items are laid out in ascending order of that value regardless of their source position. This changes visual order only, so assistive technology and keyboard navigation still follow the DOM.

Question 36Web Design

A page includes a decorative icon that should be ignored by screen readers. Which markup best achieves this?

  1. <img src="icon.svg" alt="" role="presentation"> Correct answer.
  2. <img src="icon.svg" title="icon">
  3. <img src="icon.svg" alt="decorative icon">
  4. <img src="icon.svg" aria-label="decorative">

Explanation

An empty alt attribute removes the image from the accessibility tree in most contexts, and adding role="presentation" reinforces that it is purely decorative. This prevents screen reader users from hearing redundant or meaningless image announcements.

Question 37Web Design

Which HTML attribute should be added to a script element to ensure it executes after the document has been parsed while preserving the order of multiple scripts?

  1. async
  2. defer Correct answer.
  3. loading="lazy"
  4. type="module"

Explanation

The defer attribute tells the browser to download the script in parallel but execute it only after the document has finished parsing, and deferred scripts run in document order. This avoids blocking HTML parsing while keeping dependencies in sequence.

Question 38Web Design

A developer writes a CSS rule with the selector .card .title. Which elements does it match?

  1. Only elements with class title that are direct children of an element with class card
  2. Any element with class card or class title
  3. The element that has both class card and class title
  4. Elements with class title that are descendants of an element with class card Correct answer.

Explanation

A space between two class selectors is the descendant combinator, so the rule matches any element with class title located anywhere inside an ancestor with class card. Depth of nesting does not matter for this combinator.

Question 39Web Design

Which CSS feature allows a designer to define reusable values such as a brand color once and reference them throughout a stylesheet?

  1. The @import at-rule
  2. The !important flag
  3. Custom properties declared with --brand-color Correct answer.
  4. Inline style attributes

Explanation

Custom properties, often called CSS variables, store a value that can be referenced with the var() function in many declarations. Changing the custom property in one place updates every rule that uses it.

Question 40Web Design

A table displays sales figures, and the designer wants screen readers to announce which column and row each cell belongs to. Which markup practice supports this?

  1. Applying a different background color to header cells
  2. Using th elements with the scope attribute for row and column headers Correct answer.
  3. Setting the table width to 100 percent
  4. Adding a caption element only

Explanation

The scope attribute on a th element explicitly tells assistive technology whether the header applies to a row, a column, or a group. This lets screen readers announce the correct header context when a user navigates between data cells.

Question 41Web Design

Which HTTP method is defined as safe and idempotent and is typically used by a browser to retrieve a web page?

  1. DELETE
  2. GET Correct answer.
  3. POST
  4. PUT

Explanation

GET is defined as a safe and idempotent method intended to retrieve a representation of a resource without changing server state. Browsers use GET for ordinary page requests and for links.

Question 42Web Design

A designer wants an element to fade from fully transparent to fully opaque when the page loads using only CSS. Which pair of features is required?

  1. A transform and a box-shadow
  2. A media query and a pseudo-element
  3. A transition and a changed opacity value
  4. A keyframe animation and the animation property Correct answer.

Explanation

A load-time fade that runs automatically without a state change is best implemented with @keyframes that animate opacity and an animation declaration on the element. Transitions require a property change triggered by a state such as hover or a class toggle.

Question 43Web Design

Which statement best describes the purpose of the viewport meta tag in a responsive page?

  1. It compresses images for faster delivery on mobile networks
  2. It declares the character encoding used by the document
  3. It sets the page's layout viewport width and initial scale on mobile browsers Correct answer.
  4. It caches the page for offline viewing

Explanation

The viewport meta tag, commonly written as width=device-width, initial-scale=1, tells mobile browsers to set the layout viewport to the device width and start at 100 percent zoom. Without it, mobile browsers may use a wider virtual viewport and shrink the page.

Question 44Web Design

A form uses the required attribute on an input. What is the default browser behavior when the user submits the form with that field empty?

  1. The form submits and the server must reject it
  2. The field is silently filled with a default value
  3. The page reloads without any message
  4. The browser blocks submission and shows a validation message Correct answer.

Explanation

The required attribute enables built-in constraint validation, so the browser prevents submission and displays a validation message until the field has a value. Server-side validation is still necessary because client-side checks can be bypassed.

Question 45Web Design

Which CSS declaration creates a grid container whose columns each take an equal share of the available space, regardless of how many columns are defined?

  1. grid-template-columns: 1fr 1fr 1fr;
  2. grid-template-columns: repeat(3, 1fr);
  3. grid-template-columns: repeat(auto-fit, 1fr); Correct answer.
  4. grid-auto-flow: column;

Explanation

Using repeat with auto-fit and 1fr creates as many equal-width tracks as will fit in the container, and the fr unit distributes the available space. This adapts the column count to the container width without media queries.

Question 46Web Design

A developer needs to apply a style to every other row of a data table to improve readability. Which selector is most appropriate?

  1. tr:first-child
  2. tr:hover
  3. tr:last-of-type
  4. tr:nth-child(even) Correct answer.

Explanation

The :nth-child(even) pseudo-class matches rows in even positions among their siblings, producing a striped effect. This is a common technique for improving row tracking in dense tables.

Question 47Web Design

Which document structure best supports search engines and assistive technology in understanding the main content of a page?

  1. Placing all content inside nested div elements with descriptive class names
  2. Relying on a table layout to position the page regions
  3. Wrapping the primary content in a main element and using headings in hierarchical order Correct answer.
  4. Using multiple h1 elements for every section to emphasize keywords

Explanation

The main element identifies the dominant content of the document, and a logical heading hierarchy gives both search engines and screen readers an outline of the page. These semantics are more reliable than presentational markup.

Question 48Web Design

A page uses a web font declared with @font-face. Which practice best reduces the flash of invisible text while the font downloads?

  1. Setting font-display: swap in the @font-face rule Correct answer.
  2. Embedding the font as a base64 data URI in the CSS
  3. Adding !important to every font-family declaration
  4. Loading the font with a synchronous script in the head

Explanation

The font-display descriptor controls how a browser handles the period before a web font is available, and the swap value shows fallback text immediately and replaces it when the font loads. This avoids invisible text during the download.

Question 49Web Design

A layout uses position: sticky on a sidebar inside a scrolling container. The sidebar fails to stick. Which condition is the most likely cause?

  1. The sidebar uses a percentage width instead of a fixed pixel width
  2. The sidebar's parent has overflow: hidden, creating a scrolling context that clips the sticky behavior Correct answer.
  3. The sidebar has a background color applied
  4. The sidebar has a z-index value greater than zero

Explanation

Sticky positioning is constrained by the nearest ancestor with a scrolling mechanism, and overflow: hidden on a parent can prevent the element from sticking as expected. The sticky element also needs a top, right, bottom, or left offset to define its threshold.

Question 50Web Design

A developer wants to ensure that a custom interactive widget built from div elements is operable by keyboard and announced correctly. Which combination is most appropriate?

  1. Add a click handler only and rely on mouse interaction
  2. Add the title attribute with instructions and no role
  3. Add tabindex="0", an appropriate ARIA role, and key event handlers for Enter and Space Correct answer.
  4. Add a CSS hover style to indicate interactivity

Explanation

Native interactive elements provide keyboard and role semantics automatically, so a div-based widget must replicate them with tabindex, an appropriate role, and keyboard event handling. Without those, keyboard and screen reader users cannot operate or identify the control.