CSS MCQ

1) CSS stands for -

Cascade style sheets
Color and style sheets
Cascading style sheets
None of the above

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?

<style src = example.css>
<style src = "example.css" >
<stylesheet> example.css </stylesheet>
<link rel="stylesheet" type="text/css" href="example.css">

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 -

bgcolor
color
background-color
All of the above

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 -

bgcolor
color
background-color
All of the above

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 -

text-style
text-size
font-size
None of the above

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 -

style
styles
class
None of the above

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 -

<style>
style
<link>
<script>

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?

background-attachment
background-image
background-color
None of the above

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?

p {background-color : yellow;}
p {background-color : #yellow;}
all {background-color : yellow;}
all p {background-color : #yellow;}

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?

a {text-decoration : underline;}
a {decoration : no-underline;}
a {text-decoration : none;}
None of the above

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?

padding-left
padding-right
padding
All of the above

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 -

font-weight : bold
weight: bold
font: bold
style: bold

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?

Yes
No
Can't say
May be

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?

margin-left
margin-right
margin
None of the above

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 -

opacity
filter
visibility
overlay

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?

vertical-align: sub
vertical-align: super
vertical-align: subscript
None of the above

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?

alpha-spacing
character-spacing
letter-spacing
alphabet-spacing

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?

writing-mode
text-indent
word-break
None of the above

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?

text-style : capital;
transform : capitalize;
text-transform : capital;
text-transform : capitalize;

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"?

example
#example
.example
Class example

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?

div p
p
div#p
div ~ p

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?

p
div + p
div p
div ~ p

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?

border
outline
padding
line

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?

text-shadow
text-stroke
text-overflow
text-decoration

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?

normal
small-caps
large-caps
inherit

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?

border-collapse
border-radius
border-spacing
None of the above

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 -

border-collapse
border-radius
border-spacing
None of the above

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 -

border-collapse
border-radius
border-spacing
None of the above

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?

:! selector
:not selector
:empty selector
None of the above

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?

Answer: (d) *

Explanation: CSS Combinators clarifies the relationship between two selectors. There are four types of combinators in CSS that are listed as follows:

General sibling selector (~)
Adjacent sibling selector (+)
Child selector (>)
Descendant selector (space)

31) Which of the following CSS property defines how an image or video fits into container with established height and width?

object-fit
object-position
position
None of the above

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?

Inline CSS
Internal CSS
External CSS
None of the above

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?

background-origin
background-attachment
background-size
None of the above

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 -

max-width property
height property
max-height property
position property

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?

calc() function
calculator() function
calculate() function
cal() function

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 -

max-width property
height property
max-height property
position property

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 -

max-width property
min-width property
width property
All of the above

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?

text-shadow
text-stroke
text-overflow
text-decoration

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 -

min-height property
max-height property
line-height property
None of the above

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 -

min-height property
max-height property
line-height property
None of the above

Answer: (c) line-height property

41) Which of the following CSS property is used to add stroke to the text?

text-stroke property
text-transform property
text-decoration property
None of the above

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?

background-blend-mode property
background-collapse property
background-transform property
background-origin property

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 -

Hover
opacity
clearfix
overlay

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?

text-align property
text-transform property
text-shadow property
text-decoration

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 -

font-stretch property
font-weight property
text-transform property
font-variant property

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?

quotes property
z-index property
hyphens property
None of the above

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 -

order property
float property
overflow property
None of the above

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 -

text-indent property
text-stroke property
text-decoration property
text-overflow property

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?

visibility property
background-clip property
clip-path property
None of the above

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 -

text-decoration: line-through
text-decoration: none
text-decoration: overline
text-decoration: underline

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.

Next TopicCSS Tutorial

← prev next →