🎨

HTML & CSS MCQ

Test your HTML & CSS knowledge with 100 multiple choice questions covering fundamentals to advanced concepts, with instant feedback and explanations.

100 Questions 40 Beginner 40 Intermediate 20 Advanced

What does HTML stand for?

Which HTML tag is used to define the largest heading?

Which tag is used to create a hyperlink?

Which attribute specifies the URL of the page a link goes to?

Which tag is used to insert an image?

What is the correct HTML element for inserting a line break?

Which CSS property changes the text color of an element?

How do you link an external CSS file to an HTML document?

Which CSS selector targets an element with id="header"?

Which CSS selector targets all elements with class="box"?

What does the CSS "box model" describe?

Which HTML tag is used to create an unordered (bulleted) list?

What is the purpose of the <head> element in an HTML document?

Which CSS property is used to change the font size of text?

What does the "alt" attribute on an <img> tag provide?

Which HTML element is used to define the title shown in the browser tab?

What is the correct syntax for a CSS comment?

Which CSS property controls the space between an element's border and its content?

What is the correct HTML for creating a checkbox?

Which CSS property is used to make text bold?

What does the CSS value "display: none" do to an element?

Which tag is used to define a table row?

What is the purpose of the <form> element?

Which CSS unit is relative to the font-size of the root element (<html>)?

What does the "class" attribute allow you to do?

Which property is used to set the background color of an element?

What is the correct way to add an inline style to an HTML element?

Which HTML5 element is used to define independent, self-contained content, like a blog post?

What does the CSS "text-align: center" property do?

Which doctype declaration is used for HTML5?

What does the CSS property "border-radius" do?

How do you make text italic using CSS?

Which attribute is used to specify that an input field must be filled out before submitting a form?

What does the CSS "cursor: pointer" property do?

Which HTML element represents the main navigation links of a page?

What is the purpose of the "viewport" meta tag, e.g. "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"?

Which CSS property sets the width of an element's border?

What does the HTML "<strong>" tag do?

What is the difference between <div> and <span>?

Which CSS property controls the stacking order of overlapping positioned elements?

What is the difference between "margin: 0 auto" centering a block element and "text-align: center"?

What does "box-sizing: border-box" change about how width and height are calculated?

What is the difference between "position: relative" and "position: absolute"?

What does CSS specificity determine, and which of these has the highest specificity: an inline style, an ID selector, or a class selector?

What is the purpose of CSS Flexbox's "justify-content" property?

What does the "align-items" property control in a flex container?

What is the difference between CSS Grid and Flexbox at a high level?

What does a CSS media query like "@media (max-width: 600px) { ... }" do?

What is the purpose of the ":hover" pseudo-class?

What is the difference between "em" and "rem" units in CSS?

What does the CSS "transition" property do?

What is semantic HTML, and why is it preferred?

What does the CSS pseudo-element "::before" do?

What is the effect of "overflow: hidden" on a container with content larger than its size?

What does the "fr" unit represent in CSS Grid, e.g. "grid-template-columns: 1fr 2fr"?

What is the purpose of the "alt", "title", and ARIA attributes for accessibility?

What does the CSS "calc()" function allow?

What is the difference between "visibility: hidden" and "display: none"?

What does the ":nth-child(2n)" pseudo-class select?

What is the purpose of the "data-*" custom attributes in HTML, e.g. "data-user-id=\"42\""?

What does "min-width" and "max-width" allow you to do for responsive design?

What does the HTML5 <video> element's "controls" attribute do?

What is "CSS specificity" calculated from when comparing two selectors like "#nav .link" and ".container a"?

What does the "flex-wrap: wrap" property do in a flex container?

What is the purpose of the <label> element in forms, and how does "for" attribute relate to it?

What does "white-space: nowrap" do to text content?

What is the difference between "<script>", "<script defer>", and "<script async>"?

What does the CSS "object-fit: cover" property do for an <img> or <video> element?

What is the purpose of CSS custom properties (variables), e.g. "--main-color: #336699;" used as "color: var(--main-color);"?

What does the "grid-template-areas" property allow you to do?

What does the "<picture>" element with multiple "<source>" tags enable?

What does the CSS "::placeholder" pseudo-element style?

What is the purpose of the "outline" CSS property, and why should it not simply be set to "none" for focused interactive elements?

What does "float: left" traditionally do, and why is it now mostly replaced by Flexbox/Grid for layout?

What is the difference between "<section>" and "<div>" elements semantically?

What does the CSS "gap" property do when used in a flex or grid container?

What does the HTML "<button type=\"submit\">" versus "<button type=\"button\">" difference matter for?

What does the CSS "background-size: cover" value do for a background image?

What is the purpose of the "rel=\"noopener noreferrer\"" attribute on a link opened with "target=\"_blank\""?

What does the CSS "filter" property allow, e.g. "filter: blur(5px)" or "filter: grayscale(100%)"?

What is the CSS "stacking context" and how is a new one created?

What is the difference between "reflow" and "repaint" in browser rendering, and why does this matter for performance?

What does "will-change: transform" hint to the browser, and what is a risk of overusing it?

What is the Cascade Layers feature (@layer) in modern CSS designed to solve?

What is "Critical CSS" and why might it be extracted and inlined in the <head>?

How does the CSS "contain" property (e.g. "contain: layout paint") help with rendering performance?

What is the purpose of "ARIA live regions" (e.g. "aria-live=\"polite\"")?

What is the difference between "rendering" via the "content-visibility: auto" CSS property compared to lazy-loading images via "loading=\"lazy\""?

What does the CSS ":is()" and ":where()" pseudo-classes allow, and what is the key difference between them?

What is a "Flash of Unstyled Content" (FOUC) and what commonly causes it?

What is the purpose of CSS "logical properties" like "margin-inline-start" versus physical properties like "margin-left"?

What does the "isolation: isolate" CSS property do, and when is it useful?

How does the CSS "@supports" rule enable progressive enhancement?

What is the significance of the "loading" attribute value "lazy" on an <iframe>, and what is a potential downside if applied to above-the-fold content?

What does the CSS "@font-face" rule's "font-display" property control, e.g. "font-display: swap"?

What is the difference between "inline", "inline-block", and "block" display values regarding layout behavior?

What problem does "container queries" (e.g. "@container (min-width: 400px) { ... }") solve compared to traditional media queries?

How does the browser's rendering pipeline order (Parse HTML → Build DOM/CSSOM → Render Tree → Layout → Paint → Composite) explain why CSS placed at the top of <head> is generally recommended?

What is the purpose of the "prefers-reduced-motion" media feature?

What does the CSS "aspect-ratio" property allow you to do, and how did developers commonly achieve this effect before it was introduced?