Unlock hundreds more features
Save your Quiz to the Dashboard
View and Export Results
Use AI to Create Quizzes and Analyse Results

OR
Sign inSign in with Facebook
Sign inSign in with Google
Quizzes > Computers & Technology > Programming & Software

Take the Ultimate HTML & CSS Test!

Ready to ace the HTML CSS exam? Dive in now!

Difficulty: Moderate
2-5mins
Learning OutcomesCheat Sheet
Paper art style illustration of a quiz layout with HTML CSS code snippets and test elements on a dark blue background

This HTML CSS test helps you practice real exam tasks and see your level fast. Work through tags, selectors, layout, and responsive rules with instant feedback, so you can spot gaps before the exam; take the quick practice quiz or try the longer online exam .

Which HTML declaration ensures standards mode rendering in modern browsers?
<!DOCTYPE html>
<!DOCTYPE HTML5>
<DOCTYPE html5>
<DOCTYPE HTML PUBLIC>
undefined
Which CSS property controls the space outside an element's border?
outline
padding
margin
border-spacing
undefined
What attribute declares the character encoding in HTML5?
<meta content="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta encoding="utf8">
undefined
Which CSS selector targets all <p> elements that are direct children of a <div>?
div p
div ~ p
div + p
div > p
undefined
Which attribute provides alternate text for an image when it cannot be displayed?
title
aria-label
caption
alt
undefined
Which HTML element defines a self-contained composition that could be independently distributed or reused?
<main>
<section>
<div>
<article>
undefined
What is the correct way to defer execution of an external script until HTML parsing is complete?
<script src="app.js" async></script>
<script defer src="app.js"></script>
<script src="app.js" type="module"></script>
<script src="app.js" late></script>
undefined
Which CSS selector matches an element with an attribute data-state equal to "open"?
[data-state~=open]
[data-state^=open]
[data-state=open]
[data-state|=open]
undefined
Which CSS property creates a new block formatting context without changing position?
visibility: hidden
opacity: 0
display: inline
overflow: hidden
undefined
Which HTML element groups controls with a caption using <legend>?
<form>
<fieldset>
<section>
<details>
undefined
Which statement about CSS specificity is correct?
A pseudo-element has higher specificity than an ID
An inline style has higher specificity than an ID selector
An ID selector has lower specificity than a class selector
A universal selector has higher specificity than a type selector
undefined
Which HTML element is appropriate for marking up a figure caption associated with an image?
<label>
<figcaption>
<caption>
<legend>
undefined
Which CSS property establishes a new stacking context besides position and opacity?
transform
visibility
float
display
undefined
Which HTML attribute ensures high-DPI images are chosen by the browser for responsive images?
sizes
srcset
density
resolution
undefined
In CSS Grid, which keyword automatically creates as many columns as fit the container using track list patterns?
auto-fit
repeat(auto)
auto-fill-columns
grid-auto-columns
undefined
Which CSS at-rule defines reusable custom property values scoped to the :root for theming?
@variables
No at-rule; use :root { --var: value }
@scope
@define
undefined
Which technique ensures text remains visible during webfont loading with minimal layout shift?
font-display: block
font-display: fallback
font-display: swap
font-display: optional
undefined
Which CSS feature allows scoping styles to a shadow DOM subtree without leaking to the document?
@layer
Shadow DOM encapsulation
:host-context(*) only
@scoped
undefined
Which grid property defines the size of implicitly created rows?
grid-auto-rows
grid-auto-flow
grid-row
grid-template-rows
undefined
Which CSS function computes a value using arithmetic with units at runtime?
var()
calc()
minmax()
env()
undefined
0

Study Outcomes

  1. Understand HTML Tags and Structure -

    After completing this html css test, you will identify common HTML tags and their correct usage in building web pages.

  2. Analyze CSS Selectors and Styling -

    Use the test html and css scenarios to distinguish between selectors and apply styling rules for consistent design.

  3. Apply Layout and Box Model Concepts -

    Implement layout techniques with Flexbox, Grid, and the CSS box model to create responsive and accessible page layouts.

  4. Interpret Instant Feedback to Correct Errors -

    Leverage instant feedback from the html css test to debug code snippets and reinforce best practices.

  5. Identify Knowledge Gaps for Exam Prep -

    Use insights from this html and css exam practice to pinpoint areas for improvement and boost your web development confidence.

Cheat Sheet

  1. Semantic HTML & Accessibility -

    Using semantic tags like <header>, <nav>, <main> and <footer> improves document structure and accessibility (W3C HTML5 Specification). ARIA roles and landmarks (e.g., role="banner") help screen readers navigate complex layouts. Remember "Semantic = Screen-friendly!" to reinforce the concept.

  2. CSS Specificity & Cascade -

    Specificity follows the ID (100) > class/attribute/pseudo-class (10) > element/pseudo-element (1) rule; inline styles trump all (1000) (MDN Web Docs). The last rule declared wins when specificity ties, so cascade order is key. A handy formula: "Inline + IDs × 100 + classes × 10 + elements × 1."

  3. Flexbox Fundamentals -

    Flex containers use display: flex; to align children with justify-content (main axis) and align-items (cross axis) properties (CSS-Tricks Flexbox Guide). Try justify-content: space-between; to evenly distribute items. Think "FLEXible = Easy Axis Control!" as a mnemonic.

  4. Box Model & Layout -

    The CSS box model consists of content, padding, border, and margin in that order (Mozilla Developer Network). Use box-sizing: border-box; to include padding and border in the element's width/height. Recall "Can People Buy More?" (Content, Padding, Border, Margin) to lock in the sequence.

  5. Responsive Design & Media Queries -

    Media queries adapt styles by viewport size, e.g., @media (max-width: 600px) { font-size: 14px; } (W3C Media Queries Level 4). Combine fluid grids (% or vw units) with breakpoints for seamless scaling. Remember "Mobile First!" to write queries in ascending order of screen width.

Make a Quiz (FREE) Copy & Edit This Quiz Create a Quiz with AI

Programming & Software Quizzes

Powered by: Quiz Maker