cssbeginner
CSS Basics Quiz
Selectors, properties, colors, box model, and core CSS concepts.
7 questions
By EZ4Code Team
1. Which selector targets an HTML element by its id?
#header { color: red; }#header (hash)
.header (dot)
header (no prefix)
*header
Explanation: `#id` selects by id (e.g. `<div id="header">`). `.class` selects by class. `header` selects by tag name. `*` is the universal selector. IDs must be unique per page; classes can be reused.
2. What does the CSS box model consist of?
content, padding, border, margin
content, spacing, line, gap
width, height, color, position
border, shadow, radius, outline
Explanation: The box model has four layers from inside out: content (the actual content), padding (space inside the border), border (the border itself), and margin (space outside the border). `box-sizing: border-box` makes width/height include padding and border.
3. Which property changes the text color?
color
text-color
font-color
foreground
Explanation: `color` sets the text color. There's no `text-color` or `font-color` property. `background-color` sets the background. `color` accepts named colors (`red`), hex (`#ff0000`), rgb/rgba, hsl/hsla, and more.
4. What does `display: none` do?
Hides the element; it takes no space in the layout
Makes the element invisible but it still takes space
Changes the element to a block
Removes the element from the DOM
Explanation: `display: none` removes the element from the layout entirely — it takes no space and is not rendered. The element is still in the DOM. To hide but keep space, use `visibility: hidden` or `opacity: 0`.
5. Which unit is relative to the parent element's font size?
em
rem
px
vh
Explanation: `em` is relative to the parent's font size (or the element's own font size for the `font-size` property itself). `rem` is relative to the root (`<html>`) font size. `px` is absolute. `vh` is 1% of viewport height.
6. What does the `:hover` pseudo-class do?
button:hover { background: blue; }Applies styles when the user hovers over the element
Applies styles when the element is clicked
Applies styles on mobile devices
Applies styles to the first child
Explanation: `:hover` applies styles when the cursor is over the element. It's commonly used for buttons and links. `:active` is for when the element is being clicked. `:focus` is when the element has keyboard focus. `:first-child` targets the first child.
7. Which CSS property rounds the corners of an element?
border-radius
corner-radius
round-corners
border-corner
Explanation: `border-radius` rounds corners. You can set all four at once (`border-radius: 8px`) or individually (`border-top-left-radius: 8px`). A value of `50%` on a square element makes it a circle.