0
0
CSSmarkup~20 mins

First CSS stylesheet - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
CSS Stylesheet Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
📝 Syntax
intermediate
2:00remaining
What is the output of this CSS code?
Given the following CSS, what color will the text inside the <p> tag be?
CSS
p {
  color: blue;
  font-size: 1.5rem;
}
AThe text will be black.
BThe text will be red.
CThe text will be invisible.
DThe text will be blue.
Attempts:
2 left
💡 Hint
Look at the color property inside the p selector.
❓ selector
intermediate
2:00remaining
Which selector applies styles to all elements with class 'highlight'?
You want to style all elements that have the class 'highlight'. Which CSS selector should you use?
A#highlight { background-color: yellow; }
B.highlight { background-color: yellow; }
Chighlight { background-color: yellow; }
D*highlight { background-color: yellow; }
Attempts:
2 left
💡 Hint
Class selectors start with a dot (.)
❓ layout
advanced
2:00remaining
What layout will this CSS produce?
Consider this CSS applied to a container and its children. What layout will the children have?
CSS
.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
AChildren will be stacked vertically with space between them.
BChildren will be arranged horizontally with no space.
CChildren will overlap each other.
DChildren will be hidden.
Attempts:
2 left
💡 Hint
flex-direction: column stacks items vertically.
❓ accessibility
advanced
2:00remaining
Which CSS rule improves text accessibility?
Which CSS rule helps improve readability for users with visual impairments?
Abody { color: #000000; background-color: #ffffff; }
Bbody { color: #777777; background-color: #888888; }
Cbody { color: #cccccc; background-color: #dddddd; }
Dbody { color: #ffffff; background-color: #ffffff; }
Attempts:
2 left
💡 Hint
High contrast between text and background helps readability.
🧠 Conceptual
expert
2:00remaining
What happens if you omit the charset meta tag in your HTML when linking a CSS file?
You link a CSS file in your HTML but forget to include the <meta charset="UTF-8"> tag in the <head>. What is the likely effect?
AThe HTML page will not render at all.
BThe CSS will load normally without any issues.
CThe CSS file might not load correctly if it contains special characters.
DThe browser will automatically add the charset meta tag.
Attempts:
2 left
💡 Hint
Charset tells the browser how to read characters in files.