CSS MCQ Set 1
1. Which of the following values are zccepted by the float Property?
a) left
b) right
c) none
d) all of the mentioned
Answer
Answer: d [Reason:] Self-explainatory.
2. Which of the following property is used to control the behavior of floating elements?
a) format
b) clean
c) clear
d) remove
Answer
Answer: c [Reason:] Self-explainatory.
3. The default value for the float property is right.State true or false.
a) True
b) False
Answer
Answer: b [Reason:] The default value for this property is none.
4. img { float: right; }
In what direction does float will work?
a) left
b) top
c) bottom
d) right
Answer
Answer: d [Reason:] Self-explainatory.
5. Which of the following property allows elements to be offset, rotated, scaled, and skewed in a variety of different ways?
a) transform-style
b) transform
c) transition
d) transform-origin
Answer
Answer: b [Reason:] None.
6. Which of the following property is used to define how nested items are rendered in a 3-D space, the choice being either flattened or with their dimensions preserved?
a) transition-duration
b) transition-delay
c) transition
d) transform-style
Answer
Answer: d [Reason:]
Syntax: transform-style: flat
7. Which of the following property is used to define the time it takes one iteration of an animation to play?
a) transition-property
b) transition-timing
c) transition-duration
d) user-select
Answer
Answer: c [Reason:]
Syntax transition-duration: time [,time]*
where time is a valid time value like 5s or 3500ms. The default value of time is 0, meaning no animation plays.
8. Which of the following property sets the distance between an element’s right border and the rightmost edge of its content?
a) auto
b) padding-left
c) padding-right
d) padding-top
Answer
Answer: c [Reason:]
Syntax: padding-right: length | percentage | auto
9. Which of the following property is used to control page breaks when printing a document after the bound element box ends?
a) page-inside
b) page-break-after
c) page-break-inside
d) page-break-before
Answer
Answer: b [Reason:]
Syntax: page-break-after: always | auto
10.Which of the following property defines the style of quotation marks to be used with embedded quotations?
a) article
b) para
c) quote
d) quotes
Answer
Answer: d [Reason:]
Syntax: quotes: quote-pair1 ... quote-pairN | none
CSS MCQ Set 2
1. ___________ describes CSS properties to manipulate the position of “ruby”, which are small annotations on top of or next to words, especially common in Chinese and Japanese.
a) align
b) ruby
c) lang
d) text-align
Answer
Answer: b [Reason:] Ruby describes CSS properties to manipulate the position of “ruby”, which are small annotations on top of or next to words, especially common in Chinese and Japanese. They are often used to give the pronunciation or meaning of difficult ideograms.
2. ___________ has a grammar but unlike traditional (X)HTML it is not defined with a document type definition.
a) CSS 1
b) CSS 2
c) CSS 2.1
d) CSS 3
Answer
Answer: c [Reason:] CSS 2.1 has a grammar (www.w3.org/TR/CSS21/grammar.html) but unlike traditional (X)HTML it is not defined with a document type definition. Instead the CSS specification is a combination of prose and a grammar that could be used to build a simple parser.
3. h1 {color: red text-decoration: underline; font-style: italic;}
.What will happen in this case?
a) color: red, text-decoration: underline and font-style: italic all works b) text-decoration: underline and font-style: italic works c) color: red, text-decoration: underline works d) only font-style: italic works
Answer
Answer: d [Reason:] In this case, we should see the browser continue to parse the value of color as “red textdecoration:
underline” before it sees a closing semicolon. The font-style property that follows would then be used. Because the color property has an illegal value, it should be
ignored.
4. h1 {color: "green";}
.What will happen in this case?
a) heading becomes green
b) heading becomes dark-green
c) error occors
d) nothings happen
Answer
Answer: d [Reason:] None.
5. Which of the following is the correct way to applying style to a document?
a) Use an external style sheet, either by importing it or by linking to it
b) Directly embed a document-wide style in the head element of the document
c) Set an inline style rule using the style attribute directly on an element
d) All of the mentioned
Answer
Answer: d [Reason:] None.
6. With, which tag you write the style rules directly within the document found
within the head of the document.
a) <script> b) <php> c) <style> d) <css>
Answer
Answer: c [Reason:] None
7. What does screen media type is used for?
a) For use with all devices
b) For use with handheld devices
c) For use with color computer screens
d) For use with television-type devices
Answer
Answer: c [Reason:] None.
8. For Inline Style don’t need to reapply style information throughout the document and outside documents.State true or false.
a) True
b) False
Answer
Answer: b [Reason:] None.
9. For document-Wide StyleCan easily control style document by document.State true or false.
a) True
b) False
Answer
Answer: a [Reason:] None.
10. For External Style Sheets in some cases when @import is used, the browser may cause a rendering “flash” under slow loading conditions.State true or false.
a) True
b) False
Answer
Answer: a [Reason:] None.
CSS MCQ Set 3
1. Which of the following elements are block and inline elements, respectively, that have no particular rendering?
a) div
b) span
c) box-model
d) both (a) and (b)
Answer
Answer: d [Reason:] The div element and span element are block and inline elements, respectively, that have no particular rendering. You might call them generic tags. Because these tags don’t have any predefined meaning or rendering, they are very useful for arbitrary style duties.
2. The _____________ property specifies the background color of an element.
a) background-color
b) border
c) color
d) display
Answer
Answer: a [Reason:] Example:
body { background-image: url("img_tree.png"); background-repeat: no-repeat; }
3. The ___________ property specifies if/how an element is displayed.
a) background-color
b) border
c) color
d) display
Answer
Answer: d [Reason:] Example:
h1.hidden { display: none; }
4. The _____________ property allows us to include the padding and border in an element’s total width and height.
a) margin
b) box-sizing
c) padding
d) none of the mentioned
Answer
Answer: b [Reason:] Example:
.div1 { box-sizing: border-box; }
5. ____________ property sets the coordinates of the clipping shape that exposes or hides the content of
absolutely positioned elements
a) clammper
b) clip
c) clear
d) none of the mentioned
Answer
Answer: b [Reason:]
clip: rect(coordinates) | auto | inherit
6. _____________ property defines the space between cells in a table.
a) border
b) border-spacing
c) border-style
d) none of the mentioned
Answer
Answer: b [Reason:]
border-spacing: non-negative length(s) | inherit
7. ____________ property defines whether table cell borders are connected or separate.
a) border-color
b) border
c) border-style
d) none of the mentioned
Answer
Answer: d [Reason:] border-collapse roperty defines whether table cell borders are connected or separate.
8. ________________ property sets the background image to scroll or not to scroll with its associated element’s
content
a) background
b) background-position
c) background-attachment
d) none of the mentioned
Answer
Answer: c [Reason:] Example:
background-attachment: scroll | fixed | inherit
9. ____________ property associates a background image with an element.
a) image
b) background-image
c) float
d) none of the mentioned
Answer
Answer: b [Reason:] Example:
background-image: url(image-file) | none | inherit
10. ______________ property defines whether table cell borders are connected or separate.
a) pre
b) border-color
c) border-collapse
d) table
Answer
Answer: c [Reason:] Example:
border-collapse: collapse | separate | inherit
CSS MCQ Set 4
1. Which of the following is the correct way to applying style to a document?
a) Use an external style sheet, either by importing it or by linking to it
b) Directly embed a document-wide style in the head element of the document
c) Set an inline style rule using the style attribute directly on an element
d) All of the mentioned
Answer
Answer: d [Reason:] None.
2. <style h1 {color: green;}> <h1>Hello</h1>
What will happen in this case?
a) h1 heading becomes green
b) error
c) h1 heading disappears
d) nothing happens
Answer
Answer: c [Reason:] None.
3. <p style="color: red">text</p>
.What will happen in this case?
a) make that specific paragraph red.
b) error
c) nothing happens
d) none of the mentioned
Answer
Answer: a [Reason:] NOne.
4. The _______property is used to set the color of the text.
a) pallet
b) colour
c) color
d) text-decoration
Answer
Answer: c [Reason:] None
5. Which of the following is the correct way to apply Styles?
a) inside an HTML element
b) inside the
c) in an external CSS file
d) all of the mentioned
Answer
Answer: d [Reason:] None.
6. Which of the following CSS list properties is/are correct?
a) Set different list item markers for ordered lists
b) Set different list item markers for unordered lists
c) Set an image as the list item marker
d) All of the mentioned
Answer
Answer: d [Reason:] None.
7. A ___________ is used to define a special state of an element.
a) pseudo-tag
b) pseudo-element
c) pseudo-id
d) pseudo-class
Answer
Answer: d [Reason:] None.
8. The __________ property specifies the type of positioning method used for an element.
a) align
b) float
c) position
d) padding
Answer
Answer: c [Reason:] None.
9. <body style="background-color: lightcyan">
.Which style is this?
a) Inline Styles
b) External Style Sheet
c) External Style Sheettyle Sheet
d) None of the mentioned
Answer
Answer: a [Reason:] None.
10. <link rel="stylesheet" type="text/css" href="mystyle.css">
.Is this correct way to apply css.State true or false.
a) True
b) False
Answer
Answer: a [Reason:] None.
CSS MCQ Set 5
1.Which of the following selector selects all elements of E that have the attribute attr that end with the given value?
a) E[attr^=value] b) E[attr$=value] c) E[attr*=value] d) none of the mentioned
Answer
Answer: b [Reason:]
Example: p[title$="!"] {color: red;}
2. Which of the following selector selects the elements that are checked?
a) E ~ F b) ::after c) :checked d) none of the mentioned
Answer
Answer: c [Reason:]
Example: :checked {color: blue;}
3. Which of the following selector selects the elements that are the default among a set of similar elements?
a) :default b) :% c) :disabled d) none of the mentioned
Answer
Answer: a [Reason:]
Example: :default {background-color: red;}
4. Which of the following selector selects an element that has no children?
a) :empty b) :nochild c) :inheritance d) :no-child
Answer
Answer: a [Reason:] None.
5. Which of the following selector selects the elements that are currently enabled?
a) :element b) :empty c) :enabled d) none of the mentioned
Answer
Answer: c [Reason:]
Example: input:enabled {background-color:white;}
6. Which of the following selector selects the element that is the first child of its parent that is of its type?
a) :first-of-type b) :last-child c) ::first-line d) ::first-letter
Answer
Answer: a [Reason:]
Example: strong:first-of-type {font-size:bigger;}
7. Which of the following selector selects elements that do not match the selector s?
a) :!(s) b) :nth-child(s) c) :not(s) d) none of the mentioned
Answer
Answer: c [Reason:]
Example: *:not(h1) {color: black;}
8. Which of the following selector selects an element if it’s the only child of its parent?
a) :root b) :nth-oftype(n) c) :only-child d) none of the mentioned
Answer
Answer: c [Reason:]
Example: h1:only-child {color: blue;}
9. Which of the following selector selects the element that is the target of a referring URI?
a) :target b) :selection c) ::selection d) :URI
Answer
Answer: a [Reason:]
Example: :target{color:red;}
10. Which of the following selector applies styles to elements that are valid per HTML5 validations set either with the pattern or type
attributes?
a) :valid b) :required c) :optional d) :invalid
Answer
Answer: a [Reason:]
Example: :valid {color: green;}