CSS Online Test - MCQ Questions

Welcome to the CSS Online Test! We will present 40 MCQs (Multiple-Choice Questions) to test your knowledge of the CSS basics and advanced CSS concepts.

You can select the correct answer for each question and submit the test. You will get your online test score after finishing the complete test.

1. What does CSS stand for?

a) Colorful Style Sheets

b) Computer Style Sheets

c) Cascading Style Sheets

d) Creative Style Sheets

2. Which CSS property is used to change the text color of an element?

a) font-color

b) text-color

c) color

d) fgcolor

3. How do you insert a comment in a CSS file?

a) // This is a comment

b) <!-- This is a comment -->

c) /* This is a comment */

d) ** This is a comment **

4. Which property is used to change the background color of an element?

a) background-color

b) bgcolor

c) color

d) background-style

5. What does the following CSS selector select? #menu

#menu {
    color: black;
}

a) All elements with class="menu"

b) The element with id="menu"

c) All menu elements

d) None of the above

6. How do you make each word in a text start with a capital letter?

a) text-transform: capitalize;

b) text-transform: uppercase;

c) text-transform: lowercase;

d) text-decoration: capitalize;

7. Which property is used to change the font size of an element?

a) text-size

b) font-style

c) font-size

d) text-style

8. How do you display hyperlinks without an underline?

a {
    text-decoration: none;
}

a) text-decoration: none;

b) font-style: none;

c) text-decoration: no-underline;

d) decoration: none;

9. Which property adds space between the borders of a cell in a table?

a) padding

b) border-spacing

c) cellspacing

d) margin

10. What does the 'z-index' property do?

a) Controls the vertical stacking order of elements that overlap

b) Changes the zoom level of an element

c) Manages the horizontal alignment of elements

d) Adjusts the size of the background image

11. What is the default value of the position property?

a) fixed

b) absolute

c) relative

d) static

12. How do you select all p elements inside a div element?

div p {
    color: red;
}

a) div + p

b) div p

c) div, p

d) p > div

13. Which CSS property controls the text alignment?

a) text-align

b) text-decoration

c) font-style

d) text-indent

14. How do you set the list item marker to be a circle?

ul {
    list-style-type: circle;
}

a) list-style-type: circle;

b) list-type: circle;

c) list-style: circle;

d) list-decoration: circle;

15. What is the purpose of the 'display' property in CSS?

a) To change the font size of text

b) To hide an element without changing the layout

c) To control the layout of elements

d) To insert content into the page

16. Which CSS property is used to make the text bold?

a) font-style

b) font-weight

c) text-style

d) weight

17. How do you make a list that displays items with a decimal leading zero?

ol {
    list-style-type: decimal-leading-zero;
}

a) list-style: decimal-zero;

b) list-style-type: decimal-leading-zero;

c) list-style-type: zero-decimal;

d) list-numbering: decimal-zero;

18. How do you select an element with a specific attribute?

a[target] {
    color: red;
}

a) a[target="value"]

b) a[target]

c) a::target

d) .target

19. Which property changes the position of background images?

a) background-position

b) background-size

c) background-style

d) background-color

20. What is the correct CSS syntax to change the font color to red for all elements of class "error"?

.error {
    color: red;
}

a) .error: color=red;

b) .error {color: red;}

c) error {color: red;}

d) .error-color {color: red;}

21. How do you select elements with class "container" that are descendants of any div?

div .container {
    color: blue;
}

a) div + .container

b) div .container

c) div, .container

d) .div .container

22. What does the 'overflow' property do?

a) Specifies what happens if content overflows an element's box

b) Changes the outer margin of an element

c) Alters the transparency of an element

d) Manages the overflow of data in a database

23. Which property is used to set the spacing between lines of text?

a) text-align

b) line-height

c) text-indent

d) letter-spacing

24. How do you apply a CSS rule to a specific web page element by its ID?

#unique {
    color: green;
}

a) .unique {color: green;}

b) #unique {color: green;}

c) unique {color: green;}

d) #unique-color {color: green;}

25. What is the purpose of the CSS 'box-sizing' property?

a) To change the navigation style in a browser

b) To manage the rendering of borders and padding

c) To alter the dimensions of an element

d) To control the box model used by elements

26. What is the purpose of the CSS calc() function?

width: calc(100% - 80px);

a) To perform mathematical operations within CSS

b) To calculate the speed of animations

c) To configure the calculation settings of a browser

d) To integrate JavaScript calculations in CSS

27. How can you create a CSS variable named --main-color and use it on a webpage?

:root {
    --main-color: #06c;
}
div {
    background-color: var(--main-color);
}

a) Use the variable() function

b) Use the var() function

c) Use the css-var() function

d) Use the calc() function

28. Which property is used to change the spacing between characters of text?

a) text-spacing

b) character-spacing

c) letter-spacing

d) font-spacing

29. What does the z-index property do in a stacking context?

div {
    position: absolute;
    z-index: 10;
}

a) Adjusts the zoom level of an element

b) Controls the horizontal stacking order of elements

c) Controls the vertical stacking order of elements

d) Manages the size of elements

30. How do you create a grid layout with three columns using CSS Grid?

a) Use display: flex;

b) Use grid-template-rows: auto auto auto;

c) Use grid-template-columns: auto auto auto;

d) Use grid-template-areas: auto auto auto;

31. What is the purpose of the flex-wrap property in a flex container?

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

a) To specify how flex items are laid out in the container

b) To set whether flex items are forced onto one line or can wrap onto multiple lines

c) To control the direction flex items layout

d) To determine the spacing between flex items

32. How do you apply a linear gradient as the background from top to bottom?

a) Use background: gradient-linear(top, red, yellow);

b) Use background: linear-gradient(to top, red, yellow);

c) Use background: linear-gradient(to bottom, red, yellow);

d) Use background: linear-gradient(bottom, red, yellow);

33. Which property is used to set the blending mode of an element's background with its background?

a) background-blend

b) blend-mode

c) background-combine

d) background-blend-mode

34. What does the CSS clip-path property do?

.clip {
    clip-path: circle(50%);
}

a) Clips an element's content

b) Defines a visible path for a background image

c) Crops an element into a specified shape

d) Creates a clipping region to specify where to display parts of an element

35. How can you create a shadow effect around an element?

a) Use box-shadow

b) Use text-shadow

c) Use border-shadow

d) Use shadow-box

36. What property allows you to transition between states using a duration and timing function?

a) animate

b) change

c) transition

d) alter

37. How do you make text unselectable on web pages using CSS?

a) user-select: none

b) user-deselect: none

c) text-select: forbidden

d) select: disable

38. Which property adjusts the opacity of an element?

a) transparency

b) alpha

c) opacity

d) visibility

39. What is the function of the :nth-child() selector?

li:nth-child(2) {
    color: red;
}

a) Selects every nth child of a parent

b) Selects children with a specific attribute only

c) Changes the styling of every child element

d) Selects the second child element of its parent

40. How do you specify a CSS rule that applies to several classes?

.one,
.two,
.three {
    color: blue;
}

a) Use a comma to separate multiple classes in the selector

b) Use a semicolon to separate multiple classes in the selector

c) Use the all-classes property

d) You cannot specify a rule for multiple classes at once