CareQuiz — CSS Quiz

1) Which property is used to create space inside an element, between the content and the border?

margin padding border spacing

2) What is the purpose of calc() in CSS?

To perform mathematical calculations To define CSS animations To set conditional styles To apply media queries

3) What does CSS stand for?

Custom Style Sheets Colorful Style Sheets Computer Style Sheets Cascading Style Sheets

4) How do you add a comment in CSS?

/* this is a comment */ // this is a comment // // this is a comment

5) Which unit is relative to the root element’s font size?

em px % rem

6) Which CSS property is used to prevent an element from overflowing its container?

display: none; overflow: hidden; visibility: collapse; clip: content-box;

Correct: overflow: hidden;. Wrong: display removes element, collapse only for table rows, clip is deprecated.

7) What is the correct syntax for importing a stylesheet in CSS?

@import url(css/example.css); @import-stylesheet url(css/example.css); import-css url(css/example.css); @import-style url(css/example.css);

Correct: @import url(...). Wrong: others are invalid syntax.

8) How do you add a background color for all <h1> elements?

h1.all {background-color:#FFFFFF;} all.h1 {background-color:#FFFFFF;} h1 {background-color:#FFFFFF;} *h1 {background-color:#FFFFFF;}

Correct: h1 {background-color:#FFFFFF;}. Wrong: other selectors don’t target all h1 elements.

9) Which CSS property is used to make text bold?

font-style: bold; font-weight: bold; text-align: bold; font: bold;

Correct: font-weight: bold;. Wrong: font-style controls italic, text-align is for alignment, font shorthand requires values.

10) How do you make an element's text uppercase using CSS?

text-case: uppercase; text-transform: uppercase; font-case: uppercase; letter-case: uppercase;

Correct: text-transform: uppercase;. Wrong: other properties don’t exist in CSS.

11) What is the default value of box-sizing?

content-box border-box padding-box inherit

Correct: content-box. Wrong: border-box is common but not default, padding-box isn’t valid, inherit only applies if explicitly set.

12) Padding shorthand: 10px top, 15px bottom, 5px right, 10px left?

padding: 10px 15px 5px 10px; padding: 15px 5px 10px 10px; padding: 10px 5px 10px 15px; padding: 10px 5px 15px 10px;

Correct: padding: 10px 5px 15px 10px; (top, right, bottom, left). Wrong: others mix up the order.

13) How do you create a CSS animation that loops infinitely?

animation: spin 2s infinite; animation: spin 2s loop; animation: spin 2s forever; animation: spin 2s repeat;

Correct: use the infinite keyword. Wrong: loop/forever/repeat are not valid CSS values.

14) How do you apply a CSS rule to all <p> elements inside a <div>?

div > p {} div p {} div + p {} div, p {}

Correct: div p (descendant selector). Wrong: > selects only direct children, + selects adjacent sibling, div,p targets both separately.

15) Which snippet is commonly used to center a website horizontally?

site-align: center; margin: center; margin: auto 0; margin: 0 auto;

Correct: margin: 0 auto;. Wrong: other syntaxes are invalid.

16) In a flex container, which property allows items to wrap to the next line?

flex-wrap: wrap; display: wrap; flex-direction: row; align-items: wrap;

Correct: flex-wrap: wrap;. Wrong: display:wrap doesn’t exist, flex-direction controls axis, align-items doesn’t accept wrap.

17) Which is the correct CSS syntax?

{p:color=black(p} p {color: black;} {p;color:black} p:color=black

Correct: p {color: black;}. Wrong: others are malformed.

18) What does the z-index property control?

The stacking order of elements The visibility of elements The background color The transition speed

Correct: z-index controls stacking order. Wrong: other properties handle those aspects.

19) How do you declare a CSS variable?

$main-color: blue; var --main-color: blue; --main-color: blue; :root { --main-color: blue; }

Correct: :root { --main-color: blue; }. Wrong: $ is Sass, var keyword is invalid, declaring without scope is incomplete.

20) Which CSS property allows an element to align itself within a flex container?

align-items justify-content align-self flex-align

Correct: align-self. Wrong: align-items = all children, justify-content = main axis, flex-align doesn’t exist.