31. CSS Quiz

What does CSS stand for?

• Computer Style Sheets
• Cascading Style Sheets
• Creative Style System
• Colorful Style Sheets

CSS is Cascading Style Sheets. It controls how HTML looks.

Which selector chooses elements with class="note"?

• #note
• note
• .note
• *note

A dot selects a class. A hash selects an id.

Which is the best way to add CSS to a real website?

• An external stylesheet linked with <link>
• Inline style attributes on every element
• Inside the <body> without tags
• In an HTML comment

An external file styles the whole site, is easy to maintain, and can be cached by the browser.

In the box model, which layer is outside the border?

• Content
• Padding
• Border
• Margin

From the inside out: content, padding, border, margin.

What does box-sizing: border-box do?

• Removes the border
• Includes padding and border in the width and height
• Adds a margin around the box
• Makes the box round

With border-box, a 300px width stays 300px even after padding and border are added.

Which unit is relative to the root font size?

• px
• vh
• rem
• pt

rem is based on the root font size, so text scales with the visitor’s browser settings.

What is the correct order of link rules?

• link, visited, hover, active
• hover, link, active, visited
• active, hover, visited, link
• visited, link, active, hover

Remember LVHA. Other orders can stop some states from working.

Which rule centres a block with a fixed width horizontally?

• text-align: center;
• margin: 0 auto;
• padding: auto;
• float: center;

margin: 0 auto splits the leftover horizontal space equally. text-align only centres the text inside.

Which property turns an element into a flex container?

• position: flex
• flex: container
• layout: flex
• display: flex

Set display: flex on the parent, and its direct children become flex items.

Which value makes a grid with as many 150px-or-wider columns as will fit?

• repeat(auto-fit, minmax(150px, 1fr))
• 150px 150px 150px
• auto 150px
• fit(150px)

This pattern makes a responsive grid without any media queries.

How does a CSS variable name begin, and how do you read it?

• With $, read with get()
• With @, read with use()
• With --, read with var()
• With #, read with value()

Declare --primary: #0d6efd; and read it with var(--primary).

Which approach is “mobile first”?

• Hide everything on phones
• Write small-screen styles first, then use min-width queries
• Only test on a phone
• Use max-width queries for every rule

Mobile first starts simple and adds enhancements as the screen grows.