CSS MCQ Set 1
1. Which of the following measurement defines a measurement in centimeters?
a) c
b) cm
c) centi
d) centimeter
Answer
Answer: b [Reason:]
Example: div {margin-bottom: 1cm;}
2. Which of the following measurement defines a measurement relative to the height of a font in em spaces?
a) px
b) in
c) em
d) pt
Answer
Answer: c [Reason:] Defines a measurement relative to the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each em unit would be 12pt, thus 2em would be 24pt.
3. Which of the following measurement defines a measurement in points?
a) px
b) in
c) em
d) pt
Answer
Answer: d [Reason:] Defines a measurement in points. A point is defined as 1/72nd of an inch. A point does not equate to a pixel unless there are 72 pixels per inch onscreen.
4. Which of the following measurement defines a measurement in inches?
a) px
b) in
c) em
d) pt
Answer
Answer: b [Reason:]
Example: p {word-spacing: .25in;}
5. Which of the following measurement defines a measurement in pixels?
a) px
b) in
c) em
d) pt
Answer
Answer: a [Reason:] None.
6. Which of the following measurement defines a measurement relative to a font’s x-height?
a) e
b) xh
c) ex
d) rxh
Answer
Answer: c [Reason:] Defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.
7. Which of the following measurement is relative to 1percentage of viewport’s larger dimension?
a) vw
b) vmax
c) vmin
d) ch
Answer
Answer: b [Reason:] None.
8. Which of the following measurement is relative to 1percentage of the width of the viewport?
a) vw
b) vmax
c) vmin
d) ch
Answer
Answer: a [Reason:] None.
9. Which of the following measurement is relative to 1% of the height of the viewport?
a) ch
b) rem
c) %
d) vh
Answer
Answer: d [Reason:] None.
10. Which of the following measurement is relative to font-size of the root element?
a) rem
b) kd
c) rr
d) hx
Answer
Answer: a [Reason:] None.
CSS MCQ Set 2
1. p {line-height: 150%;}.What type of selector is used in this case?
a) class Selectors
b) element Selectors
c) id Selectors
d) none of the mentioned
Answer
Answer: b [Reason:] These selectors are called element selectors and are simply used
as follows:
element-name { /* properties */ }
2. By applying an ___________ a style can be applied to just a single tag.
a) class rule
b) element rule
c) id rule
d) none of the mentioned
Answer
Answer: c [Reason:] By applying an id rule, a style can be applied to just a single tag. For example, if we name a tag with a unique id attribute as follows
<tag id="id-value">Affected Text</tag>
3. The _____________ attribute is used to define the name(s) of the class(es) to which a particular tag belongs.
a) class
b) element
c) id
d) none of the mentioned
Answer
Answer: a [Reason:] Self-explainatory.
4. p strong {background-color: yellow;}
What will happen in this case?
a) Strong have yellow background
b) Strong element within a p element have a yellow background
c) Both p and strong have yellow background
d) None of the mentioned
Answer
Answer: b [Reason:] All occurrences of the strong element within a p element have a yellow background.
5. A similar rule called the ____________ is specified using the plus sign (+) and is used to select elements that would be siblings of each other.
a) class selectors
b) attribute selectors
c) adjacent-sibling selector
d) none of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
6. Which of the following selectors selects any tag with an id attribute set?
a) E#id b) .class c) #id d) *
Answer
Answer: c [Reason:] Example:#test {color: green;}
/* makes a tag with id=’test’ green */
7.Which of the following selectors selects direct descendents?
a) E > F b) E F c) E + F d) E ~ F
Answer
Answer: a [Reason:] Example:
body > p {background-color: yellow;} /* makes all p tags that have the body tag as their immediate parent have the background color yellow */
8. Which of the following selectors selects siblings?
a) E.class b) E ~ F c) * d) E, F, G
Answer
Answer: b [Reason:] Example:
p ~ strong {font-style: italic;} /* sets the font style to italic on all strong tags that have a p tag as a preceding sibling */
9. Which of the following selectors selects the specified elements of type E with a particular class value?
a) E.class b) E ~ F c) * d) E, F, G
Answer
Answer: a [Reason:] Example:
h1.note {text-decoration: underline;} /* underlines all h1 tags with class='note' */
10. Which of the following selectors selects adjacent siblings?
a) E > F b) E F c) E + F d) E ~ F
Answer
Answer: c [Reason:] Example:
h1 + p {color: red;} /* makes all p tags that are immediately preceded by an h1 tag red */
CSS MCQ Set 3
Find the specificity of the statments using the rule given below.
A selector’s specificity is calculated as follows:
1)count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
2)count the number of ID attributes in the selector (= b)
3)count the number of other attributes and pseudo-classes in the selector (= c)
4)count the number of element names and pseudo-elements in the selector (= d)
1. Find the specificity of this “*”.
a) specificity = 0,0,0,0
b) specificity = 0,0,0,1
c) specificity = 0,0,1,0
d) specificity = 1,0,0,0
Answer
Answer: a [Reason:] Self-explainatory.
2. Find the specificity of this “li”.
a) specificity = 0,0,0,1
b) specificity = 0,0,1,1
c) specificity = 0,1,1,1
d) specificity = 1,1,1,1
Answer
Answer: a [Reason:] Self-explainatory.
3. Find the specificity of this ” ul li”.
a) specificity = 0,0,0,0
b) specificity = 0,0,1,2
c) specificity = 0,0,0,2
d) specificity = 2,0,0,0
Answer
Answer: c [Reason:] Self-explainatory.
4. Find the specificity of this “li:first-line”.
a) specificity = 0,0,1,1
b) specificity = 0,0,0,2
c) specificity = 0,1,0,1
d) specificity = 1,0,0,1
Answer
Answer: b [Reason:] Self-explainatory.
5. Find the specificity of this “ul ol+li”.
a) specificity = 0,0,2,1
b) specificity = 0,2,1,1
c) specificity = 0,1,1,1
d) specificity = 0,0,0,3
Answer
Answer: d [Reason:] Self-explainatory.
6. Find the specificity of this “ul ol li.red”.
a) specificity = 0,0,3,1
b) specificity = 0,0,1,3
c) specificity = 1,1,1,1
d) specificity = 1,2,2,1
Answer
Answer: b [Reason:] Self-explainatory.
7. Find the specificity of this “ul ol li.red”.
a) specificity = 0,0,1,3
b) specificity = 0,0,0,4
c) specificity = 0,1,2,1
d) specificity = 1,1,1,1
Answer
Answer: a [Reason:] Self-explainatory.
8. Find the specificity of this “li.red.leve”.
a) specificity = 2,0,0,1
b) specificity = 0,0,1,1
c) specificity = 0,2,0,1
d) specificity = 0,0,2,1
Answer
Answer: d [Reason:] Self-explainatory.
9. Find the specificity of this “#x34y”.
a) specificity = 0,0,0,1
b) specificity = 0,0,1,0
c) specificity = 0,1,0,0
d) specificity = 1,0,0,0
Answer
Answer: c [Reason:] Self-explainatory.
10. Find the specificity of this ” style=”” “.
a) specificity = 0,0,0,1
b) specificity = 0,0,1,0
c) specificity = 0,1,0,0
d) specificity = 1,0,0,0
Answer
Answer: d [Reason:] Self-explainatory.
CSS MCQ Set 4
1. Which of the following is not an Absolute Unit?
a) px
b) em
c) pt
d) mm
Answer
Answer: b [Reason:] em is a Relative Unit
2. Which of the following unit represent the viewport’s width?
a) vh
b) vmin
c) vw
d) ch
Answer
Answer: c [Reason:] Self-explainatory.
3. Which of the following property sets in a shorthand form any or all background properties?
a) color
b) wrap
c) background
d) all of the mentioned
Answer
Answer: [Reason:]
Syntax: background: background-color
4. Which of the following Color Format can also be defined using the keyword rgb, followed by three numbers between 0 and 255, contained in parentheses and separated by commas, with no spaces between them?
a) RGB Color
b) RGBa Color
c) HSL Color
d) HSLa Color
Answer
Answer: a [Reason:]
Example: p {color:rgb(0%,10%,50%);}
5. Which of the following is not a attribute of the audio element?
a) controls
b) src
c) check
d) loop
Answer
Answer: c [Reason:] Self-explainatory.
6. Which of the following element is used to specify multiple media resources for media elements like audio and video?
a) <source> b) <link> c) <script> d) <src>
Answer
Answer: a [Reason:] Self-explainatory.
7. Which of the following Protocol enables a hyperlink to access a file on the local file system?
a) https
b) ftp
c) file
d) telnet
Answer
Answer: c [Reason:] Self-explainatory.
8. Which of the following element is used for linking a External Files to the html page?
a) <script> b) <style> c) <link> d) all of the above
Answer
Answer: c [Reason:] Self-explainatory.
9. Which of the following attribute specifies the URL of the linked resource?
a) src
b) link
c) rel
d) href
Answer
Answer: d [Reason:] href attribute specifies the URL of the linked resource. A URL might be absolute or relative.
10. Which of the following color has this value #ff0000?
a) blue
b) green
c) red
d) yellow
Answer
Answer: c [Reason:] Self-explainatory.
CSS MCQ Set 5
1. Which of the following strings are defined by in css?
a) single quotes
b) double quotes
c) both (a) and (b)
d) none of the mentioned
Answer
Answer: c [Reason:] In CSS, strings are defined with either single quotes (‘example’) or double quotes (“example”). Quotes may be found within the opposite quote (“I say this is an ‘example’!”).
2. Which of the following defined as alphanumeric names that correspond to some current counter value in a document?
a) Class
b) Key
c) Counters
d) None of the mentioned
Answer
Answer: c [Reason:] Counters demonstrate the possibility of variable-like values in CSS. They are defined as alphanumeric names that correspond to some current counter value in a document.
3. Which of the following is the Color Format that is a CSS’s six-digit hexadecimal format as color defined in (X)HTML?
a) Specification defined named colors
b) System Color Names
c) 6-Hex Color
d) 3-Hex Color
Answer
Answer: c [Reason:] CSS’s six-digit hexadecimal format is the same as color defined in (X)HTML. The format specifies color as #rrggbb, where rr is the amount of red, gg the amount of green, and bb the amount of blue, all specified in a hexadecimal value ranging from 00 to FF.
4. Which of the following is the Color Format that is the CSS3 HSL value with a fourth value to set the alpha channel value for the color to define the opacity of the element?
a) HSLa Color
b) HSL Color
c) RGBa Color
d) RGB Color
Answer
Answer: a [Reason:] An HSLa is specified via a function style hsla(hue,saturation, lightness, alpha), where hue, saturation, and lightness are the same as standard hsl() values, and the alpha channel value for defining opacity is a number between 0 (fully transparent) and 1 (fully opaque).
5. Which of the following is the Color Format that is a defined using the keyword rgb, followed by three numbers between 0 and 255, contained in parentheses and separated by commas, with no spaces between them.
a) HSLa Color
b) HSL Color
c) RGBa Color
d) RGB Color
Answer
Answer: d [Reason:] . RGB color values can also be defined using percentages. The format is the same, except that the numbers are replaced by
percentage values between 0% and 100%.
6. Which of the following property allows the text direction to be overridden to support multiple languages and text flow directions in the same document?
a) unicode-bidi
b) visibility
c) top
d) vertical-align
Answer
Answer: a [Reason:] Syntax:
unicode-bidi: bidi-override | embed | normal| inherit
7.Which of the following property determines whether or not an element is visible?
a) display
b) visibility
c) transperancy
d) disappear
Answer
Answer: b [Reason:] This property is not the same as display: none as it simply makes the item invisible; it does not completely remove it from the display canvas..
8. Which of the following property controls how spaces, tabs, and newline characters are handled in an element?
a) space
b) display
c) widows
d) white-space
Answer
Answer: d [Reason:] The values of pre-wrap and pre-line are not supported in older browsers.
9. Which of the following property defines the minimum number of lines in a paragraph to be left at the top of a page?
a) white-space
b) widows
c) display
d) width
Answer
Answer: b [Reason:] This property is really only meaningful in a paged environment, such as print output.
10. Which of the following property sets the spacing between words?
a) display
b) white-space
c) sr
d) word-spacing
Answer
Answer: d [Reason:] Syntax:
word-spacing: length | normal | inherit
