CSS MCQ: CSS Multiple Choice Questions and Answers

CSS MCQ with answers and explanations for placement tests and job interviews. This solved CSS MCQ is useful for the campus placement for all freshers including Engineering Students, MCA students, Computer and IT Engineers, etc.

Our CSS MCQ ( CSS Multiple Choice Questions and Answer )  focuses on all areas of CSS (Style sheet language). We will also regularly update the CSS MCQ and the most interesting thing is that questions come in a random sequence. So every time you will feel new questions.

Note: Your score along with correct answers will be visible after answering all of these questions.

So let’s see our CSS MCQ (Multiple Choice Questions & Answers on “CSS”).

css mcq

CSS MCQ:  CSS Multiple Choice Questions and Answers

1 / 40

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

2 / 40

Which of these would give a block element rounded corners?

3 / 40

Which type of declaration will take precedence?

4 / 40

CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element's transformation origin. By default, what is the location of the origin?

5 / 40

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?

6 / 40

The values for the font-weight property can be keywords or numbers. For each numbered value below, what is the associated keyword?

font-weight: 400; font-weight: 700;

7 / 40

There are many properties that can be used to align elements and create page layouts such as float, position, flexbox and grid. Of these four properties, which one should be used to align a global navigation bar which stays fixed at the top of the page?

8 / 40

How would you make the first letter of every paragraph on the page red?

9 / 40

Which statement regarding icon fonts is true?

10 / 40

Which selector would select only internal links within the current page?

11 / 40

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?

12 / 40

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

13 / 40

If the width of the container is 500 pixels, what would the width of the three columns be in this layout?

.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }

14 / 40

. What is the rem unit based on?

15 / 40

To change the color of an SVG using CSS, which property is used?

16 / 40

Which of the following is not a valid color value?

17 / 40

What is the line-height property primarily used for?

18 / 40

When using flexbox, the "justify-content" property can be used to distribute the space between the flex items along the main axis. Which value should be used to evenly distribute the flex items within the container shown below?

19 / 40

Using an attribute selector, how would you select an <a> element with a "title" attribute?

20 / 40

What is the difference between the margin and padding properties?

21 / 40

There are many advantages to using icon fonts. What is one of those advantages?

22 / 40

When using media queries, media types are used to target a device category. Which choice lists current valid media types?

23 / 40

When elements overlap, they are ordered on the z-axis (i.e., which element covers another). The z-index property can be used to specify the z-order of overlapping elements. Which set of statements about the z-index property are true?

24 / 40

What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?)

25 / 40

Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?)

26 / 40

By default, a background image will repeat \_\_\_

27 / 40

CSS grid and flexbox are now becoming a more popular way to create page layouts. However, floats are still commonly used, especially when working with an older code base, or it you need to support older browser version. What are two valid techniques used to clear floats?

28 / 40

Icon fonts can be styled with typography related properties such as font-size and color. What is the difference between display:none and visibility:hidden?

29 / 40

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?
.grid {
display: grid;
width: 500px;
grid-template-columns: 50px 1fr 2fr;

30 / 40

In the following example, which selector has the highest specificity ranking for selecting the anchor link element?

ul li a
a
.example a
div a

31 / 40

When using position: fixed, what will the element always be positioned relative to?

32 / 40

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?

h2 ~ p {
color: blue;
}
h2 + p {
background: beige;
}

<section>
<p>paragraph 1</p>
<h2>Heading</h2>
<p>paragraph 2</p>
<p>paragraph 3</p>
</section>

33 / 40

What is not true about class selectors?

34 / 40

What selector and property would you use to scale an element to be 50% smaller on hover?

35 / 40

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

36 / 40

Three of these choices are true about class selectors. Which is NOT true?

37 / 40

In the following media query example, what conditions are being targeted?

@media (min-width: 1024px), screen and (orientation: landscape) { … }

38 / 40

What is the vertical gap between the two elements below?

<div style="margin-bottom: 2rem;">Div 1</div>
<div style="margin-top: 2rem;">Div 2</div>

39 / 40

In the example below, when will the color pink be applied to the anchor element?

a:active {
color: pink;
}

40 / 40

In the following example, what color will paragraph one and paragraph two be? (Alternative: In this example, what color will paragraphs one and two be?)

<section>
<p>paragraph one</p>
</section>

<p>paragraph two</p>

section p {
color: red;
}
section + p {
color: blue;
}

Recommended Articles for you:

Leave a Reply

Your email address will not be published. Required fields are marked *