CSS Quiz | Practice Test / Quiz / MCQs

1. Which CSS will cause your links to have a solid blue background that changes to semitransparent on hover?

'''css a { color: blue; } a:hover { background: white; } ' '''css a:link { background: #0000ff; } a:hover { background: rgba(0, 0, 255, 0.5); } ' '''css a:link { background: blue; } a:hover { color: rgba(0, 0, 255, 0.5); } ' '''css a:hover { background: rgba(blue, 50%); } a:link { background: rgba(blue); } '

2. What is the difference between the following line-height settings?
css
line-height: 20px;
line-height: 2;

The value of 20px will set the line-height to 20px. The value of 2 will default to a value of 2px.The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to twice the size of the corresponding font-size value.The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to 20% of the corresponding font-size value.The value of 20px will set the line-height to 20px. The value of 2 is not valid.

3. Which CSS properties can you use to create a rounded corner on just the top-left and top-right corners of an element?
css
A. border-radius: 10px 10px 0 0;
B. border-top-left-radius: 10px; and border-top-right-radius: 10px;
C. border-radius: 10px 0;
D. border-top-radius: 10px;

A and CA and BB and CC and D

4. How do you add Google fonts to your project?

by using an HTML link element referring to a Google-provided CSSby using a Google-specific CSS syntax that directly links to the desired font fileby embedding the font file directly into the project's master JavaScriptby using a standard font-face CSS definition sourcing a font file on Google's servers

5. There are two sibling combinators that can be used to select elements contained within the same parent element; the general sibling combinator (~) and the adjacent sibling combinator (+). Referring to example below, which elements will the styles be applied to?
css
h2 ~ p {
color: blue;
}
h2 + p {
background: beige;
}

html

paragraph 1

Heading

paragraph 2

paragraph 3

NoneParagraphs 2 and 3 will be blue. The h2 and paragraph 2 will have a beige background.Paragraph 2 will be blue. Paragraphs 2 and 3 will have a beige background.Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background.

6. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

padding: 10px 10px 0px 0px;padding: 10px 0px 10px 0px;padding: 10px 0px;padding: 10px 0;

7. When elements within a container overlap, the z-index property can be used to indicate how those items are stacked on top of each other. Which set of statements is true?

'''markdown 1. Larger z-index values appear on top elements with a lower z-index value. 2. Negative and positive number can be used. 3. z-index can be used only on positioned elements. ' '''markdown 1. Smaller z-index values appear on top of elements with a larger z-index value. 2. Negative and positive numbers can be used. 3. z-index can be used with or without positioned elements. ' '''markdown 1. Larger z-index values appear on top of elements with a lower z-index value. 2. Only positive number can be used. 3. z-index must also be used with positioned elements. ' '''markdown 1. Smaller z-index values appear on top of elements with a larger z-index value. 2. Negative and positive number can be used. 3. z-index must also be used with positioned elements. '

10. What is an advantage of using inline CSS?

It is easier to manage.It can be used to quickly test local CSS overrides.It reduces conflict with other CSS definition methods.It is easier to add multiple styles through it.

11. Review the HTML example below. Then choose the list of selectors that select the \

, from lowest to highest specificity.
html

...

'''css 1. p { ...; } 2. section p { ...; } 3. [class*='example'] { ...; } 4. p.example { ...; } ' '''css 1. section \* { ...; } 2. [class*='example'] { ...; } 3. p.example { ...; } 4. section p { ...; } ' '''css 1. p { ...; } 2. p.example { ...; } 3. section p { ...; } 4. [class*='example'] { ...; } ' '''css 1. p.example { ...; } 2. section p { ...; } 3. [class*='example'] { ...; } 4. section \* { ...; } '

13. When using the Flexbox method, what property and value is used to display flex items in a column?

flex-column: auto;flex-flow: column; or flex-direction: columnflex-direction: column;flex-flow: column;

15. Given this code, which CSS declaration of .overlay will span the entire width and height of its container?
css

Acss.overlay { position: static; top: 200px; bottom: 200px; right: 200px; left: 200px; background-color: rgba(0, 0, 0, 0.5);}Dcss.overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);}Bcss.overlay { position: absolute; top: 200px; bottom: 200px; right: 200px; left: 200px; background-color: rgba(0, 0, 0, 0.5);}Ccss.overlay { position: static; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);}

16. What is the rem unit based on?

You have to set the value for the rem unit by writing a declaration such as rem { font-size: 1 Spx; }The rem unit is relative to the font-size of the root element of the page.The rem unit is relative to the font-size of the p element.The rem unit is relative to the font-size of the containing (parent) element.

18. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value?
css
.example {
margin-left: calc(5% + 5px);
}

The left margin value is equal to 5% of its parents element's width plus 5pxThe left margin value is equal to 5% of the closest positioned element's width plus 5pxThe left margin value is equal to 5% of the selected element's width (.example) plus 5pxThe left margin value is equal to 5% of the viewport width plus 5px

19. CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?
css
.grid {
display: grid;
width: 500px;
grid-template-columns: 50px 1fr 2fr;
}

The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.

20. The flex-direction property is used to specify the direction that flex items are displayed. What are the values used to specify the direction of the items in the following examples?

- Example 1: 'flex-direction: row-reverse;' - Example 2: 'flex-direction: row;' - Example 3: 'flex-direction: column-reverse;' - Example 4: 'flex-direction: column;' - Example 1: 'flex-direction: row;' - Example 2: 'flex-direction: row-reverse;' - Example 3: 'flex-direction: column;' - Example 4: 'flex-direction: reverse-column;' - Example 1: 'flex-direction: column;' - Example 2: 'flex-direction: column-reverse;' - Example 3: 'flex-direction: row;' - Example 4: 'flex-direction: row-reverse;' - Example 1: 'flex-direction: row;' - Example 2: 'flex-direction: row-reverse;' - Example 3: 'flex-direction: column;' - Example 4: 'flex-direction: column-reverse;'

21. What is the correct order for listing different link states in a website so those states display correctly on the page?

'''css a a:hover ' '''css :link :visited :hover :active :focus ' '''css :link :visited :focus :hover :active ' '''css :active :focus :hover :link :visited '

22. Pseudo-classes are used to '_'.

style a specific part of the selected elementstyle the elements using class selectorsinsert presentational contentstyle the state of the selected element

23. What is the difference between the margin and padding properties?

Margin adds a line around an element, padding adds space inside of an element.Margin adds space around an element; padding adds space inside of an element.Margin adds space around and inside of an element; padding adds space only inside of an element.Margin adds space inside of an element, padding adds space around an element.

24. When adding transparency styles, what is the difference between using the opacity property versus the background property with an 'rgba()' value?

Opacity applies transparency to the background color only. Background with an 'rgba()' value specifies the level of transparency of an element, as a whole, including its content.Opacity specifies the level of transparency of the child elements. Background with an 'rgba()' value applies transparency to the background color only.Opacity specifies the level of transparency of an element, including its content. Background with an 'rgba()' value applies transparency to the background color only.Opacity applies transparency to the parent and child elements. Background with an 'rgba()' value specifies the level of transparency of the parent element only.

25. What are three valid ways of adding CSS to an HTML page?

'''markdown 1. External; CSS is written in a separate file and is linked within the element of the HTML file. 2. Inline; CSS is added to the HTML tag. 3. Internal; CSS is included within the element of the HTML file. ' '''markdown 1. External; CSS is written in a separate file. 2. Inline; CSS is added to the of the HTML page. 3. Internal; CSS is included within the HTML tags. ' '''markdown 1. External; CSS is written in a separate file and is linked within the element of the HTML file. 2. Inline; CSS is added to the HTML tag. 3. Internal; CSS is included within the element of the HTML file. '''markdown 1. External; CSS is written in a separate file and is linked within the element of the HTML file. 2. Internal; CSS is included within the element of the HTML file. 3. Inline; CSS is added to the HTML tag.

25 Questions

Heading

❤ If you liked Fatskills, consider supporting us by checking out The Life Manuals You Never Got.

About | Explore | User Guide | Topics | Subjects | Doubt Solver | Career Aptitude Test | Answers | Free Tools | OSHA Basics Quiz | What Should We Know?
Privacy | Terms |

Without work one finishes nothing. - Ralph Waldo Emerson
© 2026 Fatskills.com

All trademarks, logos and brand names are the property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, trademarks and brands does not imply endorsement.

25 Questions

Heading

❤ If you liked Fatskills, consider supporting us by checking out The Life Manuals You Never Got.

About | Explore | User Guide | Topics | Subjects | Doubt Solver | Career Aptitude Test | Answers | Free Tools | OSHA Basics Quiz | What Should We Know? Privacy | Terms |

Without work one finishes nothing. - Ralph Waldo Emerson© 2026 Fatskills.com

All trademarks, logos and brand names are the property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, trademarks and brands does not imply endorsement.

About | Explore | User Guide | Topics | Subjects | Doubt Solver | Career Aptitude Test | Answers | Free Tools | OSHA Basics Quiz | What Should We Know?
Privacy | Terms |

Without work one finishes nothing. - Ralph Waldo Emerson
© 2026 Fatskills.com