CSS Quiz

CSS (Cascading Style Sheets) controls how HTML looks: colours, spacing, fonts and layout. These questions check your knowledge of selectors, the box model, positioning, units and the way styles cascade and override each other.

What this quiz covers

Study tip: When you miss a question about specificity or positioning, build a tiny example in a code editor and change one property at a time to see the effect.

Questions, answers and explanations

1. What is CSS?

  1. CSS is a style sheet language
  2. CSS separates presentation from content
  3. CSS is used to style HTML documents
  4. All of the mentioned

Answer: All of the mentioned

CSS is a stylesheet language used to style and layout HTML pages.

2. Which HTML tag is used to embed CSS in an HTML page?

  1. <css>
  2. <!DOCTYPE html>
  3. <script>
  4. <style>

Answer: <style>

The <style> tag is used for internal CSS.

3. Which CSS selector is used to specify a group of elements?

  1. tag
  2. id
  3. class
  4. both class and tag

Answer: class

The class selector can be applied to multiple elements.

4. Which technology introduced text, list, box, margin, border, color, and background properties?

  1. HTML
  2. PHP
  3. CSS
  4. Ajax

Answer: CSS

CSS provides styling properties such as margin, border, color, and background.

5. Which CSS framework is commonly used to create responsive websites?

  1. Django
  2. Rails
  3. Laravel
  4. Bootstrap

Answer: Bootstrap

Bootstrap is a popular CSS framework for responsive web design.

6. Which CSS selector is used to target a unique element?

  1. tag
  2. id
  3. class
  4. both class and tag

Answer: id

The id selector should uniquely identify a single element.

7. Which HTML tag defines an internal style sheet?

  1. <script>
  2. <link>
  3. <class>
  4. <style>

Answer: <style>

The <style> element contains internal CSS rules.

8. Which CSS property makes text bold?

  1. text-decoration: bold
  2. font-weight: bold
  3. font-style: bold
  4. text-align: bold

Answer: font-weight: bold

Use font-weight: bold to make text bold.

9. What happens with the CSS code h1 { color: "green"; }?

  1. Nothing happens
  2. An error occurs
  3. Heading becomes dark green
  4. Heading becomes green

Answer: Nothing happens

The color value should not be enclosed in quotes.

10. Which CSS property is used to make text italic?

  1. style
  2. font
  3. font-style
  4. @font-face

Answer: font-style

font-style: italic makes text italic.

11. What happens if a semicolon is missing between CSS properties?

  1. Color and underline work
  2. Only italic works
  3. All properties work
  4. Underline and italic work

Answer: Only italic works

Missing a semicolon can prevent previous declarations from being parsed correctly.

12. Which vendor prefix is used for WebKit browsers?

  1. -chrome
  2. -web
  3. -o-
  4. -webkit-

Answer: -webkit-

The correct vendor prefix is -webkit-.

13. Which is the correct syntax to link an external CSS file?

  1. <link rel="stylesheet" href="style.css">
  2. <link rel="stylesheet" src="style.css">
  3. <style rel="stylesheet" src="style.css">
  4. <style rel="stylesheet" link="style.css">

Answer: <link rel="stylesheet" href="style.css">

The href attribute specifies the stylesheet location.

14. Which was the first official W3C CSS Recommendation?

  1. CSS Level 2
  2. (X)HTML CSS
  3. CSS Level 1
  4. CSS Level 2.1

Answer: CSS Level 1

CSS Level 1 became the first official W3C recommendation.

15. Which function creates a linear gradient?

  1. gradient()
  2. linear-gradient()
  3. grayscale()
  4. image()

Answer: linear-gradient()

linear-gradient() creates smooth color transitions.

16. Which property sets an image as the border?

  1. background-image-source
  2. background-image
  3. border-image-source
  4. border-image

Answer: border-image-source

border-image-source specifies the image used for the border.

17. Which property defines all border properties in one declaration?

  1. border-collapse
  2. border-width
  3. padding
  4. border

Answer: border

The border shorthand sets width, style, and color together.

18. What are the valid ways to apply CSS?

  1. External CSS file
  2. Inline CSS
  3. Internal CSS in the head
  4. All of the mentioned

Answer: All of the mentioned

CSS can be applied externally, internally, or inline.

19. Which property sets the font size?

  1. font-size
  2. text-size
  3. text
  4. size

Answer: font-size

font-size controls the size of text.

20. Which of the following is NOT a property of the CSS box model?

  1. margin
  2. color
  3. width
  4. height

Answer: color

The CSS box model includes content, padding, border, and margin. Color is not part of the box model.

Take the timed quiz