14 Sep 100 CSS MCQ (Multiple Choice Questions) with Answers

Posted at 21:33h in mcq by

1) What does CSS stand for?
  1. Computer Style Sheets
  2. Cascading Style Sheets
  3. Creative Style Sheets
  4. Colorful Style Sheets
Show Answer
Answer: b
Explanation
CSS stands for Cascading Style Sheets — the language used to describe the presentation (layout, colors, fonts) of HTML documents.

2) Which HTML tag is used to define an internal style sheet?

  1. <script>
  2. <style>
  3. <css>
  4. <link>
Show Answer
Answer: b
Explanation
The <style> element (usually placed in the <head>) holds an internal stylesheet. The <link> tag is used for an external stylesheet.

3) Which HTML attribute is used to define inline styles?

  1. class
  2. style
  3. styles
  4. font
Show Answer
Answer: b
Explanation
The global style attribute applies CSS declarations directly to a single element, e.g. <p style=”color:red;”>.

4) Which is the correct CSS syntax?

  1. body {color: black;}
  2. {body: color=black;}
  3. body:color=black;
  4. {body;color:black;}
Show Answer
Answer: a
Explanation
A CSS rule is written as selector followed by a declaration block in braces: body {color: black;} — property and value separated by a colon.

5) How do you insert a comment in a CSS file?

  1. // this is a comment
  2. /* this is a comment */
  3. ‘ this is a comment
  4. // this is a comment //
Show Answer
Answer: b
Explanation
CSS comments start with /* and end with */. The // style belongs to languages like JavaScript, not CSS.

6) Which property is used to change the background color?

  1. color
  2. bgcolor
  3. background-color
  4. background
Show Answer
Answer: c
Explanation
background-color sets the background colour of an element. color sets the text colour, and bgcolor is an obsolete HTML attribute.

7) How do you add a background color for all <h1> elements?

  1. h1 {background-color:#FFFFFF;}
  2. all.h1 {background-color:#FFFFFF;}
  3. h1.all {background-color:#FFFFFF;}
  4. h1 {bgcolor:#FFFFFF;}
Show Answer
Answer: a
Explanation
An element selector targets every matching tag, so h1 {background-color:#FFFFFF;} applies to all <h1> elements.

8) Which CSS property controls the text size?

  1. font-style
  2. text-size
  3. font-size
  4. text-style
Show Answer
Answer: c
Explanation
font-size sets the size of the text (e.g. px, em, rem, %). There is no CSS property called text-size.

9) What is the correct CSS syntax for making all the <p> elements bold?

  1. p {text-size:bold;}
  2. p {font-weight:bold;}
  3. <p style=”font-size:bold;”>
  4. p {text-weight:bold;}
Show Answer
Answer: b
Explanation
Bold text is controlled by font-weight:bold; (or the numeric value 700).

10) How do you display hyperlinks without an underline?

  1. a {text-decoration:none;}
  2. a {decoration:no underline;}
  3. a {underline:none;}
  4. a {text-decoration:no underline;}
Show Answer
Answer: a
Explanation
text-decoration:none; removes the default underline from anchor elements.

11) How do you make each word in a text start with a capital letter?

  1. text-transform:capitalize
  2. text-transform:uppercase
  3. text-transform:lowercase
  4. text-transform:capitalize-all
Show Answer
Answer: a
Explanation
text-transform:capitalize capitalizes the first letter of every word. There is no capitalize-all value.

12) Which property is used to change the font of an element?

  1. font-family
  2. font-style
  3. font-weight
  4. text-font
Show Answer
Answer: a
Explanation
font-family sets the typeface (e.g. Arial, “Times New Roman”, sans-serif).

13) How do you make the text bold?

  1. font:bold;
  2. font-weight:bold;
  3. style:bold;
  4. text:bold;
Show Answer
Answer: b
Explanation
font-weight:bold; makes the text bold. font:bold; is invalid shorthand without a size and family.

14) Which property is used to change the left margin of an element?

  1. padding-left
  2. margin-left
  3. indent
  4. left-margin
Show Answer
Answer: b
Explanation
margin-left sets the left outer margin. padding-left sets the left inner padding instead.

15) How do you select an element with id “demo”?

  1. .demo
  2. #demo
  3. demo
  4. *demo
Show Answer
Answer: b
Explanation
The hash symbol (#) is the id selector, so #demo targets the element with id=”demo”.

16) How do you select elements with class name “test”?

  1. #test
  2. .test
  3. *test
  4. test
Show Answer
Answer: b
Explanation
The period (.) is the class selector, so .test targets all elements with class=”test”.

17) How do you select all <p> elements inside a <div> element?

  1. div p
  2. div.p
  3. div > p
  4. div + p
Show Answer
Answer: a
Explanation
div p is the descendant selector and matches every <p> at any depth inside a <div>. div > p matches only direct children.

18) Which property is used to set the text color?

  1. text-color
  2. color
  3. font-color
  4. foreground
Show Answer
Answer: b
Explanation
color sets the foreground (text) colour of an element.

19) Which property is used to set the background image?

  1. background-image
  2. bg-image
  3. image
  4. background
Show Answer
Answer: a
Explanation
background-image:url(“image.jpg”); places an image behind an element.

20) Which property is used to align text?

  1. text-align
  2. align
  3. text-style
  4. font-align
Show Answer
Answer: a
Explanation
text-align aligns inline content horizontally: left, right, center or justify.

21) What is the default value of the position property?

  1. static
  2. relative
  3. absolute
  4. fixed
Show Answer
Answer: a
Explanation
static is the default; the element simply follows the normal document flow and offset properties have no effect.

22) Which property is used to make an element a flex container?

  1. display:flex
  2. flex-direction
  3. justify-content
  4. align-items
Show Answer
Answer: a
Explanation
display:flex turns an element into a flex container so its children become flex items.

23) Which property is used to change the order of flex items?

  1. order
  2. flex-order
  3. item-order
  4. flex
Show Answer
Answer: a
Explanation
The order property changes the visual sequence of flex items without altering the source order.

24) Which property is used to create a grid container?

  1. display:grid
  2. grid-template-columns
  3. grid-gap
  4. grid
Show Answer
Answer: a
Explanation
display:grid establishes a grid formatting context; the template properties then define the tracks.

25) Which property is used to add space between grid items?

  1. grid-gap
  2. gap
  3. Both a and b
  4. grid-spacing
Show Answer
Answer: c
Explanation
Both work: gap is the modern standard property and grid-gap is its legacy alias for grid layouts.

26) Which CSS property is used to make an element transparent?

  1. opacity
  2. transparent
  3. visibility
  4. filter
Show Answer
Answer: a
Explanation
opacity takes a value from 0 (fully transparent) to 1 (fully opaque) and affects the whole element.

27) What does the z-index property do?

  1. Sets the zoom level
  2. Sets the stack order of elements
  3. Sets the horizontal position
  4. Sets the vertical position
Show Answer
Answer: b
Explanation
z-index controls the stacking order along the z-axis; it only applies to positioned elements (or flex/grid items).

28) Which property is used to change the cursor style?

  1. cursor
  2. pointer
  3. mouse
  4. pointer-style
Show Answer
Answer: a
Explanation
The cursor property accepts values such as pointer, default, text, move and crosshair.

29) Which property is used to add shadow to text?

  1. text-shadow
  2. box-shadow
  3. shadow
  4. font-shadow
Show Answer
Answer: a
Explanation
text-shadow adds a shadow behind the glyphs, e.g. text-shadow: 2px 2px 4px #888;

30) Which property is used to add shadow to a box?

  1. text-shadow
  2. box-shadow
  3. shadow
  4. element-shadow
Show Answer
Answer: b
Explanation
box-shadow applies a shadow around the element’s border box.

31) Which property is used to round the corners of an element?

  1. border-radius
  2. corner-radius
  3. border-round
  4. round-corner
Show Answer
Answer: a
Explanation
border-radius rounds the corners of the element’s border box.

32) Which property is used to set the width of an element?

  1. width
  2. element-width
  3. size
  4. width-size
Show Answer
Answer: a
Explanation
The width property sets the horizontal size of an element’s content box (or border box with box-sizing:border-box).

33) Which property is used to set the height of an element?

  1. height
  2. element-height
  3. size
  4. height-size
Show Answer
Answer: a
Explanation
The height property sets the vertical size of an element.

34) What is the box model in CSS?

  1. A model for designing boxes
  2. A model that describes the content, padding, border, and margin of an element
  3. A model for flexbox
  4. A model for grid
Show Answer
Answer: b
Explanation
The CSS box model describes how every element is made up of content, padding, border and margin, from the inside out.

35) Which property is used to set the padding of an element?

  1. padding
  2. margin
  3. border
  4. spacing
Show Answer
Answer: a
Explanation
padding is the space between the content and the border, inside the element.

36) Which property is used to set the margin of an element?

  1. padding
  2. margin
  3. border
  4. spacing
Show Answer
Answer: b
Explanation
margin is the space outside the border, separating the element from its neighbours.

37) Which property is used to set the border of an element?

  1. border
  2. outline
  3. frame
  4. edge
Show Answer
Answer: a
Explanation
The border shorthand sets border-width, border-style and border-color in one declaration.

38) Which property is used to set the font size?

  1. font-size
  2. text-size
  3. size
  4. font-scale
Show Answer
Answer: a
Explanation
font-size sets the size of the font, e.g. font-size:16px;

39) Which property is used to set the font family?

  1. font-family
  2. font-style
  3. font-weight
  4. text-font
Show Answer
Answer: a
Explanation
font-family specifies a prioritised list of typefaces, ending with a generic family such as serif or sans-serif.

40) Which property is used to set the font style (italic)?

  1. font-style
  2. font-family
  3. font-weight
  4. text-style
Show Answer
Answer: a
Explanation
font-style:italic; slants the text. Other values are normal and oblique.

41) Which property is used to set the font weight (bold)?

  1. font-weight
  2. font-style
  3. font-family
  4. text-weight
Show Answer
Answer: a
Explanation
font-weight sets the thickness of the glyphs — normal, bold, or numeric values from 100 to 900.

42) Which property is used to set the line height?

  1. line-height
  2. text-height
  3. font-height
  4. line-spacing
Show Answer
Answer: a
Explanation
line-height sets the distance between lines of text, e.g. line-height:1.5;

43) Which property is used to set the letter spacing?

  1. letter-spacing
  2. word-spacing
  3. text-spacing
  4. font-spacing
Show Answer
Answer: a
Explanation
letter-spacing adds or removes space between individual characters (also called tracking).

44) Which property is used to set the word spacing?

  1. letter-spacing
  2. word-spacing
  3. text-spacing
  4. font-spacing
Show Answer
Answer: b
Explanation
word-spacing controls the gap between whole words, unlike letter-spacing which affects characters.

45) Which property is used to set the text decoration?

  1. text-decoration
  2. font-decoration
  3. text-style
  4. decoration
Show Answer
Answer: a
Explanation
text-decoration adds lines to text — underline, overline, line-through or none.

46) Which property is used to set the text transform?

  1. text-transform
  2. font-transform
  3. text-style
  4. transform
Show Answer
Answer: a
Explanation
text-transform changes capitalization: uppercase, lowercase, capitalize or none.

47) Which property is used to set the text indent?

  1. text-indent
  2. indent
  3. text-padding
  4. font-indent
Show Answer
Answer: a
Explanation
text-indent indents the first line of a block of text.

48) Which property is used to set the text alignment?

  1. text-align
  2. align
  3. font-align
  4. text-style
Show Answer
Answer: a
Explanation
text-align sets the horizontal alignment of inline content within a block.

49) Which property is used to set the vertical alignment?

  1. vertical-align
  2. align-vertical
  3. text-align
  4. vertical-style
Show Answer
Answer: a
Explanation
vertical-align aligns inline-level and table-cell content vertically (baseline, top, middle, bottom).

50) Which property is used to set the display property?

  1. display
  2. visibility
  3. show
  4. view
Show Answer
Answer: a
Explanation
display determines the box type of an element: block, inline, inline-block, flex, grid, none, etc.

51) What does display: none do?

  1. Hides the element but keeps its space
  2. Hides the element and removes it from the layout
  3. Makes the element transparent
  4. Shows the element
Show Answer
Answer: b
Explanation
display:none removes the element from the render tree entirely, so it takes up no space at all.

52) What does visibility: hidden do?

  1. Hides the element but keeps its space
  2. Hides the element and removes it from the layout
  3. Makes the element transparent
  4. Shows the element
Show Answer
Answer: a
Explanation
visibility:hidden makes the element invisible but it still occupies its space in the layout.

53) Which property is used to set the position of an element?

  1. position
  2. placement
  3. location
  4. spot
Show Answer
Answer: a
Explanation
The position property accepts static, relative, absolute, fixed or sticky.

54) Which position value positions an element relative to its normal position?

  1. static
  2. relative
  3. absolute
  4. fixed
Show Answer
Answer: b
Explanation
relative offsets the element from where it would normally sit, while still reserving its original space.

55) Which position value positions an element relative to the browser window?

  1. static
  2. relative
  3. absolute
  4. fixed
Show Answer
Answer: d
Explanation
fixed pins the element to the viewport, so it does not move when the page is scrolled.

56) Which position value positions an element relative to its nearest positioned ancestor?

  1. static
  2. relative
  3. absolute
  4. fixed
Show Answer
Answer: c
Explanation
absolute removes the element from the flow and positions it against the nearest ancestor that is not static.

57) Which property is used to set the top, right, bottom, left of a positioned element?

  1. top, right, bottom, left
  2. margin
  3. padding
  4. position-offset
Show Answer
Answer: a
Explanation
The four offset properties top, right, bottom and left move a positioned element from its containing block edges.

58) Which property is used to set the float of an element?

  1. float
  2. clear
  3. position
  4. display
Show Answer
Answer: a
Explanation
float pushes an element to the left or right, letting inline content wrap around it.

59) Which property is used to clear floats?

  1. float
  2. clear
  3. position
  4. display
Show Answer
Answer: b
Explanation
The clear property (left, right, both) prevents an element from sitting beside a floated element.

60) Which property is used to set the overflow behavior?

  1. overflow
  2. scroll
  3. clip
  4. hide
Show Answer
Answer: a
Explanation
overflow decides what happens to content that is too large for its box: visible, hidden, scroll or auto.

61) Which property is used to set the opacity of an element?

  1. opacity
  2. transparent
  3. visibility
  4. filter
Show Answer
Answer: a
Explanation
opacity accepts values between 0 and 1 and applies to the element together with all its children.

62) Which property is used to set the background color?

  1. background-color
  2. color
  3. bgcolor
  4. background
Show Answer
Answer: a
Explanation
background-color sets a solid colour behind the element’s content, padding and border.

63) Which property is used to set the background image?

  1. background-image
  2. bg-image
  3. image
  4. background
Show Answer
Answer: a
Explanation
background-image accepts url(…) values and can also define gradients.

64) Which property is used to set the background repeat?

  1. background-repeat
  2. bg-repeat
  3. repeat
  4. background
Show Answer
Answer: a
Explanation
background-repeat controls tiling: repeat, repeat-x, repeat-y or no-repeat.

65) Which property is used to set the background position?

  1. background-position
  2. bg-position
  3. position
  4. background
Show Answer
Answer: a
Explanation
background-position sets the starting position of a background image, e.g. center top.

66) Which property is used to set the background size?

  1. background-size
  2. bg-size
  3. size
  4. background
Show Answer
Answer: a
Explanation
background-size scales a background image, using lengths, percentages, cover or contain.

67) Which property is used to set the background attachment?

  1. background-attachment
  2. bg-attachment
  3. attachment
  4. background
Show Answer
Answer: a
Explanation
background-attachment decides whether the background scrolls with the page (scroll) or stays fixed (fixed).

68) Which property is used to set the border style?

  1. border-style
  2. border
  3. style
  4. border-type
Show Answer
Answer: a
Explanation
border-style sets the line style: solid, dashed, dotted, double, groove, ridge and so on.

69) Which property is used to set the border width?

  1. border-width
  2. border
  3. width
  4. border-size
Show Answer
Answer: a
Explanation
border-width sets the thickness of the border, e.g. border-width:2px;

70) Which property is used to set the border color?

  1. border-color
  2. border
  3. color
  4. border-paint
Show Answer
Answer: a
Explanation
border-color sets the colour of an element’s border (it has no effect unless a border style is set).

71) Which property is used to set the border radius?

  1. border-radius
  2. radius
  3. border-round
  4. round
Show Answer
Answer: a
Explanation
border-radius gives rounded corners and can also be applied per corner.

72) Which property is used to set the box shadow?

  1. box-shadow
  2. shadow
  3. element-shadow
  4. text-shadow
Show Answer
Answer: a
Explanation
box-shadow adds one or more shadows around the element’s box, optionally inset.

73) Which property is used to set the text shadow?

  1. text-shadow
  2. shadow
  3. font-shadow
  4. box-shadow
Show Answer
Answer: a
Explanation
text-shadow adds a shadow to the text glyphs themselves.

74) Which property is used to set the transition?

  1. transition
  2. animation
  3. transform
  4. change
Show Answer
Answer: a
Explanation
transition animates changes in property values smoothly, e.g. transition: color 0.3s ease;

75) Which property is used to set the animation?

  1. animation
  2. transition
  3. transform
  4. keyframes
Show Answer
Answer: a
Explanation
animation is the shorthand for applying a @keyframes animation, including duration, timing, delay, iteration count and direction.

76) Which property is used to set the transform?

  1. transform
  2. transition
  3. animation
  4. change
Show Answer
Answer: a
Explanation
transform applies 2D or 3D transformations such as translate, rotate, scale and skew.

77) Which property is used to set the flex direction?

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. flex
Show Answer
Answer: a
Explanation
flex-direction sets the main axis: row, row-reverse, column or column-reverse.

78) Which property is used to set the flex wrap?

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. flex
Show Answer
Answer: b
Explanation
flex-wrap decides whether flex items stay on one line (nowrap) or wrap onto multiple lines.

79) Which property is used to set the justify content?

  1. justify-content
  2. align-items
  3. align-content
  4. flex-justify
Show Answer
Answer: a
Explanation
justify-content distributes flex items along the main axis (flex-start, center, space-between, etc.).

80) Which property is used to set the align items?

  1. justify-content
  2. align-items
  3. align-content
  4. flex-align
Show Answer
Answer: b
Explanation
align-items aligns flex items along the cross axis (stretch, center, flex-start, flex-end, baseline).

81) Which property is used to set the align content?

  1. justify-content
  2. align-items
  3. align-content
  4. flex-align
Show Answer
Answer: c
Explanation
align-content distributes the flex lines themselves when wrapping produces more than one line.

82) Which property is used to set the flex grow?

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex
Show Answer
Answer: a
Explanation
flex-grow defines how much of the free space a flex item may absorb relative to its siblings.

83) Which property is used to set the flex shrink?

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex
Show Answer
Answer: b
Explanation
flex-shrink determines how much a flex item shrinks when there is not enough space.

84) Which property is used to set the flex basis?

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex
Show Answer
Answer: c
Explanation
flex-basis sets the initial main size of a flex item before grow or shrink is applied.

85) Which property is used to set the order of a flex item?

  1. order
  2. flex-order
  3. item-order
  4. flex
Show Answer
Answer: a
Explanation
order arranges flex items; lower numbers appear first and the default value is 0.

86) Which property is used to set the grid template columns?

  1. grid-template-columns
  2. grid-template-rows
  3. grid-gap
  4. grid
Show Answer
Answer: a
Explanation
grid-template-columns defines the number and widths of the grid’s column tracks.

87) Which property is used to set the grid template rows?

  1. grid-template-columns
  2. grid-template-rows
  3. grid-gap
  4. grid
Show Answer
Answer: b
Explanation
grid-template-rows defines the heights of the grid’s row tracks.

88) Which property is used to set the grid gap?

  1. grid-gap
  2. gap
  3. Both a and b
  4. grid-spacing
Show Answer
Answer: c
Explanation
Both are valid: gap is the standard property and grid-gap is its older, still-supported alias.

89) Which property is used to set the grid column?

  1. grid-column
  2. grid-row
  3. grid-area
  4. grid
Show Answer
Answer: a
Explanation
grid-column is the shorthand for grid-column-start and grid-column-end, placing an item across columns.

90) Which property is used to set the grid row?

  1. grid-column
  2. grid-row
  3. grid-area
  4. grid
Show Answer
Answer: b
Explanation
grid-row is the shorthand for grid-row-start and grid-row-end, placing an item across rows.

91) Which property is used to set the grid area?

  1. grid-column
  2. grid-row
  3. grid-area
  4. grid
Show Answer
Answer: c
Explanation
grid-area is the shorthand for row-start / column-start / row-end / column-end, or a named area.

92) Which property is used to set the media query?

  1. @media
  2. @query
  3. @media-query
  4. @screen
Show Answer
Answer: a
Explanation
The @media at-rule applies blocks of CSS only when a media condition matches, e.g. @media (max-width: 600px) { … }

93) Which property is used to set the viewport?

  1. @viewport
  2. @media
  3. @page
  4. @document
Show Answer
Answer: a
Explanation
The @viewport at-rule configures the viewport for responsive layouts; it is largely superseded by the HTML viewport meta tag.

94) Which property is used to set the font face?

  1. @font-face
  2. @font
  3. @face
  4. @font-family
Show Answer
Answer: a
Explanation
@font-face defines a custom font that can be downloaded and used with the font-family property.

95) Which property is used to set the keyframes?

  1. @keyframes
  2. @frames
  3. @animation
  4. @keyframe
Show Answer
Answer: a
Explanation
@keyframes defines the intermediate steps of an animation, which is then applied with the animation property.

96) Which property is used to set the important rule?

  1. !important
  2. important
  3. !priority
  4. !override
Show Answer
Answer: a
Explanation
!important is appended to a declaration to give it the highest priority, overriding normal cascade rules. Use it sparingly.

97) Which property is used to set the calc function?

  1. calc()
  2. calculate()
  3. math()
  4. compute()
Show Answer
Answer: a
Explanation
calc() performs calculations with mixed units, e.g. width: calc(100% – 40px);

98) Which property is used to set the var function?

  1. var()
  2. variable()
  3. custom()
  4. value()
Show Answer
Answer: a
Explanation
var() inserts the value of a custom property, e.g. color: var(–brand-color);

99) Which property is used to set the custom property?

  1. –variable
  2. var
  3. custom
  4. property
Show Answer
Answer: a
Explanation
Custom properties (CSS variables) are declared with a double dash prefix, e.g. –variable: #0b4545;, and read back with var().

100) Which property is used to set the box sizing?

  1. box-sizing
  2. sizing
  3. box-model
  4. box-size
Show Answer
Answer: a
Explanation
box-sizing decides how width and height are calculated: content-box (default) or border-box (includes padding and border).
100 jQuery MCQ (Multiple Choice Questions) with Answers
100 Deep Learning MCQ (Multiple Choice Questions) with Answers
Print page
0 Likes
Studyopedia Editorial Staff
contact@studyopedia.com

We work to create programming tutorials for all.

No Comments

Post A Comment