CSS MCQ
1) CSS stands for -
a. Cascade style sheets
b. Color and style sheets
c. Cascading style sheets
d. None of the above
Hide Answer Workspace
Answer: (c) Cascading style sheets
Explanation: CSS stands for Cascading Style Sheet. CSS is used to design HTML tags. CSS
is a widely used language on the web. HTML, CSS and JavaScript are used for web
designing. It helps the web designers to apply style on HTML tags.
2) Which of the following is the correct syntax for referring the external style sheet?
a. <style src = example.css>
b. <style src = "example.css" >
c. <stylesheet> example.css </stylesheet>
d. <link rel="stylesheet" type="text/css" href="example.css">
Hide Answer Workspace
Answer: (d) <link rel="stylesheet" type="text/css" href="example.css">
Explanation: The external style sheet is generally used when you want to make changes
on multiple pages. It uses the <link> tag on every pages and the <link> tag should be
put inside the head section.
3) The property in CSS used to change the background color of an element is -
a. bgcolor
b. color
c. background-color
d. All of the above
Hide Answer Workspace
Answer: (c) background-color
Explanation: The background-color property is used to specify the background color of
an element. The background of an element covers the total size, including the padding
and border and excluding margin.
4) The property in CSS used to change the text color of an element is -
Backward Skip 10sPlay VideoForward Skip 10s
ADVERTISEMENT
a. bgcolor
b. color
c. background-color
d. All of the above
Hide Answer Workspace
Answer: (b) color
Explanation: The color property in CSS is used to set the color of HTML elements.
Typically, this property is used to set the font color of an element. In CSS, we use color
values for specifying the color. We can also use this property for the border-color and
other decorative effects.
5) The CSS property used to control the element's font-size is -
a. text-style
b. text-size
c. font-size
d. None of the above
Hide Answer Workspace
Answer: (c) font-size
Explanation: The font-size property in CSS is used to specify the height and size of the
font. It affects the size of the text of an element. Its default value is medium and can be
applied to every element.
6) The HTML attribute used to define the inline styles is -
a. style
b. styles
c. class
d. None of the above
Hide Answer Workspace
Answer: (a) style
Explanation: If you want to use inline CSS, you should use the style attribute to the
relevant tag. The inline CSS is also a method to insert style sheets in HTML document. This
method mitigates some advantages of style sheets so it is advised to use this method
sparingly.
7) The HTML attribute used to define the internal stylesheet is -
a. <style>
b. style
c. <link>
d. <script>
Hide Answer Workspace
Answer: (a) <style>
Explanation: The internal style sheet is used to add a unique style for a single document.
It is defined in <head> section of the HTML page inside the <style> tag.
8) Which of the following CSS property is used to set the background image of an element?
a. background-attachment
b. background-image
c. background-color
d. None of the above
Hide Answer Workspace
Answer: (b) background-image
Explanation: The background-image property is used to set an image as a background
of an element. By default the image covers the entire element.
9) Which of the following is the correct syntax to make the background-color of all paragraph
elements to yellow?
a. p {background-color : yellow;}
b. p {background-color : #yellow;}
c. all {background-color : yellow;}
d. all p {background-color : #yellow;}
Hide Answer Workspace
Answer: (a) p {background-color : yellow;}
Explanation: The background-color property in CSS is used to change the background
color of an element. The correct syntax to make the background color of all paragraph
elements to yellow is: p {background-color : yellow;}.
10) Which of the following is the correct syntax to display the hyperlinks without any
underline?
ADVERTISEMENT
ADVERTISEMENT
a. a {text-decoration : underline;}
b. a {decoration : no-underline;}
c. a {text-decoration : none;}
d. None of the above
Hide Answer Workspace
Answer: (c) a {text-decoration : none;}
Explanation: The text-decoration property in CSS is used to decorate the content of the
text. It adds lines under, above, and through the text. It sets the appearance of decorative
lines on text. The correct syntax to display the hyperlinks without any underline is: a {text-
decoration : none;}.
11) Which of the following property is used as the shorthand property for the padding
properties?
a. padding-left
b. padding-right
c. padding
d. All of the above
Hide Answer Workspace
Answer: (c) padding
Explanation: CSS padding property is used to define the space between the element
content and the element border. Top, bottom, left and right padding can be changed
independently using separate properties. By using the shorthand padding property we
can also change all padding properties at once.
12) The CSS property used to make the text bold is -
a. font-weight : bold
b. weight: bold
c. font: bold
d. style: bold
Hide Answer Workspace
Answer: (a) font-weight : bold
Explanation: The font-weight property is used for setting the thickness and boldness of
the font. It is used to define the weight of the text. The available weight depends on the
font-family, which is used by the browser.
13) Are the negative values allowed in padding property?
a. Yes
b. No
c. Can't say
d. May be
Hide Answer Workspace
Answer: (b) No
Explanation: The negative values are not allowed when using the padding property.
14) Which of the following property is used as the shorthand property of margin properties?
a. margin-left
b. margin-right
c. margin
d. None of the above
Hide Answer Workspace
Answer: (c) margin
Explanation: CSS Margin property is used to define the space around elements. The Top,
bottom, left and right margin can be changed independently using separate properties.
By using the shorthand margin property we can change all margin properties at once.
15) The CSS property used to specify the transparency of an element is -
a. opacity
b. filter
c. visibility
d. overlay
Hide Answer Workspace
Answer: (a) opacity
Explanation: The CSS opacity property is used to specify the transparency of an element.
In simple words, you can say that it specifies the clarity of the image.
16) Which of the following is used to specify the subscript of text using CSS?
a. vertical-align: sub
b. vertical-align: super
c. vertical-align: subscript
d. None of the above
Hide Answer Workspace
Answer: (a) vertical-align : sub
Explanation: In CSS, the vertical-align property is used to make the text superscript or
subscript. The "sub" of vertical-align property is used to make the text subscript in CSS.
The subscript text appears in a smaller font and the half character below the normal line.
It is generally used to write chemical equations or chemical formulas such as H2O, H2SO4,
etc.
17) Which of the following CSS property is used to specify the space between every letter
inside an element?
ADVERTISEMENT
a. alpha-spacing
b. character-spacing
c. letter-spacing
d. alphabet-spacing
Hide Answer Workspace
Answer: (c) letter-spacing
Explanation: The letter-spacing property in CSS is used to control the space between
every letter inside an element or the block of text. It sets the spacing behavior between
the characters of the text. Using this property, we can increase or decrease the space
between the characters of the text.
18) The CSS property used to specify whether the text is written in the horizontal or vertical
direction?
a. writing-mode
b. text-indent
c. word-break
d. None of the above
Hide Answer Workspace
Answer: (a) writing-mode
Explanation: The writing-mode CSS property specifies whether the text is written in the
vertical or horizontal direction. This property sets whether the lines of text are laid out
vertically or horizontally. It specifies the direction in which the content flows on the page.
19) Which of the following syntax is correct in CSS to make each word of a sentence start with
a capital letter?
a. text-style : capital;
b. transform : capitalize;
c. text-transform : capital;
d. text-transform : capitalize;
Hide Answer Workspace
Answer: (d) text-transform : capitalize;
Explanation: The text-transform CSS property allows us to change the case of the text. It
is used to control text capitalization. The "capitalize" value of the text-transform property
transforms the first character of each word to uppercase. It will not capitalize the first
letter after the number.
20) How to select the elements with the class name "example"?
ADVERTISEMENT
a. example
b. #example
c. .example
d. Class example
Hide Answer Workspace
Answer: (c) .example
Explanation: The class selector selects HTML elements with a specific class attribute. It is
used with a period character . (full stop symbol) followed by the class name. A class name
should not be started with a number.
21) Which of the following is the correct syntax to select all paragraph elements in a div
element?
a. div p
b. p
c. div#p
d. div ~ p
Hide Answer Workspace
Answer: (a) div p
Explanation: The CSS descendant selector is used to match the descendant elements of
a particular element and represent it using a single space. The word descendant indicates
nested anywhere in the DOM tree.
22) Which of the following is the correct syntax to select the p siblings of a div element?
a. p
b. div + p
c. div p
d. div ~ p
Hide Answer Workspace
Answer: (d) div ~ p
Explanation: General sibling selector uses the tlide (~) sign as the separator between the
elements. It can be used for selecting the group of elements that share the common
parent element. The syntax div ~ p will select the paragraph elements that are the siblings
of the div element.
23) The CSS property used to draw a line around the elements outside the border?
a. border
b. outline
c. padding
d. line
Hide Answer Workspace
Answer: (b) outline
Explanation: The "outline" property in CSS facilitates you to draw an extra border around
an element to get visual attention. It is similar to the CSS border property. It is as easy as
to apply as a border.
24) Which of the following CSS property is used to add shadows to the text?
a. text-shadow
b. text-stroke
c. text-overflow
d. text-decoration
Hide Answer Workspace
Answer: (a) text-shadow
Explanation: The CSS text-shadow property adds shadows to the text. It accepts the
comma-separated list of shadows that applied to the text. It applies one or more than one
text-shadow effect on the element's text content.
25) Which of the following is not a value of the font-variant property in CSS?
a. normal
b. small-caps
c. large-caps
d. inherit
Hide Answer Workspace
Answer: (c) large-caps
Explanation: CSS font-variant property specifies how to set a font variant of an element.
Its values may be normal and small-caps.
26) Which of the following CSS property is used to specify whether the table cells share the
common or separate border?
a. border-collapse
b. border-radius
c. border-spacing
d. None of the above
Hide Answer Workspace
Answer: (a) border-collapse
Explanation: The border-collapse CSS property is used to set the border of the table cells
and specifies whether the table cells share a separate or common border. This property
has two main values that are separate and collapse.
27) The CSS property used to make the rounded borders, or rounded corners around an
element is -
a. border-collapse
b. border-radius
c. border-spacing
d. None of the above
Hide Answer Workspace
Answer: (b) border-radius
Explanation: The border-radius CSS property sets the rounded borders and provides the
rounded corners around an element, tags, or div. It defines the radius of the corners of an
element.
28) The CSS property used to set the distance between the borders of the adjacent cells in
the table is -
a. border-collapse
b. border-radius
c. border-spacing
d. None of the above
Hide Answer Workspace
Answer: (c) border-spacing
Explanation: This CSS property is used to set the distance between the borders of the
adjacent cells in the table. It applies only when the border-collapse property is set to
separate.
29) Which of the following selector in CSS is used to select the elements that do not match
the selectors?
a. :! selector
b. :not selector
c. :empty selector
d. None of the above
Hide Answer Workspace
Answer: (b) :not selector
Explanation: The :not selector in CSS matches the elements that are not the specified
element/selector.
30) Which of the following is not a type of combinator?
a. >
b. ~
c. +
d. *
Hide Answer Workspace
Answer: (d) *
Explanation: CSS Combinators clarifies the relationship between two selectors. There are
four types of combinators in CSS that are listed as follows:
o General sibling selector (~)
o Adjacent sibling selector (+)
o Child selector (>)
o Descendant selector (space)
31) Which of the following CSS property defines how an image or video fits into container
with established height and width?
a. object-fit
b. object-position
c. position
d. None of the above
Hide Answer Workspace
Answer: (a) object-fit
Explanation: The object-fit CSS property specifies how a video or an image is resized to
fit its content box. It defines how an element fits into the container with an established
width and height. It is generally applied to images or videos.
32) Which type of CSS is used in the below code?
1. <p style = "border:2px solid red;">
a. Inline CSS
b. Internal CSS
c. External CSS
d. None of the above
Hide Answer Workspace
Answer: (a) Inline CSS
Explanation: If you want to use inline CSS, you should use the style attribute to the
relevant tag. The inline CSS is also a method to insert style sheets in HTML document.
33) Which of the following CSS property specifies the origin of the background-image?
a. background-origin
b. background-attachment
c. background-size
d. None of the above
Hide Answer Workspace
Answer: (a) background-origin
Explanation: The background-origin CSS property helps us to adjust the background
image of the webpage. It specifies the background-position area, i.e., the origin of a
background image. This CSS property will not work when the value of the background-
attachment is set to be fixed. It is similar to the background-clip property, except that it
resizes the background instead of clipping it.
34) The CSS property used to set the maximum width of the element's content box is -
a. max-width property
b. height property
c. max-height property
d. position property
Hide Answer Workspace
Answer: (a) max-width property
Explanation: The max-width property in CSS is used to set the maximum width of the
element's content box. It means that the width of the content box can be smaller than the
max-width value but cannot be greater. It sets the upper bound on the element's width.
35) Which if the following CSS function allows us to perform calculations?
a. calc() function
b. calculator() function
c. calculate() function
d. cal() function
Hide Answer Workspace
Answer: (a) calc() function
Explanation: The calc() is an inbuilt CSS function that allows us to perform the
calculations. It can be used to calculate length, percentage, time, number, integer
frequency, or angle. It uses the four simple arithmetic operators add (+), multiply (*),
subtract (-), and divide (/).
36) The CSS property used to set the maximum height of the element's content box is -
a. max-width property
b. height property
c. max-height property
d. position property
Hide Answer Workspace
Answer: (c) max-height property
Explanation: The max-height property in CSS sets the maximum height of the element's
content box. It means that the height of the content box can be smaller than the max-
height value but cannot be greater. It sets the upper bound on the element's height.
37) The CSS property used to set the minimum width of the element's content box is -
a. max-width property
b. min-width property
c. width property
d. All of the above
Hide Answer Workspace
Answer: (b) min-width property
Explanation: The min-width property is used to set the minimum width of the element's
content box. It means that the width of the content box can be greater than the min-
width value but cannot be shorter. It sets the lower bound on the element's width.
38) Which of the following CSS property is used to represent the overflowed text which is not
visible to the user?
a. text-shadow
b. text-stroke
c. text-overflow
d. text-decoration
Hide Answer Workspace
Answer: (c) text-overflow
Explanation: The text-overflow property specifies the representation of overflowed text,
which is not visible to the user. It signals the user about the content that is not visible.
This property helps us to decide whether the text should be clipped, show some dots
(ellipsis), or display a custom string.
39) The CSS property which is used to define the set the difference between two lines of your
content is -
a. min-height property
b. max-height property
c. line-height property
d. None of the above
Hide Answer Workspace
Answer: (c) line-height property
Explanation: The CSS line-height property is used to define the minimal height of line
boxes within the element. It sets the differences between the two lines of your content. It
defines the amount of space above and below inline elements.
40) The CSS property which is used to define the set the difference between two lines of your
content is -
a. min-height property
b. max-height property
c. line-height property
d. None of the above
Hide Answer Workspace
Answer: (c) line-height property
Explanation: The CSS line-height property is used to define the minimal height of line
boxes within the element. It sets the differences between the two lines of your content. It
defines the amount of space above and below inline elements.
41) Which of the following CSS property is used to add stroke to the text?
a. text-stroke property
b. text-transform property
c. text-decoration property
d. None of the above
Hide Answer Workspace
Answer: (a) text-stroke property
Explanation: The text-stroke property in CSS is used to add a stroke to the text and also
provides decoration options for them. It defines the color and width of strokes for text
characters.
42) Which of the following CSS property is used to set the blend mode for each background
layer of an element?
a. background-blend-mode property
b. background-collapse property
c. background-transform property
d. background-origin property
Hide Answer Workspace
Answer: (a) background-blend-mode property
Explanation: The background-blend-mode property in CSS is used to set the blend mode
for each background layer (image/color) of an element. It defines how the background
image of an element blends with the background color of the element. We can blend the
background images together or can blend them with background-color.
43) The CSS property used to specify the transparency of an element is -
a. Hover
b. opacity
c. clearfix
d. overlay
Hide Answer Workspace
Answer: (b) opacity
Explanation: The CSS opacity property is used to specify the transparency of an element.
In simple words, you can say that it specifies the clarity of the image.
44) Which of the following CSS property is used to set the horizontal alignment of a table-
cell box or the block element?
a. text-align property
b. text-transform property
c. text-shadow property
d. text-decoration
Hide Answer Workspace
Answer: (a) text-align property
Explanation: The text-align property in CSS is used to set the horizontal alignment of a
table-cell box or the block element. It is similar to the vertical-align property but in the
horizontal direction.
45) The CSS property which is used to set the text wider or narrower compare to the default
width of the font is -
a. font-stretch property
b. font-weight property
c. text-transform property
d. font-variant property
Hide Answer Workspace
Answer: (a) font-stretch property
Explanation: The font-stretch property in CSS allows us to select a normal, expanded, or
condensed face from the font's family. This property sets the text wider or narrower to
compare to the default width of the font. It will not work on any font but only works on
the font-family that has a width-variant face.
46) Which of the following CSS property is used to specify the type of quotation mark?
a. quotes property
b. z-index property
c. hyphens property
d. None of the above
Hide Answer Workspace
Answer: (a) quotes property
Explanation: The quotes property in CSS specifies the type of quotation mark for the
quotation used in the sentence. It defines which quotation mark to be used when the
quotation is inserted by using the open-quote and close-quote values of the content
property.
47) The CSS property used to specify the order of flex item in the grid container is -
a. order property
b. float property
c. overflow property
d. None of the above
Hide Answer Workspace
Answer: (a) order property
Explanation: This CSS property specifies the order of the flex item in the grid container
or flex. It is basically used for ordering the flex items. It is to note that if the element isn't
flexible, then this property will not work.
48) The CSS property used to set the indentation of the first line in a block of text is -
a. text-indent property
b. text-stroke property
c. text-decoration property
d. text-overflow property
Hide Answer Workspace
Answer: (a) text-indent property
Explanation: This CSS property sets the indentation of the first line in a block of text. It
specifies the amount of horizontal space that puts before the lines of text.
49) Which of the following CSS property creates a clipping region and specifies the visible
area of the element?
a. visibility property
b. background-clip property
c. clip-path property
d. None of the above
Hide Answer Workspace
Answer: (c) clip-path property
Explanation: The clip-path CSS property is used to create a clipping region and specifies
the element's area that should be visible. The area inside the region will be visible, while
the outside area is hidden. Anything outside the clipping will be clipped by browsers,
including borders, text-shadows, and many more.
50) The correct syntax to give a line over text is -
a. text-decoration: line-through
b. text-decoration: none
c. text-decoration: overline
d. text-decoration: underline
Hide Answer Workspace
Answer: (c) text-decoration: overline
Explanation: The text-decoration is a CSS property that decorates the content of the text.
It sets the kind of text-decoration like overline, underline, or line-through.
