CSS Beginner Quiz
40 questions on CSS for Beginners.
Question 1: What does CSS stand for?
- A. Colorful Style Sheets
- B. Creative Style Sheets
- C. Cascading Style Sheets β (correct answer)
- D. Computer Style Sheets
Explanation: CSS is the language used to style and layout web pages, and the rules "cascade" down from parent to child elements.
Question 2: Which HTML tag is used to define an internal style sheet?
- A.
<style> β (correct answer)
- B.
<script>
- C.
<css>
- D.
<link>
Explanation: The <style> tag is placed inside the HTML <head> section to define internal CSS rules.
Question 3: How do you add comments in a CSS file?
- A.
// this is a comment
- B.
/* this is a comment */ β (correct answer)
- C.
<!-- this is a comment -->
- D.
' this is a comment
Explanation: In CSS, multi-line and single-line comments are both written between /* and */.
Question 4: Which CSS property changes the text color?
- A. font-color
- B. text-color
- C. color β (correct answer)
- D. foreground-color
Explanation: The color property is used exclusively to set the color of text in CSS.
Question 5: Which CSS property controls the text size?
- A. text-size
- B. font-size β (correct answer)
- C. text-style
- D. font-weight
Explanation: The font-size property determines how large or small text appears (e.g., in pixels, rems, or ems).
Question 6: How do you select an element with id="demo"?
- A.
.demo
- B.
#demo β (correct answer)
- C.
demo
- D.
*demo
Explanation: In CSS, the hash # symbol targets elements by their ID.
Question 7: How do you select elements with class="test"?
- A.
#test
- B.
.test β (correct answer)
- C.
test
- D.
*test
Explanation: In CSS, the dot . symbol targets elements by their class name.
Question 8: Which property is used to change the background color?
- A. bgcolor
- B. color
- C. background-color β (correct answer)
- D. bg-color
Explanation: background-color sets the solid color behind an element's content, padding, and border.
Question 9: How do you make text bold in CSS?
- A.
font-weight: bold; β (correct answer)
- B.
font-style: bold;
- C.
text-weight: bold;
- D.
font-family: bold;
Explanation: font-weight determines the thickness of the text characters.
Question 10: How do you remove the underline from a hyperlink?
- A.
text-decoration: no-underline;
- B.
text-decoration: none; β (correct answer)
- C.
font-style: normal;
- D.
text-transform: none;
Explanation: text-decoration controls lines drawn under, over, or through text. Setting it to none removes default link underlines.
Question 11: Which property is used to create space OUTSIDE the border of an element?
- A. spacing
- B. padding
- C. margin β (correct answer)
- D. gap
Explanation: According to the Box Model, margin clears an area outside the border, pushing other elements away.
Question 12: Which property is used to create space INSIDE the border, around the content?
- A. spacing
- B. padding β (correct answer)
- C. margin
- D. inner-space
Explanation: Padding is the transparent space between the actual content and the element's border.
Question 13: How do you center align text?
- A.
align: center;
- B.
text-align: middle;
- C.
text-align: center; β (correct answer)
- D.
font-align: center;
Explanation: text-align aligns the inline content (like text or images) within a block-level container.
Question 14: Which CSS property makes an image fully rounded (a perfect circle)?
- A.
border-radius: 50%; β (correct answer)
- B.
border-round: true;
- C.
corner-radius: 100px;
- D.
border-radius: circular;
Explanation: Applying a border-radius of 50% to a square element turns it into a perfect circle.
Question 15: What is the default value of the position property?
- A. relative
- B. fixed
- C. absolute
- D. static β (correct answer)
Explanation: All elements are position: static by default, meaning they flow naturally down the page.
Question 16: Which CSS property is used to change the font of an element?
- A. font-type
- B. font-family β (correct answer)
- C. font-style
- D. typeface
Explanation: font-family allows you to specify the typeface (like Arial or Times New Roman).
Question 17: How do you select all <p> elements inside a <div> element?
- A.
div p β (correct answer)
- B.
div.p
- C.
div + p
- D.
div > p
Explanation: A space between selectors acts as a descendant combinator, selecting all <p> tags anywhere inside the <div>.
Question 18: Which property specifies the transparency of an element?
- A. transparent
- B. opacity β (correct answer)
- C. visibility
- D. display
Explanation: opacity accepts a value from 0.0 (fully transparent) to 1.0 (fully opaque).
Question 19: Which of the following creates a Flexbox container?
- A.
display: flexbox;
- B.
layout: flex;
- C.
display: flex; β (correct answer)
- D.
align: flex;
Explanation: Setting display: flex on a container turns its direct children into flex items.
Question 20: In Flexbox, which property aligns items horizontally along the main row axis?
- A. align-items
- B. justify-content β (correct answer)
- C. flex-direction
- D. align-content
Explanation: justify-content distributes space between and around flex items along the main axis.
Question 21: What does box-sizing: border-box; do?
- A. It adds a box shadow to the element.
- B. It ensures padding and borders are included in the element's total width and height. β (correct answer)
- C. It forces the element to have a solid border.
- D. It prevents the element from overflowing its container.
Explanation: This is a crucial layout fix. Without it, adding padding increases the total size of the element, breaking layouts.
Question 22: Which selector has the HIGHEST specificity?
- A.
.header-class (Class)
- B.
h1 (Element)
- C.
#main-title (ID) β (correct answer)
- D.
header h1 (Descendant)
Explanation: IDs have a higher specificity score than classes, elements, or descendant selectors.
Question 23: What does the z-index property control?
- A. The horizontal alignment.
- B. The zoom level of the page.
- C. The stacking order of overlapping elements (front to back). β (correct answer)
- D. The index of items in a CSS Grid.
Explanation: Elements with a higher z-index will appear on top of elements with a lower z-index. It only works on positioned elements.
Question 24: How do you create a CSS variable?
- A.
$main-color: red;
- B.
@var main-color: red;
- C.
--main-color: red; β (correct answer)
- D.
var(--main-color) = red;
Explanation: CSS custom properties (variables) must begin with two dashes (--).
Question 25: Which value for the position property removes an element from the normal document flow and positions it relative to its closest positioned ancestor?
- A. static
- B. relative
- C. absolute β (correct answer)
- D. fixed
Explanation: absolute positioning pulls the item out of the flow entirely, acting like a sticker you can place anywhere within its parent.
Question 26: What CSS rule is used to apply styles only for specific screen sizes (Responsive Design)?
- A.
@screen
- B.
@media β (correct answer)
- C.
@responsive
- D.
@viewport
Explanation: Media queries (@media) allow you to conditionally apply CSS based on screen width, height, or orientation.
Question 27: In CSS Grid, which property distributes available space dynamically?
- A.
px
- B.
em
- C.
%
- D.
fr β (correct answer)
Explanation: The fractional unit (fr) represents a fraction of the available space in the grid container.
Question 28: How do you select an element ONLY when the user's mouse is over it?
- A.
:focus
- B.
:active
- C.
:hover β (correct answer)
- D.
::selection
Explanation: :hover is a pseudo-class used to define state changes (like button color) when interacted with by a mouse.
Question 29: What does display: none; do?
- A. It makes the element invisible but it still takes up space.
- B. It completely removes the element from the document layout. β (correct answer)
- C. It sets the element's opacity to 0.
- D. It pushes the element off-screen.
Explanation: Unlike visibility: hidden, display: none behaves as if the element does not exist on the page at all.
Question 30: How do you change the bullet style of a list to a square?
- A.
list-type: square;
- B.
list-style-type: square; β (correct answer)
- C.
bullet-style: square;
- D.
li-style: square;
Explanation: list-style-type changes the marker of list items (e.g., disc, circle, square, or none).
Question 31: What is the effect of transition: all 0.3s ease;?
- A. It animates changes to CSS properties smoothly over 0.3 seconds. β (correct answer)
- B. It delays the loading of the element by 0.3 seconds.
- C. It moves the element 0.3 pixels to the right.
- D. It creates an infinite spinning animation.
Explanation: The transition property provides a way to control animation speed when changing CSS states.
Question 32: Which property forces an element to stay visible at the top of the screen even when scrolling down?
- A.
position: fixed; β (correct answer)
- B.
position: relative;
- C.
position: static;
- D.
position: absolute;
Explanation: fixed positions an element relative to the browser window itself, ignoring scrolling.
Question 33: What is the gap property used for in modern CSS?
- A. Creating space between words in a paragraph.
- B. Creating space between flexbox or grid items without using margins. β (correct answer)
- C. Adding a blank line between blocks of code.
- D. Defining the space between a border and the content.
Explanation: gap replaces the need for complex margin math inside Flexbox and Grid containers.
Question 34: How do you select the *first* <p> element inside a <div>?
- A.
div p:first
- B.
div p:first-child β (correct answer)
- C.
div p:one
- D.
div > p1
Explanation: The :first-child pseudo-class represents the first element among a group of sibling elements.
Question 35: What is vh a measurement of?
- A. Vector Height
- B. Vertical Hierarchy
- C. Viewport Height β (correct answer)
- D. Visual Hex
Explanation: 1vh equals 1% of the total height of the user's browser window.
Question 36: What is the difference between em and rem?
- A.
em is for margins, rem is for padding.
- B.
em is relative to its parent element's font-size, rem is relative to the root (<html>) font-size. β (correct answer)
- C.
em is absolute, rem is relative.
- D. There is no difference.
Explanation: rem (root em) ensures consistent sizing across the entire document, preventing compounding sizing issues caused by nested em values.
Question 37: Which selector selects elements that have BOTH the .btn class AND the .primary class?
- A.
.btn .primary
- B.
.btn, .primary
- C.
.btn.primary β (correct answer)
- D.
.btn > .primary
Explanation: Chaining classes without a space means "an element that has all of these classes".
Question 38: What is the purpose of @keyframes?
- A. To define reusable CSS variables.
- B. To define intermediate steps in a CSS animation sequence. β (correct answer)
- C. To import external fonts.
- D. To define grid layouts.
Explanation: @keyframes dictates what an animation looks like at 0%, 50%, 100%, etc., which is then triggered by the animation property.
Question 39: If you apply display: inline-block, what happens to the element?
- A. It behaves like inline text but allows you to set width, height, margin, and padding. β (correct answer)
- B. It breaks onto a new line and takes up 100% width.
- C. It becomes completely invisible.
- D. It becomes a Flexbox container.
Explanation: inline-block gives you the formatting power of a block element while staying side-by-side like an inline element.
Question 40: Which media query is correctly formatted for a mobile-first approach targeting tablets?
- A.
@media (max-width: 768px)
- B.
@media tablet-only
- C.
@media (min-width: 768px) β (correct answer)
- D.
@media screen = tablet
Explanation: Mobile-first design means you write base styles for phones, and then use min-width to *add* styles when the screen gets wider (e.g., reaching 768px for tablets).