HTML and CSS Quiz
Questions: 16 · 10 minutes
1. A required email input contains text that does not match the email format. Which selector can target that input based on its current validation state?
input:invalid
input:empty
input:checked
input:disabled
2. A flex container uses the default row direction. Which declarations center its single child both horizontally and vertically?
text-align: center; vertical-align: middle;
justify-content: space-between; align-content: center;
align-self: center; margin-left: auto;
justify-content: center; align-items: center;
3. A text field has id=""email"". Which markup creates an explicitly associated label?
<label name=""email"">Email</label>
<label id=""email"">Email</label>
<label target=""email"">Email</label>
<label for=""email"">Email</label>
4. A stylesheet defines --brand-color: navy on the :root element. Which declaration uses that custom property as a heading's text color?
color: var(--brand-color);
color: custom(--brand-color);
color: value(--brand-color);
color: property(--brand-color);
5. Two CSS rules with equal specificity set different colors on the same element, and neither uses !important. What normally determines the applied color?
The rule with the shorter selector
The rule whose property value has more characters
The rule in the stylesheet loaded first
The rule that appears later in the applicable source order
6. Which CSS declaration removes an element from rendering and also removes the layout space it would have occupied?
display: none;
visibility: hidden;
opacity: 0;
position: relative;
7. An image should shrink when its container becomes narrow, retain its aspect ratio, and avoid growing beyond its intrinsic width. Which CSS is most suitable?
width: 100vw; height: 100%;
max-width: 100%; height: auto;
min-width: 100%; height: auto;
max-height: 100%; width: auto;
8. Inside a form, a plain <button> element has no type attribute. What behavior should you expect in standard HTML?
It resets every form control
It has no built-in form behavior
It behaves as type=""button""
It behaves as type=""submit""
9. Which line correctly loads an external stylesheet named styles.css from the same folder as the HTML file?
<link rel=""stylesheet"" href=""styles.css"">
<style src=""styles.css""></style>
<script type=""text/css"" href=""styles.css""></script>
<css link=""styles.css"">
10. You want a CSS Grid container to have three equal-width columns. Which declaration is the clearest fit?
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: auto auto;
11. A box has width: 300px, padding: 20px, and border: 5px solid. Which declaration makes the declared 300px width include its padding and border?
overflow: hidden
box-sizing: border-box
width: auto
display: inline-block
12. Which media query applies styles when the viewport is 600 CSS pixels wide or narrower?
@media (min-width: 600px)
@media (width-from: 600px)
@media (max-width: 600px)
@media screen-width <= 600px
13. A page contains a site header, navigation, one unique article, and a footer. Which element should wrap the page's primary unique content?
<section>
<main>
<aside>
<header>
14. An image shows a chart whose trend is important to understanding an article. What is the most appropriate alt attribute?
An empty alt attribute because charts are visual
The image file name, such as alt=""sales-chart.png""
A concise description of the chart's meaningful trend
The phrase alt=""image of a chart""
15. By default, what does 1rem represent in CSS?
The font size of the element's parent
One percent of the viewport width
The font size of the root element
The width of the character 0 in the current font
16. Given these rules, which selector normally wins for an element matching all four selectors: .note, p.note, .card .note, and #panel .note?
.card .note
#panel .note
p.note
.note