Home » MCQs

Advanced CSS Multiple-Choice Questions (MCQs)

CSS stands for "Cascading Style Sheets", it is used to define how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.

Advanced CSS MCQs: This section contains Advanced Cascading Style Sheets (CSS) Multiple-Choice Questions with Answers. These Advanced CSS MCQs are written for beginners as well as advanced, practice these MCQs to enhance and test the knowledge of Advanced CSS.

List of Advanced CSS MCQs

1. Which CSS property defines the radius of an element's corners?

1. border-corner
2. radius
3. corner
4. border-radius

Answer: D) border-radius

Explanation:

The border-radius property defines the radius of an element's corners.

Example:

.div1{
	border-radius: 25px;
}

Discuss this Question

---

2. Which CSS property allows you to specify an image to be used instead of the normal border around an element?

1. border-image
2. border-picture
3. border-background
4. border-bgimage

Answer: A) border-image

Explanation:

The border-image property allows you to specify an image to be used instead of the normal border around an element.

Example:

.borderedimage{
	border-image: url(border.png) 30 round;
}

Discuss this Question

---

3. What are the RGBA color values?

1. RGBA color values are combination of four colors
2. RGBA color values are an extension of RGB color values with background image
3. RGBA color values are an extension of RGB color values with an alpha channel
4. None of the above

Answer: C) RGBA color values are an extension of RGB color values with an alpha channel

Explanation:

RGBA color values are an extension of RGB color values with an alpha channel.

Discuss this Question

---

4. In a RGBA color value, what does A stand for?

1. A specifies the opacity for a color
2. A specifies the Aqua color
3. A specifies the opacity Azure color
4. All of the above

Answer: A) A specifies the opacity for a color

Explanation:

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

Example:

rgba(255, 0, 0, 0.2);

Discuss this Question

---

5. Which of the following specifies the red color with opacity?

1. rgba(255, 0, 0, 255)
2. rgba(255, 255, 255, 0.3)
3. rgba(0, 0, 255, 0.3)
4. rgba(255, 0, 0, 0.3)

Answer: D) rgba(255, 0, 0, 0.3)

Explanation:

The RGBA value (rgba(255, 0, 0, 0.3)) specifies the color with opacity.

Discuss this Question

---

6. Which is correct CSS statement to define blue background color with opacity?

1. background-color: rgba(0, 0, 255, 0.3)
2. background-color: rgba(0, 0, 255, 255)
3. background-color: rgba(0, 255, 255, 0.3)
4. background-color: rgba(0, 0, 1, 0.3)

Answer: A) background-color: rgba(0, 0, 255, 0.3)

Explanation:

The CSS statement (background-color: rgba(0, 0, 255, 0.3)) specifies the blue background with an opacity.

Discuss this Question

---

7. HSL color value stands for_____.

1. Hex, Saturation and Lightness
2. Hex, Solid and Lightness
3. Hue, Solid and Lightness
4. Hue, Saturation and Lightness

Answer: D) Hue, Saturation and Lightness

Explanation:

HSL color value stands for Hue, Saturation and Lightness.

Discuss this Question

---

8. What is Hue in HSL color value?

1. Hue is a degree on the color wheel (from 0 to 360)
2. Hue is a degree on the color wheel (from 0 to 90)
3. Hue is a degree on the color wheel (from 0 to 180)
4. Hue is a special color name

Answer: A) Hue is a degree on the color wheel (from 0 to 360)

Explanation:

Hue is a degree on the color wheel (from 0 to 360).

Discuss this Question

---

9. Which is the correct HSL value for green color?

1. background-color: hsl(180, 100%, 50%)
2. background-color: hsl(360, 100%, 50%)
3. background-color: hsl(120, 100%, 50%)
4. background-color: hsl(0, 100%, 50%)

Answer: C) background-color: hsl(120, 100%, 50%)

Explanation:

The correct HSL value for green color is,

background-color: hsl(120, 100%, 50%)

Discuss this Question

---

10. What are the HSLA color values?

1. hsla(hex, saturation, lightness, alpha)
2. hsla(hex, solid, lightness, alpha)
3. hsla(hue, solid, lightness, alpha)
4. hsla(hue, saturation, lightness, alpha)

Answer: D) hsla(hue, saturation, lightness, alpha)

Explanation:

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity.

Discuss this Question

---

11. What is the valid value of alpha parameter?

1. 0 to 255
2. 0 to 90
3. 0 to 16
4. 0.1 to 1.0

Answer: D) 0.1 to 1.0

Explanation:

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Discuss this Question

---

12. Which is the correct HSLA value for green color with fully transparent?

1. hsla(360, 100%, 50%, 0.3)
2. hsla(120, 100%, 50%, 1.0)
3. hsla(120, 100%, 50%, 0.1)
4. hsla(360, 100%, 100%, 0.3)

Answer: B) hsla(120, 100%, 50%, 1.0)

Explanation:

The correct HSLA value for green color is,

hsla(120, 100%, 50%, 1.0)

Discuss this Question

---

13. Which CSS property sets the opacity for the whole element?

1. aplha
2. opacity-value
3. opacity
4. background-opacity

Answer: C) opacity

Explanation:

The opacity property sets the opacity for the whole element.

Example:

p
{
  opacity:0.4;
}

Discuss this Question

---

14. Which keyword is used to make a color transparent?

1. transparent
2. opacity
3. color-transparent
4. alpha

Answer: A) transparent

Explanation:

The transparent keyword is used to make a color transparent. It is mostly used for creating the transparent background color of an element.

Example:

body {
  background-image: url("theme1.jpg");
}

div.example1 {
  background-color: transparent;
}

Discuss this Question

---

15. The "transparent" keyword is equivalent to ___ RGBA value.

1. rgba(0,0,0,0)
2. rgba(0,0,0,1)
3. rgba(255,255,255,0)
4. rgba(255,255,255,1)

Answer: A) rgba(0,0,0,0)

Explanation:

The transparent keyword is equivalent to rgba(0,0,0,0).

Discuss this Question

---

16. Which keyword is like a variable that holds the current value of the color property of an element?

1. color
2. current_color
3. currentcolor
4. elementcolor

Answer: C) currentcolor

Explanation:

The currentcolor keyword is just like a variable that holds the current value of the color property of an element.

Example:

div.example1 {
  color: #006969;
  border: 2px solid currentcolor;
}

Discuss this Question

---

17. Which keyword inherits its value from its parent element?

1. inheritfromparent
2. parenetvalue
3. inherit
4. inherits

Answer: C) inherit

Explanation:

The inherit keyword inherits its value from its parent element.

Example:

div.example1 {
  border: 1px solid #006969;
}

p.main {
  border: inherit;
}

Discuss this Question

---

18. What are the names of different gradients in CSS?

1. Linear Gradients, Radial Gradients, and Conic Gradients
2. Linear Gradients, Vertical Gradients, and Corner Gradients
3. Horizontal Gradients, Vertical Gradients, and Conic Gradients
4. Linear Gradients, Radial Gradients, Vertical Gradients, and Conic Gradients

Answer: A) Linear Gradients, Radial Gradients, and Conic Gradients

Explanation:

CSS defines three types of gradients:

• Linear Gradients
• Radial Gradients
• Conic Gradients

Discuss this Question

---

19. Which gradients define the color by their center?

1. Linear Gradients
2. Radial Gradients
3. Conic Gradients
4. Both A. and B.

Answer: B) Radial Gradients

Explanation:

Radial Gradients define color by their center.

Discuss this Question

---

20. Which gradients rotate color around a center point?

1. Linear Gradients
2. Radial Gradients
3. Conic Gradients
4. Both A. and B.

Answer: C) Conic Gradients

Explanation:

Conic Gradients rotate color around a center point.

Discuss this Question