Flashcards · HTML & CSS · Free
HTML & CSS flashcards, generated for you.
Example HTML & CSS study cards to learn from right now — then generate a full set from your own notes (plus a practice quiz) and export to Quizlet or Anki. Free, no account needed.
Example HTML & CSS flashcards
What are the three main components of web development that HTML and CSS handle?
HTML provides structure/content, CSS handles styling/layout, and JavaScript adds interactivity. HTML is the skeleton, CSS is the appearance.
What is the correct syntax for a self-closing HTML tag?
Self-closing tags end with /> (e.g., <img src="image.jpg" /> or <br />). Common ones: img, input, br, hr, meta, link.
What's the difference between id and class selectors in CSS, and why does it matter?
id (#) has higher specificity (100 points) and should be unique per page; class (.) has lower specificity (10 points) and is reusable. id overrides class in specificity conflicts.
Why does margin: auto; only center horizontally, not vertically?
margin: auto; centers horizontally on block elements with a defined width because vertical margins collapse. Use flexbox (display: flex; justify-content: center; align-items: center;) to center both ways.
What does the CSS box model consist of, in order from outside to inside?
Margin → Border → Padding → Content. Remember: margin is outside the border, padding is inside. Use box-sizing: border-box; to include padding/border in width calculations.
What is the difference between display: none; and visibility: hidden; in CSS?
display: none; removes the element from the DOM layout entirely (takes up no space). visibility: hidden; hides it but reserves its space in the layout.
Why might a CSS rule not apply even though the syntax looks correct?
Common causes: specificity is too low (another rule wins), rule comes before a media query that overrides it, typo in selector, or the selector doesn't match the HTML. Use DevTools Inspector to debug.
What is the cascade in CSS, and which rule wins when there's a conflict?
The cascade applies rules in this order: browser defaults → external/internal stylesheets → inline styles → !important (highest priority). Specificity (id > class > element) breaks ties within the same source.
What is the difference between relative, absolute, and fixed positioning in CSS?
relative: positioned relative to its normal spot, takes up original space. absolute: positioned relative to nearest positioned ancestor (or body), removed from flow. fixed: positioned relative to viewport, stays in place on scroll.
Why do floated elements sometimes cause layout problems, and what's the modern alternative?
Floats were designed for text wrapping, not layout. They collapse parent height and can cause overlaps. Modern solution: use flexbox (display: flex;) or CSS Grid for layouts—they're flexible, cleaner, and avoid float gotchas.
Make your own HTML & CSS study set
Flashcards for related topics
Studying HTML & CSS to build with AI? MindloomHQ turns it into real skills — structured courses, agent projects, and certificates.
Explore MindloomHQ →