Unit 3: Cascading Style Sheets - Practice Quiz

1 What is the primary purpose of CSS in web development?

2 Which HTML element is commonly used to link an external CSS file?

3 Which CSS selector targets all elements with the class notice?

4 Which selector generally has the highest specificity?

5 Which property sets the background color of an element?

6 Which CSS unit is relative to the font size of the root element?

7 Which CSS property selects the typeface used for text?

8 Which declaration centers text horizontally within an element?

9 Which part of the CSS box model creates space between an element's content and its border?

10 Which position value keeps an element attached to the same place in the viewport while the page scrolls?

11 Which declaration turns an element into a flex container?

12 Which property defines the columns of a CSS Grid container?

13 Which pseudo-class applies styles when the pointer is over an element?

14 Which pseudo-element inserts generated content before an element's existing content?

15 Which selector targets every element that has a required attribute?

16 Which selector targets only disabled form controls?

17 Which syntax correctly declares a CSS custom property named main-color?

18 Which CSS feature applies styles based on conditions such as viewport width?

19 Which CSS rule defines the stages of an animation?

20 What is the purpose of a CSS transition?

21 A stylesheet contains .notice { color: navy; }, followed later by .notice { color: teal; }. No other color rules apply. What color will an element with class="notice" use?

22 Given the rules #app .note p { color: red; }, .note p { color: blue; }, and div p { color: green; }, what color is applied to a matching paragraph inside #app?

23 What is the visual result of background-color: #222; background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(hero.jpg);?

24 The root font size is 16px, and a container has font-size: 20px. A child inside it has width: 10em and margin-left: 2rem. What are the computed width and left margin?

25 A parent has font-size: 20px; line-height: 1.5;. Its child sets font-size: 12px but does not set line-height. What line height does the child use?

26 Which declaration set displays a single-line label with an ellipsis when its text exceeds the element's width?

27 An element uses box-sizing: content-box, width: 200px, padding: 20px, and border: 5px solid. What is its total border-box width?

28 An absolutely positioned element is inside a position: static parent, which is inside a position: relative grandparent. Relative to which box are its top and left offsets calculated?

29 A 600px-wide flex container has three items with flex: 1 1 0. The second item additionally has flex-grow: 2. Ignoring gaps, what width does the second item receive?

30 A grid container is 940px wide and uses grid-template-columns: repeat(3, 1fr) with column-gap: 20px. What is the width of each column?

31 A div contains, in order, an h2, a paragraph labeled A, a span, and a paragraph labeled B. Which element matches p:nth-of-type(2)?

32 Which rule adds a red asterisk immediately after the content of every element with class required?

33 Which selector targets links whose href begins with https:// and ends with .pdf?

34 For markup where a checkbox is immediately followed by its label, which selector styles the label only while the checkbox is checked?

35 Given :root { --accent: blue; }, .card { --accent: green; }, and .card button { color: var(--accent, red); }, what color does a button inside .card use?

36 A layout uses .grid { grid-template-columns: 1fr; }, @media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }, and @media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }. How many columns appear at a viewport width of 920px?

37 An animation changes opacity from 0 to 1. Which property-value pair keeps the element at the final keyframe value after the animation finishes?

38 A box changes from width: 100px to width: 200px on hover. Which addition makes the width animate smoothly both when the pointer enters and when it leaves?

39 An element matches .msg { color: blue !important; } and #panel .msg { color: red; }. There are no other relevant rules. Which color is applied?

40 A grid has four equal columns. An item uses grid-column: 2 / span 2. Which columns does the item occupy?

41 Given the following cascade layers, what is the computed color of the element <div id="app" class="notice">?

@layer base, theme;

@layer base { .notice { color: navy !important; } }

@layer theme { #app.notice { color: crimson !important; } }

.notice { color: green !important; }

42 What is the specificity of the selector :is(#panel, .card) > p:not(:where(.muted))?

43 An element has three background images and the declaration background-clip: content-box, padding-box;. Which clipping sequence is used for the images from top to bottom, and how is the background color clipped?

44 The root has font-size: 20px. A parent has a content width of 500px, and its child has font-size: 10px and width: calc(50% + 2rem - 3em). What is the child's used content width?

45 What are the computed values of font-kerning and font-feature-settings after these declarations?

.label { font-kerning: none; font-feature-settings: "liga" 0; font: italic 16px/1.5 "Inter"; }

46 Consider .parent { text-decoration: underline; } and .child { text-decoration: none; }, where .child is a normal inline span inside .parent. What happens to the text in .child?

47 A block is inside a containing block whose content width is 400px. The block uses height: 100px; padding-block: 10%; border-block: 5px solid; box-sizing: content-box;. What is its outer border-box height?

48 A non-root ancestor has transform: translateZ(0), and its descendant has position: fixed; top: 0; left: 0;. Assuming no other containing-block-generating ancestor intervenes, how is the descendant positioned?

49 A 300px-wide flex container has two items with flex: 1 1 0. Their unbreakable min-content widths are 250px and 100px, and neither item overrides min-width. What widths result under the default flex-item minimum sizing?

50 A 600px-wide grid uses grid-template-columns: 200px minmax(100px, 1fr) 2fr with a 20px column gap. Assuming no content-based expansion, what are the three track widths?

51 Six sibling <li> elements occur in order. Elements 1, 3, 4, and 6 have class active. Which elements match li:nth-child(2n of .active)?

52 An <article id="post" class="note"> generates ::before content. Which rule wins if all declarations are author-origin, unlayered, non-important rules?

#post::before { color: red; }

article.note::before { color: blue; }

article:where(.note)::before { color: green; }

53 Which element matches [lang|="en" i][data-tags~="css"]?

54 A disabled <fieldset> contains input A inside its first <legend>, input B in a normal <div>, and input C inside a second <legend>. Input D is outside the fieldset. Which inputs match :disabled if none has its own disabled attribute?

55 Given :root { --a: var(--b); --b: var(--a); } and .box { color: var(--a, red); border-color: var(--missing, var(--a, blue)); }, what colors are used?

56 The browser's initial font size is 16px, but the document sets html { font-size: 10px; }. At what viewport width does @media (min-width: 40em) begin to match, assuming no zoom or user scaling?

57 An animation defines opacity 0 at 0% and opacity 1 at 100%. It has animation-iteration-count: 3, animation-direction: alternate-reverse, and animation-fill-mode: forwards. What opacity is retained after it finishes?

58 An element has transition: opacity 4s linear -1s. When its opacity changes from 0 to 1, what is its transition state immediately after the change, and when does it finish?

59 A 700px-wide grid has grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)), a 20px gap, and exactly two items occupying separate tracks. What visible track widths result?

60 Element A has position: relative; z-index: 1, and its child has position: absolute; z-index: 999. A later sibling B has position: relative; z-index: 2. The elements overlap. Which element paints on top?