0
0
Intro to Computingfundamentals~20 mins

CSS for styling web pages in Intro to Computing - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepFlowTryChallengeDrawRecallReal
Challenge - 5 Problems
🎖️
CSS Styling Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
2:00remaining
Understanding CSS Box Model

Which part of the CSS box model is responsible for the space between the content and the border?

APadding
BMargin
CBorder
DContent
Attempts:
2 left
💡 Hint

Think about the space inside the box but outside the text or image.

❓ trace
intermediate
2:00remaining
CSS Specificity Calculation

Given the following CSS rules, which color will the <p> element have?

p { color: blue; }
#main p { color: red; }
.content p { color: green; }
ARed
BBlue
CGreen
DBlack (default)
Attempts:
2 left
💡 Hint

Remember that IDs have higher specificity than classes and element selectors.

❓ Comparison
advanced
2:00remaining
Difference Between Flexbox and Grid

Which statement best describes the main difference between CSS Flexbox and CSS Grid?

AFlexbox requires JavaScript; Grid does not.
BFlexbox is for one-dimensional layouts; Grid is for two-dimensional layouts.
CFlexbox controls colors; Grid controls fonts.
DFlexbox is used only for mobile; Grid is used only for desktop.
Attempts:
2 left
💡 Hint

Think about layout directions and dimensions.

🔍 Analysis
advanced
2:00remaining
CSS Cascade and Inheritance

What color will the <span> text be in this HTML and CSS?

<style>
body { color: black; }
div { color: blue; }
span { color: inherit; }
</style>
<body>
  <div>
    <span>Hello</span>
  </div>
</body>
ABlack
BInherit causes an error
CBlue
DDefault browser color
Attempts:
2 left
💡 Hint

Consider what 'inherit' means in CSS.

❓ identification
expert
2:00remaining
Identifying Accessibility Issues in CSS

Which CSS practice can cause accessibility problems for users with visual impairments?

AUsing high contrast colors for text and background
BUsing semantic HTML elements with CSS styling
CProviding keyboard focus styles for interactive elements
DUsing only color to convey important information
Attempts:
2 left
💡 Hint

Think about users who cannot distinguish colors well.