0% found this document useful (0 votes)
12 views

CSS MCQ

The document contains a comprehensive set of 1000 multiple choice questions (MCQs) on CSS, covering various topics such as CSS properties, selectors, and syntax. Each question is followed by answer options and explanations, providing a detailed understanding of CSS concepts. The document serves as a resource for learning and testing knowledge of CSS.

Uploaded by

l.n.sharma666
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views

CSS MCQ

The document contains a comprehensive set of 1000 multiple choice questions (MCQs) on CSS, covering various topics such as CSS properties, selectors, and syntax. Each question is followed by answer options and explanations, providing a detailed understanding of CSS concepts. The document serves as a resource for learning and testing knowledge of CSS.

Uploaded by

l.n.sharma666
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 92

CSS MCQ (Multiple Choice Questions)

Here are 1000 MCQs on CSS (Chapterwise).


1. What is CSS?
a) CSS is a style sheet language
b) CSS is designed to separate the presentation and content, including layout, colors, and
fonts
c) CSS is the language used to style the HTML documents
d) All of the mentioned
View Answer
Answer: d
Explanation: CSS is a style sheet language that stands for Cascading Style Sheet and is
used to style HTML documents. CSS is mainly designed to separate the presentation and
content, including layout, colors, and fonts.

2. Which of the following tag is used to embed css in html page?


a) <css>
b) <!DOCTYPE html>
c) <script>
d) <style>
View Answer
Answer: d
Explanation: <style> </style> tag is used to embed CSS in HTML page, while <script>
</script> is used to embed JS in HTML. <!DOCTYPE html> is HTML5 declaration.

3. Which of the following CSS selectors are used to specify a group of elements?
a) tag
b) id
c) class
d) both class and tag
View Answer
Answer: c
Explanation: Class selectors are used to specify a group of elements. Id selector specifies a
particular unique element.

4. Which of the following has introduced text, list, box, margin, border, color, and
background properties?
a) HTML
b) PHP
c) CSS
d) Ajax
View Answer
Answer: c
Explanation: CSS is a style sheet language that stands for Cascading Style Sheet. CSS has
introduced text, list, box, margin, border, color, and background properties.

5. Which of the following CSS framework is used to create a responsive design?


a) django
b) rails
c) larawell
d) bootstrap
View Answer
Answer: d
Explanation: Bootstrap is a free and open-source collection of tools for creating websites
and web applications. It contains HTML- and CSS-based design templates for typography,
forms, buttons, navigation and other interface components, as well as optional JavaScript
extensions. It aims to ease the development of dynamic websites and web applications.
advertisement
6. Which of the following CSS selector is used to specify a rule to bind a particular unique
element?
a) tag
b) id
c) class
d) both class and tag
View Answer
Answer: b
Explanation: For binding a particular unique element, id selectors are used. While for a
group of elements, class selector can be used.

7. Which of the following type of HTML tag is used to define an internal style sheet?
a) <script>
b) <link>
c) <class>
d) <style>
View Answer
Answer: d
Explanation: <style> tag is used to define an internal style sheet in HTML document.

8. Which of the following CSS property is used to make the text bold?
a) text-decoration: bold
b) font-weight: bold
c) font-style: bold
d) text-align: bold
View Answer
Answer: b
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.

9. What will be the output of following CSS code snippet?

h1 {color: "green";}

a) nothings happen
b) error occurs
c) heading becomes dark-green
d) heading becomes green
View Answer
Answer: a
Explanation: Output of the above code snippet won’t happen as the declaration syntax is
wrong. The correct declaration is : h1 { color: green; } which will yield an output. In CSS, we
don’t write the value in double quotes.

10. Which of the following CSS style property is used to specify an italic text?
a) style
b) font
c) font-style
d) @font-face
View Answer
Answer: c
Explanation: font-style property is used to specify an italic text. font-style property has three
values (normal, italic & oblique).

11. What will be the output of following CSS code snippet?

h1 {color: red text-decoration: underline; font-style: italic;}

a) color: red, text-decoration: underline works


b) only font-style: italic works
c) color: red, text-decoration: underline and font-style: italic all works
d) text-decoration: underline and font-style: italic works
View Answer
Answer: b
Explanation: In this case, we should see the browser continue to parse the value of color as
“red text-decoration: 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.

12. Which of the following are the CSS Extension Prefixes for Webkit?
a) -chrome
b) -web
c) -o-
d) -webkit
View Answer
Answer: d
Explanation: Browser sometimes adds prefixes to non-standard CSS properties. CSS
Extension prefix for Webkit is -webkit which is supported by almost all ios browsers. -o is
used by opera where as -moz is used by firefox browser.

13. Which of the following is the correct syntax to link an external style sheet in the HTML
file?
a) <link rel=”stylesheet” href=”style.css” />
b) <link rel=”stylesheet” src=”style.css” />
c) <style rel=”stylesheet” src=”style.css” />
d) <style rel=”stylesheet” link=”style.css” />
View Answer
Answer: a
Explanation: HTML file must contain a reference to the external style sheet file. External
style sheet files are defined within the <link> element and it should be inside the <head>
section. href attribute specifies the URL of the linked resource.

14. Which of the following is the first CSS specification to become an official W3C
Recommendation?
a) CSS level 2
b) (X)HTML CSS
c) CSS level 1
d) CSS level 2.1
View Answer
Answer: c
Explanation: The first CSS specification to become an official W3C Recommendation is
CSS level 1, published on December 17, 1996. Håkon Wium Lie and Bert Bos are credited
as the original developers.

15. Which of the following function defines a linear gradient as a CSS image?
a) gradient()
b) linear-gradient()
c) grayscale()
d) image()
View Answer
Answer: b
Explanation: linear-gradient() function defines a linear gradient as a CSS image. Creating a
linear gradient function we should define minimum of two color stops. color stops will tell the
browser which colors to use in the gradients for smooth transitions.

16. Which of the following CSS property can be used to set the image as a border instead
of the border style?
a) background-image-source
b) background-image
c) border-image-source
d) border-image
View Answer
Answer: c
Explanation: The border-image-source property specifies the path to the image to be used
as a border (instead of the normal border around an element).

17. Which of the following CSS property defines the different properties of all four sides of
an element’s border in a single declaration?
a) border-collapse
b) border-width
c) padding
d) border
View Answer
Answer: b
Explanation: The border-width property sets the width of an element’s four borders. This
property can have from one to four values.

18. Which of the following is the correct way to apply CSS Styles?
a) in an external CSS file
b) inside an HTML element
c) inside the <head> section of an HTML page
d) all of the mentioned
View Answer
Answer: d
Explanation: We can style the document using CSS in three different ways i.e embed, inline
and external. An inline CSS means applying styles rules directly to the HTML element. In
embed, we declare or write all the needed style in <style></style> tag in the head section of
the HTML document. We can create an external style sheet and provide its link to the
document.

19. Which of the following CSS property sets the font size of text?
a) font-size
b) text-size
c) text
d) size
View Answer
Answer: a
Explanation: CSS Syntax:
font-size: length | percentage | larger | smaller | xx-small | x-small |
small | medium | large | x-large | xx-larger | inherit

20. Which of the following is not the property of the CSS box model?
a) margin
b) color
c) width
d) height
View Answer
Answer: b
Explanation: CSS box model include height, width, padding, margin and border. All text-
fields have complete support for every property related to CSS box model. Browser relies
on system default styles when displaying these widgets.

21. Which of the following CSS property sets what kind of line decorations are added to an
element, such as underlines, overlines, etc?
a) text-decoration
b) text-style
c) text-decoration-line
d) text-line
View Answer
Answer: c
Explanation: The text-decoration-line property defines the type of line decorations that are
added to an element, such as underlines, overlines, etc.

22. Which of the following CSS property specifies the look and design of an outline?
a) outline-style
b) outline-format
c) outline-font
d) none of the mentioned
View Answer
Answer: a
Explanation: The outline-style CSS property is used to set the style of the outline of an
element. An outline is a line that is drawn around elements, outside the border edge, to
make the element stand out.

23. What will be the output of the following CSS code snippet?

span {
border: 1px solid red;
outline: green dotted thick;
}

a) All span elements will have a green thick border and a red outline
b) All span elements will have a red border and a green dotted outline
c) All span elements will have a outer green dotted border and an inner red border
d) All span elements will have an outer red border and inner green dotted border
View Answer
Answer: c
Explanation: The border property creates the inner border, while the outline sets the outer
border.

24. Which of the following CSS property sets the shadow for a box element?
a) set-shadow
b) box-shadow
c) shadow
d) canvas-shadow
View Answer
Answer: b
Explanation: box-shadow property sets the shadow for a box element.
CSS Syntax:
box-shadow: none | inherit

25. Which of the following CSS property is used to set the color of the text?
a) text-decoration
b) pallet
c) colour
d) color
View Answer
Answer: d
Explanation: The color property is used to set the color of the text. In CSS, colors can also
be specified using RGB values, RGBA values, HSL values, HEX values, etc.

26. Which of the following CSS Property controls how an element is positioned?
a) static
b) position
c) fix
d) set
View Answer
Answer: b
Explanation: Position property controls how an element is positioned. When set to absolute
or fixed, the element is removed completely from the normal flow of the document. When
set to relative, the element is moved relative to its position in the normal flow, but a space is
left where it would normally have been. The default value, static, means the element
remains in the normal flow and is not positioned.

27. Which of the following CSS selector selects the elements that are checked?
a) :checked
b) E ~ F
c) ::after
d) none of the mentioned
View Answer
Answer: a
Explanation: :checked selector selects the elements that are checked.
Example: :checked {color: blue;}

28. Which of the following is an appropriate value for the overflow element?
a) scroll
b) hidden
c) auto
d) all of the mentioned
View Answer
Answer: d
Explanation: Overflow of a div or a container can have the following values:
visible|hidden|scroll|auto|initial|inherit

29. Which of the following CSS property is used to specify table borders in CSS?
a) table:border
b) table
c) border
d) none of the mentioned
View Answer
Answer: c
Explanation: In CSS, border property is used to specify table borders.
Example:
table{border: 7px solid black;}

30. Which of the following property is used to align the text in a table?
a) text-align
b) align
c) text
d) none of the mentioned
View Answer
Answer: a
Explanation: In CSS, text-align property is used to align the text in a table.
Example:
table{text-align: left;}

31. Which of the following CSS Property sets the stacking order of positioned elements?
a) y-index
b) z-index
c) x-index
d) all of the mentioned
View Answer
Answer: b
Explanation: z-index property sets the stacking order of positioned elements.
Syntax:
z-index: auto|number|initial|inherit;

32. What will be the output of the following CSS code?

div {
border-width:5px;
border-style:dotted solid double dashed;
}

a) Box having dotted bottom outline, solid right outline, double top outline and dashed left
outline
b) Box having dotted bottom outline, solid left outline, double top outline and dashed left
outline
c) Box having dotted top outline, solid right outline, double bottom outline and dashed left
outline
d) Box having dotted top outline, solid left outline, double bottom outline and dashed right
outline
View Answer
Answer: c
Explanation: The shorthand run in clockwise direction.

33. Which of the following property allows a marquee to be used in the case of a text-
overflow?
a) overflow-marquee
b) overflow-style
c) overflow-text
d) none of the mentioned
View Answer
Answer: b
Explanation: overflow-style is a CSS property that allows a marquee to be used in the case
of a text-overflow.
Syntax:
overflow-style: auto | marquee-block

34. Which of the following CSS property defines the space between cells in a table?
a) border-spacing
b) border-style
c) border
d) none of the mentioned
View Answer
Answer: a
Explanation: border-spacing property defines the space between cells in a table.
Syntax:
border-spacing: non-negative length(s) | inherit
35. Which of the following CSS3 property can be used to allow line breaks within words?
a) line-break
b) line-wrap
c) word-wrap
d) word-break
View Answer
Answer: d

CSS Questions & Answers – Introduction to


CSS
This set of CSS Problems focuses on “Introduction to CSS”.

1. CSS stands for __________


a) Color Style Sheets
b) Cascade Sheets Style
c) Cascade Style Sheet
d) Cascading Style Sheets
View Answer
Answer: d
Explanation: CSS is a style sheet language which stands for Cascading Style Sheet.

2. In CSS, h1 can be called as _______


a) Selector
b) Attribute
c) Value
d) Tag
View Answer
Answer: a
Explanation: HTML element h1 is used in CSS for styling then it is also called a selector.
Attributes are the special words which control the element’s behaviour. To show the start
and end of HTML element, tag is used.

3. In css, “color:red” can be called as _____________


a) Selector
b) Rule
c) Declaration
d) Value
View Answer
Answer: c
Explanation: In CSS, color:red is the declaration for an element saying that the given
element has to apply a red color. Color is one of CSS property.
advertisement
4. Which of the following attributes is used to specify elements to bind style rules to?
a) id
b) class
c) tag
d) all of the mentioned
View Answer
Answer: d
Explanation: In CSS, styling elements can be done by id, class and tag attribute.

5. Which selector is used to specify a rule to bind a particular unique element?


a) id
b) class
c) tag
d) both class and tag
View Answer
Answer: a
Explanation: For binding a particular unique element, id selectors are used. While for group
of elements, class selector can be used.

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!

6. In CSS, “font-size” can be called as ________


a) Selector
b) Rule
c) Property
d) Property-Name
View Answer
Answer: d
Explanation: In CSS, font-size is a property-name which increases/decreases the font of
text.

7. _________ selectors are used to specify a group of elements.


a) id
b) class
c) tag
d) both class and tag
View Answer
Answer: b
Explanation: Class selectors are used to specify a group of elements. Id selector specifies a
particular unique element.

8. Which of the following tag is used to embed css in html page?


a) <script>
b) <style>
c) <css>
d) <!DOCTYPE html>
View Answer
Answer: b
Explanation: <style> </style> tag is used to embed CSS in HTML page, while <script>
</script> is used to embed JS in HTML. <!DOCTYPE html> is HTML5 declaration.

9. __________ has introduced text, list, box, margin, border, color, and background
properties.
a) css
b) html
c) ajax
d) php
View Answer
Answer: a
Explanation: CSS is a style sheet language which stands for Cascading Style Sheet. CSS
has introduced text, list, box, margin, border, color, and background properties.

10. Is it the best way to include H1 heading only one time on the web page.
a) True
b) False
View Answer
Answer: a

CSS Questions & Answers – CSS Functions


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Functions”.

1. Which of the following element is used by the filter property to blur the images?
a) opaque()
b) scatter()
c) blur()
d) all of the mentioned
View Answer
Answer: c
Explanation: Blurs an element, for use by the filter property. Accepts a distance
measurement within which pixels are randomly scattered. A value of 0 leaves the image as
is.

2. Which of the following function adjust the brightness of an element’s color, for use by the
filter property?
a) contrast()
b) dark()
c) light()
d) brightness()
View Answer
Answer: d
Explanation: A value of 100% or decimal value of 1 leaves the image as is, while 0
produces black. Increasing the value from 1 or 100% brightens pixels from their original
values.

3. Which of the following function adjusts the difference between light and dark values, for
use by the filter property?
a) contrast()
b) dark()
c) light()
d) brightness()
View Answer
Answer: a
Explanation: A value of 100% or a decimal value of 1 leaves the image as is, while 0 results
in black. Increasing the value past 1 or 100% produces more dramatically stratified areas of
light and dark.
advertisement
4. Which of the following function with filter property to create your own sophisticated effects
on DOM elements?
a) create()
b) DOM()
c) custom()
d) none of the mentioned
View Answer
Answer: c
Explanation: None.

5. Which of the following function converts an element’s color to a shade of gray, for use by
the filter property?
a) shade()
b) grayscale()
c) black()
d) brightness()
View Answer
Answer: b
Explanation: A decimal value between 0 and 1 or percentage up to 100% controls the
extent of the gray effect.

Subscribe Now: CSS Newsletter | Important Subjects Newsletters

6. Which of the following function flips an element’s colors, for use by the filter property?
a) image()
b) flip()
c) invert()
d) contrast()
View Answer
Answer: c
Explanation: A decimal value between 0 and 1 or percentage up to 100% controls the
extent of the color-negative effect, with 0.5 or 50% producing gray.

7. Which of the following function applies a saturation effect to an element’s color, making it
appear more or less vivid, for use by the filter property?
a) color()
b) saturation()
c) saturate()
d) none of the mentioned
View Answer
Answer: b
Explanation: A decimal value of 1 or percentage of 100% keeps the image as is, while
increasing the amount produces more dramatically stratified hues.
8. Which of the following function defines a linear gradient as a CSS image?
a) grayscale()
b) gradient()
c) image()
d) linear-gradient()
View Answer
9. Which of the following function two dimensional transformation in matrix format?
a) matrix()
b) matrix2d()
c) matrix3d()
d) perspective
View Answer
Answer: a
Explanation: None.

10. Which of the following function apply a sepia tinge to an element’s color, typical of old
photographs, for use by the filter property?
a) grayscale()
b) sepia()
c) contrast()
d) brightness()
View Answer
Answer: b

CSS Questions & Answers – CSS Fonts


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Fonts”.

1. Which of the following value is supposed to be a slightly bolder weight that standard bold
in font attribute?
a) empasize
b) light
c) lighter
d) dark
View Answer
Answer: d
Explanation: Self-explainatory.

2. Which of the following property allows contextual adjustment of inter-glyph spacing, i.e.
the spaces between the characters in text?
a) font-style
b) font-family
c) font-kerning
d) font-variant
View Answer
Answer: c
Explanation: Self-explainatory.
3. Which of the following is not a value for font-style property?
a) normal
b) italic
c) oblique
d) none of the above
View Answer
Answer: d
Explanation: Self-explainatory.
advertisement
4. Which of the following value specifies whether the user agent is allowed to synthesize
bold or oblique font faces when a font family lacks bold or italic faces?
a) font-weight
b) font-synthesis
c) font-kerning
d) font-variant
View Answer
Answer: b
Explanation: Self-explainatory.

5. Which of the following selects a normal, or small-caps face from a font family?
a) font-weight
b) font-synthesis
c) font-kerning
d) font-variant
View Answer
Answer: d
Explanation: Self-explainatory.

Subscribe Now: CSS Newsletter | Important Subjects Newsletters

6. Which of the following is not a appropriate value for font-variant property?


a) inherit
b) default
c) large-caps
d) small-caps
View Answer
Answer: c
Explanation: Self-explainatory.

7. Which of the following property adjusts the font-size of the fallback fonts defined with
font-family, so that the x-height is the same no matter what font is used?
a) default
b) font-size-fallback
c) font-adjust
d) font-size-adjust
View Answer
Answer: d
Explanation: Self-explainatory.
8. Which of the following Allows you to expand or condense the widths for a normal,
condensed, or expanded font face?
a) font-style
b) font-stretch
c) font-expand
d) none of the mentioned
View Answer
Answer: d
Explanation: Self-explainatory.

9. Which of the following font-size-adjust is value used in calculating the size of the fallback
fonts?
a) auto
b) number
c) count
d) none
View Answer
Answer: b
Explanation: Self-explainatory.

10. “font-style comes first than font-weight in font attribute”.State true or false.
a) True
b) False
View Answer
Answer: b
Explanation: Syntax:
font: font-weight font-style font-variant font-size/line-height font-family .

CSS Questions & Answers – CSS Versions


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Versions”.

1. Which of the following is the CSS Extension Prefixes for Webkit?


a) -webkit
b) -o-
c) -web
d) -chrome
View Answer
Answer: a
Explanation: Browser sometimes adds prefixes to non-standard CSS properties. CSS
Extension prefix for Webkit is -webkit which is supported by almost all ios browsers. -o is
used by opera where as -moz is used by firefox browser.

2. Which CSS property is equivalent for the attribute <center>?


a) color
b) margin
c) align
d) font
View Answer
Answer: c
Explanation: The attribute <center> in html aligns the text in center. In CSS, this is
equivalent to align property which can align text to right, left or center as per the value.
Margin property sets the margin for an element. Color property is used to set/assign colour
to element. Font property is for increasing/decreasing the font of text.

3. Which CSS property is Equivalent for the align attribute?


a) float
b) text-align
c) centre
d) float & text-align
View Answer
Answer: a
Explanation: In the case of some elements such as <img>, the CSS float property is more
appropriate than text-align. text-align. Center attribute can only align text to center. Now-a-
days it is not supported.
advertisement
4. Which is the latest version of CSS available?
a) CSS2
b) CSS3
c) CSS3.1
d) CSS4
View Answer
Answer: b
Explanation: There are three different kinds of versions of CSS i.e CSS1, CSS2 and CSS3.
Out of them CSS3 is the latest version to be used.

5. Which CSS property is equivalent for the attribute <font>?


a) font-family
b) font-style
c) color
d) all of the mentioned
View Answer
Answer: b
Explanation: Both font-style and font-family are for styling the text. They show text in
different kinds of styles. Color is for setting/assigning colour to text or element. The font-size
property in CSS is equivalent to attribute <font>. Both of them either increase/decrease the
font of text.

Note: Join free Sanfoundry classes at Telegram or Youtube

6. Which of the following CSS property is used to give a line over the text?
a) text-decoration: underline
b) text-decoration: overline
c) text-decoration: line-through
d) text-decoration: none
View Answer
Answer: b
Explanation: Text-decoration is a CSS property used to decorate the text. The text-
decoration property takes many values such as overline, underline, line-through, none,
inherit, etc. Overline gives a line over the text. Underline value is used to add line under the
text. None value defines a normal text. When one wants to give a line through the text, line-
through value for text-property can be used.

7. The first CSS specification to become an official W3C Recommendation is ___________


a) (X)HTML CSS
b) CSS level 2
c) CSS level 2.1
d) CSS level 1
View Answer
Answer: d
Explanation: The first CSS specification to become an official W3C Recommendation is
CSS level 1, published on December 17, 1996. Håkon Wium Lie and Bert Bos are credited
as the original developers.

8. _________ first became a Candidate Recommendation on February 25, 2004, but it was
reverted to a Working Draft on June 13, 2005 for further review.
a) CSS level 1
b) CSS level 2
c) CSS level 3
d) CSS level 2.1
View Answer
Answer: d
Explanation: CSS level 2 revision 1, often referred to as “CSS 2.1”, fixes errors in CSS 2,
removes poorly supported or not fully interoperable features and adds already implemented
browser extensions to the specification. To comply with the W3C Process for standardizing
technical specifications, CSS 2.1 went back and forth between Working Draft status and
Candidate Recommendation status for many years. CSS 2.1 first became a Candidate
Recommendation on February 25, 2004, but it was reverted to a Working Draft on June 13,
2005 for further review.

9. There is no single, integrated ____________________ because it is split into separate


modules.
a) CSS1 specification
b) CSS2 specification
c) CSS3 specification
d) CSS4 specification
View Answer
Answer: d
Explanation: Here is no single, integrated CSS4 specification,[42] because it is split into
separate modules. However, there are “level 4” modules.

10. Unlike CSS 2, which is a large single specification defining various features?
a) CSS level 1
b) CSS level 2
c) CSS level 3
d) CSS level 2.1
View Answer
Answer: c
Explanation: Unlike CSS 2, which is a large single specification defining various features,
CSS 3 is divided into several separate documents called “modules”. Each module adds new
capabilities or extends features defined in CSS 2, preserving backward compatibility.

CSS Questions & Answers – The Specification


of CSS
This set of CSS Interview Questions and Answers focuses on “The Specification of CSS”.

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
View Answer
Answer: b
Explanation: Align is used to align the content either left, right or center. 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. Text-align is for aligning the text either
left, right or in center.

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
View Answer
Answer: c
Explanation: 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. What will be the output of following code snippet?

advertisement
h1 {color: red text-decoration: underline; font-style: italic;}

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
View Answer
Answer: d
Explanation: 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.

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!

4. What will be the output of below mentioned code snippet?

h1 {color: "green";}

a) heading becomes green


b) heading becomes dark-green
c) error occors
d) nothings happen
View Answer
Answer: d
Explanation: Output of above code snippet won’t happen as the declaration syntax is wrong.
The correct declaration is : h1 { color: green; } which will yeild an output. In CSS, we don’t
write value in double quotes.

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
View Answer
Answer: d
Explanation: We can style the document using CSS in three different ways i.e embed, inline
and external. In any way as mentioned, we can apply CSS. An inline CSS means applying
styles rules directly to the element. In embed, we declare or write all the needed style in
<style></style> tag in the head element of the document. Expect these two ways we can
also use another way in which we can create an external style sheet and provide its link to
the document.

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>

View Answer
Answer: c
Explanation: In <style></style> tag we write the style rules directly within the document in
the head section of the document. <script></script> tag is used to add javascript in the
document.
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 computer screens
d) For use with television-type devices
View Answer
Answer: c
Explanation: In CSS, media types are used for the compatibility of devices. There are four
types of nedia types i.e all, print, screen and speech. Out of which screen media type is
used for computer screens, tablets, smart-phones, etc.

CSS Questions & Answers – Style Inclusion


Methods
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Style Inclusion
Methods”.

1. Which of the following tag is used to linked information should be placed inside?
a) <head>
b) <html>
c) <div>
d) <body>
View Answer
Answer: a
Explanation: Linked information regarding CSS like external CSS document information is
always placed in <head> tag. <body> tag contains the body of the document.

2. Which of the following tag can be used to embed a Document-wide styles in a


document’s head element?
a) <head>
b) <style>
c) <script>
d) <html>
View Answer
Answer: b
Explanation: Document-wide styles can be embedded in a document’s head element using
the <style> tag. <script> </script> tag is used for Javascript.

3. The ________________ directive allows style sheets to be grouped and joined together,
though some might wonder what the value of this function is given what linked styles
provide.
a) <head>
b) <style>
c) <script>
d) @import
View Answer
Answer: d
Explanation: Within embedded <style> blocks, properties can be imported from an external
file and expanded in place, similar to a macro. Importing can be used to include multiple
style sheets. An imported style is defined within a <style> tag using @import followed
optionally by a type value and a URL for the style sheet. <style> & <script> tag conatins
CSS and Javascript content respectively. The metadata content is present in <head> tag.
advertisement
4. Which of the following measurement defines a measurement relative to a font’s x-height?
a) ex
b) em
c) pt
d) px
View Answer
Answer: a
Explanation: 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.

5. Which of the following measurement defines measurement as a percentage?


a) %
b) cm
c) em
d) in
View Answer
Answer: a
Explanation: Defines a measurement as a percentage. Percentages are denoted by a
number followed by the % symbol and are always relative to another value such as length.
Quite often they are used to specify some value relative to an inherited value from a parent
element.

Note: Join free Sanfoundry classes at Telegram or Youtube

6. Which of the following property sets the font size of text?


a) text-size
b) font-size
c) size
d) text
View Answer
Answer: b
Explanation: Syntax:
font-size: length | percentage | larger | smaller | xx-small | x-small |
small | medium | large | x-large | xx-larger | inherit

7. Which of the following property sets a variation of the specified or default font family?
a) height
b) font-weight
c) default
d) font-variant
View Answer
Answer: d
Explanation: Syntax:
font-variant: normal | small-caps | inherit

The small-caps value sets text in smaller-size all capitals. The normal value would be used
to override any inherited font-variant value. Font-weight is for increasing/decreasing weight
of font. It takes values like normal, bold, lighter, and bolder.

8. Which of the following property defines labels for a list of items?


a) list-style-type
b) list-style-image
c) list-style
d) list
View Answer
Answer: a
Explanation: Syntax:
list-style-type: disc | circle | square | decimal | decimal-leading-zero

list-style-image add graphical image to a list item. List-style sets all the properties for a list.

9. Which of the following property assigns a graphic image to a list item?


a) list-style-type
b) list-style-image
c) list-style
d) list
View Answer
Answer: b
Explanation: list-style-type defines labels for a list of item. List-style property set all the
properties for a list. List-style-image assign image to a list item.
Syntax:
list-style-image: url(url of image) | none

10. Which of the following property sets the amount of spacing between letters?
a) space
b) line-height
c) letter-spacing
d) letter-space
View Answer
Answer: c

CSS Questions & Answers – CSS Color Values


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Color
Values”.

1. Which of the following CSS3 Color Feature can be used as a macro for whatever the
current color is?
a) CurrentColor keyword
b) HSLa Color
c) HSL Color
d) RGB Color
View Answer
Answer: a
Explanation: This is useful if you want to dynamically change one color and have other
related colors change.

2. Which of the following CSS3 Color Feature like RGB color but adds an alpha channel
value to specify the opacity of the color?
a) RGB
b) RGBa
c) RGBaplha
d) AlphaRGB
View Answer
Answer: b
Explanation: An RGBa is specified via a function style rgba(r,g,b,a) value, where colors r, g,
and b are specified as a decimal value from 0 to 255 or a percentage from 0 to 100%, and
the alpha channel value for defining opacity is a number between 0 (fully transparent) and 1
(fully opaque). Values outside this range will be rounded up or down to fit the closest value.

3. Which of the following Color Format is a CSS’s six-digit hexadecimal format is the same
as color defined in (X)HTML?
a) 6-Hex Color
b) 3-Hex Color
c) RGBS
d) RGBa
View Answer
Answer: a
Explanation: 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.
advertisement
4. Which of the following Color Format is a CSS2 introduced named color keywords which
allows Web page colors to be matched to an operating system’s color use?
a) HSLa Color
b) Commonly defined named colors
c) System Color Names
d) Specificationdefined named colors
View Answer
Answer: c
Explanation: None.

5. Which of the following Color Format are a 17 defined colors under CSS 2.1?
a) HSLa Color
b) Commonly defined named colors
c) System Color Names
d) Specificationdefined named colors
View Answer
Answer: d
Explanation:
maroon (#800000) red (#ff0000)
orange (#ffA500) yellow (#ffff00)
olive (#808000) purple (#800080)
fuchsia (#ff00ff ) white (#ffffff)
lime (#00ff00) green (#008000)
navy (#000080) blue (#0000ff)
aqua (#00ffff) teal (#008080)
black (#000000) silver (#c0c0c0)
gray (#808080)
Other color keywords may be commonly used but are ad hoc in their definition.

6. Which of the following Color Format is a CSS colors 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
View Answer
Answer: a
Explanation: 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%.

Subscribe Now: CSS Newsletter | Important Subjects Newsletters

7. Which of the following Color Format is a CSS3 HSL value with a fourth value to set the
alpha channel value for the color to define the opacity of the element?
a) RGB Color
b) RGBa Color
c) HSL Color
d) HSLa Color
View Answer
Answer: d
Explanation: None.

8. Which of the following Selector selects an element if it’s the only child of its parent with its
type?

a) @media
b) :target
c) ::selection
d) :only-of-type

View Answer
Answer: d
Explanation: None.
9. Which of the following Selector same as :firstline; changed under CSS3 to make
pseudoelements obvious?

a) :first-letter
b) :last-child
c) :first-line
d) ::first-line

View Answer
Answer: d
Explanation: None.

10. What does HSL stands for?


a) Hue Specified Lightness
b) Hue Spot Lightness
c) Hue Saturation Lightness
d) None of the mentioned
View Answer
Answer: c

CSS Questions & Answers – Specifying sizes,


colors and files
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Specifying
sizes, colors and files”.

1. Which of the following is not an Absolute Unit?


a) px
b) em
c) pt
d) mm
View Answer
Answer: b
Explanation: em is a Relative Unit

2. Which of the following unit represent the viewport’s width?


a) vh
b) vmin
c) vw
d) ch
View Answer
Answer: c
Explanation: 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
View Answer
Answer:
Explanation:
advertisement
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
View Answer
Answer: a
Explanation:
Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate
Now!
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
View Answer
Answer: c
Explanation: 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>

View Answer
Answer: a
Explanation: 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
View Answer
Answer: c
Explanation: 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

View Answer
Answer: c
Explanation: Self-explainatory.

9. Which of the following attribute specifies the URL of the linked resource?
a) src
b) link
c) rel
d) href
View Answer
Answer: d
Explanation: 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
View Answer
Answer: c

CSS Questions & Answers – CSS border


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS border”.

1. Which of the following CSS property defines the different properties of all four sides of an
element’s border in a single declaration?
a) border
b) padding
c) border-collapse
d) border-width
View Answer
Answer: d
Explanation: The border-width property sets the width of an element’s four borders. This
property can have from one to four values.
2. Identify the CSS property defining bottom-left corner shape of the border?
a) border-radius
b) border-corner-radius
c) border-bottom-left-radius
d) border-left-radius
View Answer
Answer: c
Explanation: CSS3 border-radius property allows you can give any element “rounded
corners”.

3. Select the CSS property that sets the width of an element’s bottom border?
a) border-width
b) border-bottom
c) border-width-down
d) border-bottom-width
View Answer
Answer: d
Explanation: The border-bottom-width CSS property sets the width of the bottom border of a
box.
advertisement
4. Which of the following CSS property border-color property sets the color of an element’s
four borders?
a) border-background
b) border-background-color
c) border-color
d) all of the mentioned
View Answer
Answer: c
Explanation: The border-color property sets the color of an element’s four borders. This
property can have from one to four values.

5. Choose the CSS property that can be used for collapsing the borders between table
cells?
a) border
b) collapse-border
c) border-collapse
d) border-cell
View Answer
Answer: c
Explanation: The border-collapse property sets whether the table borders are collapsed into
a single border or detached as in standard HTML.

Subscribe Now: CSS Newsletter | Important Subjects Newsletters

6. Which CSS property can be used to set the image as border instead of the border style?
a) background-image
b) border-image
c) background-image-source
d) border-image-source
View Answer
Answer: d
Explanation: The border-image-source property specifies the path to the image to be used
as a border (instead of the normal border around an element).

7. In how many way border-image-width CSS property can be defined?


a) 4
b) 6
c) 8
d) 9
View Answer
Answer: d
Explanation: The border-image-width CSS property defines the offset to use for dividing the
border image in nine parts, the top-left corner, central top edge, top-right-corner, central
right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right
edge.

8. Which of the following is not an appropriate value for border-collapse?


a) all
b) collapse
c) inherit
d) separate
View Answer
Answer: a
Explanation: Except option a, all other values can be set to border collapse CSS property.

9. Which of the following specifies the distance between the borders of adjacent cells?
a) border-spacing-cell
b) border-width-spacing
c) border-spacing
d) cell-spacing
View Answer
Answer: c
Explanation: The border-spacing property sets the distance between the borders of
adjacent cells (only for the “separated borders” model).

10. Which of the following property defines the border-width, border-style and border-color
of an element’s top border in a single declaration?
a) border
b) border-top
c) border-top-corner
d) border-top-style
View Answer
Answer: b
Explanation: The border-top shorthand property sets all the top border properties in one
declaration.

CSS Questions & Answers – CSS Text


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Text”.

1. Which of the following CSS property is used to set the text formatting?
a) font
b) font-style
c) text-decoration
d) all of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

2. Which of the following sets the color of any text decoration, such as underlines, overlines,
and strike throughs?
a) text-font
b) text-format
c) text-color
d) text-decoration-color
View Answer
Answer: d
Explanation: Self-explainatory.

3. Which of the following sets what kind of line decorations are added to an element, such
as underlines, overlines, etc?
a) text-style
b) text-decoration
c) text-line
d) text-decoration-line
View Answer
Answer: a
Explanation: Self-explainatory.
advertisement
4. Which of the following text-decoration value specifies each line of text has a line above
it?
a) line
b) underline
c) overline
d) blink
View Answer
Answer: c
Explanation: Self-explainatory.

5. Which of the following


a) text-overline
b) text-overline-decoration
c) text-overline-width
d) text-decoration-overline-width
View Answer
Answer: c
Explanation: Self-explainatory.

Note: Join free Sanfoundry classes at Telegram or Youtube

6. Which of the following CSS property determines how overflowed content that is not
displayed is signaled to the users?
a) text-flow
b) text-underflow
c) text-overflow
d) none of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

7. Which of the following sets the mode for the overline text decoration, determining
whether the text decoration affects the space characters or not?
a) text-decoration
b) text-mode-overflow
c) text-mode
d) text-overline-mode
View Answer
Answer: b
Explanation: Self-explainatory.

8. Which of the following specifies what parts of an element’s content are skipped over
when applying any text decoration?
a) @font-text
b) font-style
c) text-skip
d) text-decoration-skip
View Answer
Answer: d
Explanation: Self-explainatory.

9. Which of the following is not a appropriate value for text-overline-width?


a) thin
b) medium
c) <number>
d) none of the mentioned
View Answer
Answer: d
Explanation: Self-explainatory.

10. Which of the following property applies one or more drop shadows to the text?
a) text-shadow
b) text-effect
c) text-format
d) text-decoration-shadow
View Answer
Answer: a

CSS Questions & Answers – CSS Voice


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Voice”.

1. Which of the following property sets the apparent position (in stereo sound) of the
synthesized voice for spoken media?
a) voice-balance
b) media-balance
c) balance
d) none of the mentioned
View Answer
Answer: a
Explanation: Self-explainatory.

2. Which of the following property allows the author to explicitly set the amount of time it
should take a speech synthesizer to read an element’s content?
a) @media
b) voice
c) voice-duration
d) all of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

3. Which of the following property sets the speaker’s voice used by a speech media agent
to read an element?
a) voice-family
b) voice-check
c) voice-control
d) none of the mentioned
View Answer
Answer: a
Explanation: Self-explainatory.
advertisement
4. Which of the following property determines how much variation in pitch or tone will be
created by the speech synthesize when reading an element?
a) voice-pitch
b) voice-range
c) voice-stress
d) none of the mentioned
View Answer
Answer: b
Explanation: Self-explainatory.

5. Which of the following property sets the speed at which the voice synthesized by a
speech media agent will read content?
a) voice-volume
b) voice-pitch
c) voice-stress
d) voice-rate
View Answer
Answer: d
Explanation: Self-explainatory.

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!

6. Which of the following property sets pitch or tone (high or low) for the synthesized speech
when reading an element; the pitch may be specified absolutely or relative to the normal
pitch for the voice-family used to read the text?
a) voice-check
b) voice-format
c) voice-pitch
d) voice-volume
View Answer
Answer: c
Explanation: Self-explainatory.

7. Which of the following property sets the volume for spoken content in speech media. It
replaces the deprecated volume property?
a) voice-volume
b) volume
c) !important
d) @media
View Answer
Answer: a
Explanation: Self-explainatory.

8. Which of the following is not a appropriate value for voice-volume?


a) silent
b) soft
c) hard
d) <number>
View Answer
Answer: c
Explanation: Self-explainatory.

9. Which of the following is not a appropriate value for voice-balance?


a) left
b) leftwards
c) up
d) centre
View Answer
Answer: c
Explanation: Self-explainatory.
10. Which of the following is not a appropriate value for voice-rate?
a) slow
b) fast
c) medium
d) none of the mentioned
View Answer
Answer: d

CSS Questions & Answers – CSS Outline


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Outline”.

1. Which of the following property is used to draw a line around elements outside the
borders?
a) line
b) padding
c) outline
d) border
View Answer
Answer: c
Explanation: Outlines do not take up space, they are drawn above the content.

2. Choose the option that correctly specifies the output of the following CSS.

span {
border: 1px solid red;
outline: green dotted thick;
}

a) All span elements will have a red border and a green dotted outline
b) All span elements will have a green thick border and a red outline
c) All span elements will have an outer red border and inner green dotted border
d) All span elements will have a outer green dotted border and an inner red border
View Answer
Answer: d
Explanation: The border property creates the inner border, while the outline sets the outer
border.
advertisement
3. Which of the following property specifies the color of an outline?
a) color-outline
b) outline-color
c) outline-style-color
d) none of the mentioned
View Answer
Answer: b
Explanation: As the property name specifies, it sets the color of the outline to the provided
value.

Note: Join free Sanfoundry classes at Telegram or Youtube


4. Identify the outline property that specifies the amount of area extended beyond the
border box.
a) outset3d
b) inset
c) outset
d) inset3d
View Answer
Answer: c
Explanation: It specifies a 3D outset border. The effect depends on the border-color value.

5. Which of the following value specifies a dashed outline?


a) dash
b) dashed
c) double-dash
d) all of the mentioned
View Answer
Answer: b
Explanation: The property defines a dashed border.

6. Which of the following property specifies the look and design of an outline?
a) outline-font
b) outline-style
c) outline-format
d) none of the mentioned
View Answer
Answer: b
Explanation: The outline-style CSS property is used to set the style of the outline of an
element. An outline is a line that is drawn around elements, outside the border edge, to
make the element stand out.

7. Which of the following values specifies a 3D grooved outline?


a) initial
b) ridge
c) groove
d) groove3d
View Answer
Answer: c
Explanation: groove specifies a 3D grooved border. The effect depends on the border-color
value.

8. Select the output of the following CSS.

div {
border-width:5px;
border-style:dotted solid double dashed;
}

a) Box having dotted top outline, solid right outline, double bottom outline and dashed left
outline
b) Box having dotted top outline, solid left outline, double bottom outline and dashed right
outline
c) Box having dotted bottom outline, solid right outline, double top outline and dashed left
outline
d) Box having dotted bottom outline, solid left outline, double top outline and dashed left
outline
View Answer
Answer: a
Explanation: The shorthand run in clockwise direction.

9. Which of the following specifies the width of an outline?


a) outline-size
b) outline-width
c) outline-height
d) both outline-size and outline-width
View Answer
Answer: b
Explanation: The outline-width CSS property is used to set the width of the outline of an
element.

10. Which of the following value specifies a solid outline?


a) bold
b) rock
c) solid
d) dashed
View Answer
Answer: c
Explanation: As the name suggests, a solid outline is created using this value

CSS Questions & Answers – Media Types


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Media Types”.

1. What does all media type is used for?


a) For use with all devices
b) For use with speech synthesizers
c) For use with handheld devices
d) For use with tactile Braille devices
View Answer
Answer: a
Explanation: None.

2. What does projection media type is used for?


a) For use with projected media (direct computer-to-projector presentations), or printing
transparencies for projection.
b) For use with color computer screens
c) For use with handheld devices
d) For use with television-type devices
View Answer
Answer: a
Explanation: None.

3. What does tty media type is used for ?


a) For use with low-resolution teletypes, terminals, or other devices with limited display
capabilities.
b) For use with Braille printers.
c) For use with speech synthesizers.
d) For use with projected media (direct computer-to-projector presentations), or printing
transparencies for projection.
View Answer
Answer: a
Explanation: None.
advertisement
4. What does aural media type is used for ?
a) For use with low-resolution teletypes, terminals, or other devices with limited display
capabilities
b) For use with Braille printers
c) For use with speech synthesizers
d) For use with projected media (direct computer-to-projector presentations), or printing
transparencies for projection
View Answer
Answer: c
Explanation: None.

5. What does braille media type is used for?


a) For use with all devices
b) For use with speech synthesizers
c) For use with handheld devices
d) For use with tactile Braille devices
View Answer
Answer: b
Explanation: None.

Subscribe Now: CSS Newsletter | Important Subjects Newsletters

6. The __________ rule makes it possible to define different style rules for different media
types in the same stylesheet.
a) audio/video
b) sink
c) @media
d) @canvas
View Answer
Answer: c
Explanation:
Example:
@media screen {
p {
font-family: verdana, sans-serif;
font-size: 17px;
}
}

7. What is the way to specify media dependencies for style sheets ?


a) Specify the target medium from a style sheet with the @media or @import at-rules
b) Specify the target medium within the document language
c) both Specify the target medium from a style sheet with the @media or @import at-rules
and Specify the target medium within the document language
d) none of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

8. ____________ types are mutually exclusive in the sense that a user agent can only
support one media type when rendering a document.
a) tv
b) tty
c) media
d) audio
View Answer
Answer: c
Explanation: Media types are mutually exclusive in the sense that a user agent can only
support one media type when rendering a document. However, user agents may use
different media types on different canvases. For example, a document may (simultaneously)
be shown in ‘screen’ mode on one canvas and ‘print’ mode on another canvas.

9. If an @media/@import rule contains a malformed media type (not an identifier) then the
statement is valid. State true or false.
a) True
b) False
View Answer
Answer: b
Explanation: @media and @import rules with unknown media types (that are nonetheless
valid identifiers) are treated as if the unknown media types are not present. If an
@media/@import rule contains a malformed media type (not an identifier) then the
statement is invalid.

10. Media type names are case-insensitive. State true or false.


a) True
b) False
View Answer
Answer: a

CSS Questions & Answers – Border Elements


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Border
Elements”.
1. Which of the following property defines in a shorthand form the width, style, and color for
the bottom border of an element?
a) border-bottom
b) border-bottom-color
c) border-bottom-all
d) none of the mentioned
View Answer
Answer: a
Explanation:
Syntax: border-bottom: border-width border-style border-color;

2. Which of the following property sets the width of an element’s bottom border?
a) border
b) border-collapse
c) border-bottom-width
d) none of the mentioned
View Answer
Answer: c
Explanation:
advertisement
Syntax: border-bottom-width: non-negative length | medium | thick | thin |
inherit

3. Which of the following property defines whether table cell borders are connected or
separate?
a) border-table
b) border
c) border-collapse
d) none of the mentioned
View Answer
Answer: c
Explanation:
Subscribe Now: CSS Newsletter | Important Subjects Newsletters
Syntax: border-collapse: collapse | separate | inherit

4. Which of the following property defines the style for the right border of an element?
a) border-spacing
b) border-spacing
c) border-right
d) border-right-style
View Answer
Answer: c
Explanation:
Syntax: border-right-style: dashed | dotted | double

5. Which of the following property defines the color of an element’s top border?
a) border-color
b) border-top
c) border-top-color-webkit
d) border-top-color
View Answer
Answer: d
Explanation:
Syntax: border-top-color: color | transparent | inherit

6. Which of the following property sets the width of an element’s complete border?
a) border-width
b) width
c) border-depth
d) none of the mentioned
View Answer
Answer: a
Explanation:
Syntax: border-width: width

7. Which of the following property defines the visual style of up to four different sides of a
border?
a) border-style
b) border
c) border-top
d) none of the mentioned
View Answer
Answer: a
Explanation: Syntax:
border-style: style

8. Which of the following defines in a shorthand form the width, style, and color for the top
border of an element?
a) border-up
b) border-bottom
c) border-style
d) none of the mentioned
View Answer
Answer: d
Explanation:
Syntax: border-top: border-width border-style border-color;

9. Which of the following property defines the y (vertical) coordinate for a positioned
element, relative to the bottom of the enclosing object or browser window?
a) border
b) bottom
c) position
d) none of the mentioned
View Answer
Answer: b
Explanation:
Syntax: bottom: length | percentage | auto | inherit
10. Which of the following property specifies the placement of an element in relation to
floating objects?
a) clear
b) color
c) space
d) none of the mentioned
View Answer
Answer: a

CSS Questions & Answers – Cross-Browser


Layout Techniques
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Cross-Browser
Layout Techniques”.

1. Which of the following property specifies the transparency of an element?


a) alpha
b) opacity
c) opac
d) none of the mentioned
View Answer
Answer: b
Explanation:
Syntax: opacity: alphavalue | inherit

advertisement
2. Which of the following property defines the offset from an element’s border and its
outline?
a) outline-border
b) outline-offset
c) outline-radius
d) none of the mentioned
View Answer
Answer: b
Explanation:
Syntax: outline-offset: length | inherit

3. Which of the following property allows a marquee to be used in the case of a text
overflow?
a) overflow-style
b) overflow-text
c) overflow-marquee
d) none of the mentioned
View Answer
Answer: a
Explanation:
Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate
Now!
Syntax: overflow-style: auto | marquee-block

4. Which of the following property defines how content should behave when it exceeds the
width of its enclosing element?
a) overflow-y
b) overflow-x
c) overflow-z
d) overflow-width
View Answer
Answer: b
Explanation:
Syntax: overflow-x: auto | hidden

5. Which of the following property is used to give a 3-D sense of depth to an element?
a) animation
b) perspec
c) sense
d) perspective
View Answer
Answer: d
Explanation:
Syntax: perspective: none

6. Which of the following property is used to define whether an element should be resized
and, if so, upon what axis?
a) axis
b) resize
c) set-origin
d) set-axis
View Answer
Answer: b
Explanation:
Syntax: resize: both | horizontal | none

7. Which of the following property defines the alignment of Ruby text as defined by a <rt>
tag, in relation to base text defined by a <ruby> tag?
a) ruby-align
b) ruby-text
c) ruby
d) none of the mentioned
View Answer
Answer: a
Explanation:
Syntax: ruby-align: auto | center

8. Which of the following property sets the base color for a scroll bar, which will include the
scroll box, track, and scroll arrows?
a) scrollbar-base
b) scrollbar-base-color
c) scrollbar-background
d) none of the mentioned
View Answer
Answer: c
Explanation:
Syntax: scrollbar-base-color: color

9. Which of the following property defines a color for the face of a scroll bar, including arrow
regions and the scroll box?
a) scrollbar-face
b) scrollbar-face-color
c) scrollbar-face-background
d) scrollbar-background
View Answer
Answer: c
Explanation:
Syntax: scrollbar-face-color: color

10. Which of the following property defines a highlight color for a scroll bar and scroll
arrows?
a) scrollbar-color
b) scrollbar-highlight
c) scrollbar-highlight-color
d) scrollbar-highlight-background
View Answer
Answer: c

CSS Questions & Answers – Styling Texts


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Styling Texts”.

1. Which of the following property sets the size of the font?


a) font-size
b) font-variant
c) font-style
d) font-weight
View Answer
Answer: a
Explanation: Self-explainatory.

2. Which of the following Property controls the display of small caps?


a) font-size
b) font-variant
c) font-style
d) font-weight
View Answer
Answer: b
Explanation: Self-explainatory.

3. Which of the following font-weight property make the text lighter in relation to its parent?
a) unfocus
b) normal
c) lighter
d) normal
View Answer
Answer: c
Explanation: Self-explainatory.
advertisement
4. Which of the following property converts text to initial capitals, all uppercase, or all
lowercase?
a) text-transform
b) text
c) text-decoration
d) text-uppercase
View Answer
Answer: a
Explanation: Self-explainatory.

5. Which of the following font-variant property render text using the same letter case as in
the underlying code?
a) bold
b) small-caps
c) normal
d) none of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

Note: Join free Sanfoundry classes at Telegram or Youtube

6. Which of the following property sets the alignment of the last line of a text block?
a) overflow-wrap
b) text-align-last
c) text-transform
d) text-indent
View Answer
Answer: b
Explanation: Self-explainatory.

7. Which of the following property controls how spaces and word wrapping are handled?
a) spacing
b) text-space
c) white-space
d) word-spacing
View Answer
Answer: c
Explanation: Self-explainatory.

8. Which of the following property specifies what line decorations, if any, are added to the
text?
a) text-decoration-line
b) text-line-decoration
c) text-decoration-style
d) text-style-decoration
View Answer
Answer: a
Explanation: Self-explainatory.

9. Which of the following property applies one or more shadows to text?


a) text-shadow
b) shadowed
c) shadow
d) word-shadow
View Answer
Answer: a
Explanation: Self-explainatory.

10. Which of the following property allows long text, such as a URL, to be broken if it would
otherwise over?
a) text-transform
b) word-wrap
c) text-overflow
d) text-indent
View Answer
Answer: b

CSS Questions & Answers – Embedding Web


Fonts
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Embedding
Web Fonts”.

1. Which of the following is used to associate a font name to be used in a style sheet with
some downloadable font?
a) @font-face
b) @charset
c) @media
d) !important
View Answer
Answer: a
Explanation: None.

2. Which of the following is not value for the font-stretch(Font descriptor)?


a) normal
b) 50%
c) expanded
d) ultra-expanded
View Answer
Answer: b
Explanation: None.

3. Which of the following font format is supported by all the latest browser?
a) EOT
b) WOFF2
c) SVG
d) WOFF
View Answer
Answer: d
Explanation: None.
advertisement
4. Which of the following media query describe output style portrait if height is greater than
or equal to width, landscape if the opposite?
a) grid
b) monochrome
c) resolution
d) orientation
View Answer
Answer: d
Explanation: None.

5. Which of the following media query describe the ratio of the width to the height of the
media?
a) ratio
b) aspect-ratio
c) deviceaspect-ratio
d) resolution
View Answer
Answer: b
Explanation: None.

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!

6. Which of the following media query describe describes the height of the screen or full
height of the output page?
a) height
b) aspect-ratio
c) device-height
d) resolution
View Answer
Answer: c
Explanation: None.

7. Which of the following property sets the style of a font?


a) font
b) style
c) font-style
d) @font-face
View Answer
Answer: c
Explanation: Syntax:
font-style: italic | normal | oblique | inherit.

8. Which of the following property specifies whether an element is an accelerator indicator


or not?
a) push
b) accelerator
c) jump-start
d) animation
View Answer
Answer: b
Explanation: Syntax:
accelerator: true | false.

9. Which of the following property sets a variation of the specified or default font family?
a) fonts
b) font-style
c) font-variant
d) font-weight
View Answer
Answer: c
Explanation: Syntax:
font-variant: normal | small-caps.

10. The @font-face rules assign different names to the regular and bold versions of the
font.State true or false.
a) True
b) False
View Answer
Answer: a

CSS Questions & Answers – CSS Box Model


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Box
Model”.

1. Which of the following property adds padding to the top of an element?


a) height
b) padding-height
c) top
d) padding-top
View Answer
Answer: d
Explanation: Self-explainatory.

2. Which of the following display property value is described by treats the element as inline?
a) inline-block
b) list-item
c) block
d) inline
View Answer
Answer: d
Explanation: Self-explainatory.

3. Which of the following property defines the style for the bottom border of an element?
a) border-bottom-style
b) border-collapse
c) border-style-bottom
d) none of the mentioned
View Answer
Answer: a
Explanation: Self-explainatory.
advertisement
4. Which of the following property defines the style for the left border of an element?
a) border-style
b) border-left-style
c) border-left-width
d) border-right
View Answer
Answer: b
Explanation: Self-explainatory.

5. Which of the following visibility property value is described by The element is not visible,
but the layout of surrounding elements is not affected?
a) visible
b) hidden
c) collapse
d) none of the mentioned
View Answer
Answer: b
Explanation: None.

Subscribe Now: CSS Newsletter | Important Subjects Newsletters

6. Which of the following display property value is described by used internally by browsers
to create list items. Of no practical value to web designers?
a) inline-block
b) list-item
c) group
d) none
View Answer
Answer: b
Explanation: Self-explainatory.

7. Which of the following property controls the horizontal overflow of a block or inline block?
a) overflow-x
b) overflow
c) overflow-y
d) overflow-k
View Answer
Answer: a
Explanation: Self-explainatory.

8. Which of the following Overflow property value is described by scrollbars should be


provided if the content is too big, but actual implementation is left up to the browser?
a) visible
b) scroll
c) auto
d) hidden
View Answer
Answer: c
Explanation: Self-explainatory.

9. Which of the following property sets a consistent margin on all four sides of the affected
element?
a) boder
b) margin
c) padding
d) none fof the mentioned
View Answer
Answer: b
Explanation: Self-explainatory.

10. Which of the following box-sizing property value is described by width and height
include content, padding, and borders?
a) border-box
b) content-box
c) content-box
d) none fof the mentioned
View Answer
Answer: a

CSS Questions & Answers – Backgrounds,


Borders and Drop Shadow
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Backgrounds,
Borders and Drop Shadow”.

1. Which of the following property sets the background image to scroll or not to scroll with its
associated element’s content?
a) background-scroll
b) background-attach
c) background-attachment
d) background-allowance
View Answer
Answer: c
Explanation:
Syntax: background-attachment: scroll | fixed | inherit

advertisement
2. Which of the following property sets an element’s background color?
a) background-image
b) background-color
c) background-colors
d) background-position
View Answer
Answer: b
Explanation:
Syntax: background-color: color | transparent

3. Which of the following property defines the color of an element’s right border?
a) border-right-colors
b) border-right-color
c) border-right
d) border-color
View Answer
Answer: b
Explanation:
Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate
Now!
Syntax: border-right-color: color | transparent

4. Which of the following property defines the space between cells in a table?
a) auto
b) border
c) spacing
d) border-spacing
View Answer
Answer: d
Explanation:
Syntax: border-spacing: non-negative length(s) | inherit

5. Which of the following property defines the visual style of up to four different sides of a
border?
a) border-color
b) border-img
c) border-visual
d) border-style
View Answer
Answer: b
Explanation:
Syntax: border-style: style

6. Which of the following property defines in a shorthand form the width, style, and color for
the top border of an element?
a) border-style
b) border-height
c) border-width
d) border-top
View Answer
Answer: d
Explanation:
Syntax: border-top: border-width border-style border-color;

7. Which of the following property sets the shadow for a box element?
a) shadow
b) set-shadow
c) canvas-shadow
d) box-shadow
View Answer
Answer: b
Explanation:
Syntax:box-shadow: none | inherit

8. Which of the following property defines a shadow effect for text?


a) box-shadow
b) img-shadow
c) text-shadow
d) none of the mentioned
View Answer
Answer: d
Explanation: The shadow effects are applied in the order specified and may overlay each
other, but they will never overlay the text itself. Each shadow effect must specify a shadow
offset horizontally and vertically and may optionally specify a blur radius and a shadow
color.

9. Which of the following property defines a shadow color for the right and bottom edges of
a scroll bar?
a) scrollbar-darkshadow
b) scrollbar-shadow-color
c) scrollbar-darkshadow-color
d) none of the mentioned
View Answer
Answer: c
Explanation:
Syntax: scrollbar-darkshadow-color: color

10. Which of the following property defines a color for the right and bottom edges of a scroll
bar.
a) scrollbar-color
b) scrollbar-darkshadow-color
c) scrollbar-shadow
d) scrollbar-shadow-color
View Answer
Answer: d
Explanation:
CSS Questions & Answers – Styling Lists and
Navigation Menus
This set of CSS online quiz focuses on “Styling Lists and Navigation Menus”.

1. Which of the following property sets list-style-type, list-style-position, and liststyle-image?


a) style
b) list-style
c) menu-style
d) img-style
View Answer
Answer: b
Explanation:
Syntax: list-style: list-style-type | list-style-position | list-style-image

advertisement
2. Which of the following property assigns a graphic image to a list item?
a) list-image-style
b) list-style-image
c) list-image
d) none of the mentioned
View Answer
Answer: b
Explanation:
Syntax: list-style-image: url(url of image) | none

3. Which of the following property specifies whether the labels for an element’s list items are
positioned inside or outside the “box” defined by the listed item?
a) list-style
b) list-position
c) list-style-position
d) list-position-style
View Answer
Answer: c
Explanation:
Subscribe Now: CSS Newsletter | Important Subjects Newsletters
Syntax: list-style-position: inside | outside | inherit

4. Which of the following property defines labels for a list of items?


a) list-shape
b) list-style
c) list-type
d) list-style-type
View Answer
Answer: d
Explanation:
Syntax: list-style-type: disc | circle | square | decimal
5. Which of the following property defines in a shorthand form the width, style, and color for
all four sides of an element’s border?
a) border
b) border-style
c) border-color
d) border-all
View Answer
Answer: a
Explanation:
Example: div {border: 2px double red;}

6. Which of the following property defines in a shorthand form the width, style, and color for
the left border of an element?
a) border
b) border-style
c) border-left
d) none of the mentioned
View Answer
Answer: b
Explanation:
Syntax: border-left: border-width border-style border-color;

7. Which of the following property is used to round border corners?


a) border-corner
b) border-round
c) border-radius
d) none of the mentioned
View Answer
Answer: c
Explanation:
Syntax: border-radius: horizontal-radius vertical-radius

8. Which of the following property influences the horizontal alignment of an element, making
it “float” toward the left or right margin of its containing element?
a) float
b) float-left
c) float-right
d) float-align
View Answer
Answer: d
Explanation:
Syntax: float: left | right | none | inherit;

9. Which of the following property sets the font face to be used for text?
a) font
b) font-text
c) font-family
d) none of the mentioned
View Answer
Answer: c
Explanation:
Syntax: font-family: font 1

10. Which of the following property sets the font size of text?
a) font
b) font-text
c) font-size
d) none of the mentioned
View Answer
Answer: c

CSS Questions & Answers – Applying Style to


a Document
This set of CSS Interview Questions and Answers for freshers focuses on “Applying Style to
a Document”.

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
View Answer
Answer: d
Explanation: None.

2. What will be the output of following code snippet?

<style h1 {color: green;}>


<h1>Hello</h1>

a) h1 heading becomes green


b) error
c) h1 heading disappears
d) nothing happens
View Answer
advertisement
3. What will be the output of below mentioned code snippet?

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!
<p style="color: red">text</p>

a) make that specific paragraph red.


b) error
c) nothing happens
d) none of the mentioned
View Answer
4. The _______property is used to set the color of the text.
a) pallet
b) colour
c) color
d) text-decoration
View Answer
Answer: c
Explanation: None

5. Which of the following is the correct way to apply Styles?


a) inside an HTML element
b) inside the section of an HTML page
c) in an external CSS file
d) all of the mentioned
View Answer
Answer: d
Explanation: 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
View Answer
Answer: d
Explanation: 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
View Answer
Answer: d
Explanation: None.

8. The __________ property specifies the type of positioning method used for an element.
a) align
b) float
c) position
d) padding
View Answer
Answer: c
Explanation: None.

9. Which style is this?

<body style="background-color: lightcyan">


a) Inline Styles
b) External Style Sheet
c) External Style Sheettyle Sheet
d) None of the mentioned
View Answer
Answer: a

CSS Questions & Answers – Advanced


Selectors
This set of CSS Multiple Choice Questions & Answers focuses on “Advanced Selectors”.

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
View Answer
Answer: b
Explanation:
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
View Answer
Answer: c
Explanation:
advertisement
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
View Answer
Answer: a
Explanation:
Subscribe Now: CSS Newsletter | Important Subjects Newsletters
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
View Answer
Answer: a
Explanation: 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
View Answer
Answer: c
Explanation:
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
View Answer
Answer: a
Explanation:
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
View Answer
Answer: c
Explanation:
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
View Answer
Answer: c
Explanation:
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
View Answer
Answer: a
Explanation:
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
View Answer
Answer: a

CSS Questions & Answers – Selectors


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Selectors”.

1. What type of selector is used in this case?

p {line-height: 150%;}

a) class Selectors
b) element Selectors
c) id Selectors
d) none of the mentioned
View Answer
Answer: b
Explanation: 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
View Answer
Answer: c
Explanation: 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
advertisement
<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
View Answer
Answer: a
Explanation: Self-explainatory.

4. What will be the output of below mentioned code snippet?

Note: Join free Sanfoundry classes at Telegram or Youtube


p strong {background-color: yellow;}

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
View Answer
Answer: b
Explanation: 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
View Answer
Answer: c
Explanation: Self-explainatory.

6. Which of the following selectors selects any tag with an id attribute set?

a) E#id
b) .class
c) #id
d) *

View Answer
Answer: c
Explanation: Example:#test {color: green;}
/* makes a tag with id=’test’ green */

7. Which of the following selectors selects direct descendents?

a) E &gt; F
b) E F
c) E + F
d) E ~ F

View Answer
Answer: a
Explanation: 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

View Answer
Answer: b
Explanation: 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

View Answer
Answer: a
Explanation: Example:
h1.note {text-decoration: underline;}
/* underlines all h1 tags with
class='note' */

10. Which of the following selectors selects adjacent siblings?


a) E &gt; F
b) E F
c) E + F
d) E ~ F

View Answer
Answer: c
CSS Questions & Answers – Appearance of
Form Elements
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Appearance of
Form Elements”.

1. Which property is used to add space inside the text field?


a) padding
b) margin
c) number
d) password
View Answer
Answer: a
Explanation: Padding property is used to add space inside the text field, when we have
many inputs after each other we can also add some margin to add more space outside,
input[type=text] {padding:13px 30px; margin: 8px 0;}

advertisement
2. Which one can animate the width of search input when get focus?
a) focus
b) transition
c) outline
d) color
View Answer
Answer: b
Explanation: For animating the width of search input when it gets focus we used CSS
transition property,
input[type=text] {-webkit-transition: width 09s ease-in-out; transition:
width 0.9s ease-in-out; } input[type=text]:focus {width:100%;}

Subscribe Now: CSS Newsletter | Important Subjects Newsletters

3. Which of the following will insert generated content in the counter?


a) content
b) counter-reset
c) counter-increment
d) counter()
View Answer
Answer: a
Explanation: content inserts generated content, counter-reset creates or resets a counter,
counter-increment increments the value of the counter, counter() function adds the value of
a counter to an element.

4. Which of the following is not the pseudo class for CSS Basic UI Level3?
a) :optional
b) :read-only
c) :valid
d) :checked
View Answer
Answer: d
Explanation: CSS Basic UI Level 3 has many pseudo-classes
like :widget, :invalid, :valid, :in-range, :required, :read-write, :read-only, :optional, :out-of-
range. CSS Selector Level 3 has the classes :disabled, :enabled, :indeterminate, :checked.

5. Which is not a Mozilla CSS Extension?


a) ::-webkit-input-placeholder
b) :-moz-placeholder
c) –moz-ui-valid
d) :-moz-submit-invalid
View Answer
Answer: a
Explanation: Mozilla CSS Extensions include :-moz-placeholder, :-moz-ui-invalid, :moz-ui-
valid, :moz-submit-invalid. ::-webkit-input-placeholder is Webkit CSS Extension, :-ms-input-
placeholder is Microsoft CSS Extension.

6. Which of the following is an extension to the common JavaScript framework?


a) Niceforms
b) Uni-forms
c) Formalize
d) jQuery UI
View Answer
Answer: c
Explanation: Formalize is an extension to common JavaScript frameworks like JQuery,
Dojo, YUI etc., it helps to normalize and customize the forms. Uni-form standardizes form
markup, styling it with CSS, it also offers a few additional features when used with jQuery.

7. Which of the following will provide date pickers?


a) jQuery UI
b) Niceforms
c) WebShim
d) Twitter Bootstrap
View Answer
Answer: a
Explanation: jQuery UI offers some very interesting and advanced as well as customizable
widgets like date pickers with special attention given to accessibility. Niceforms is a
standalone JavaScript method that provides complete customization of web forms.

8. Which of the following helps to deal with HTML5 support?


a) Twitter Bootstrap
b) WebShim
c) jQuery UI
d) Niceforms
View Answer
Answer: b
Explanation: WebShim is a big tool that can help with browser HTML5 support, web form
part can be very helpful. If you want to normalize forms Twitter Bootstrap can greatly help.

9. Which is not a WebKit value?


a) push-button
b) menulist
c) radio
d) tooltip
View Answer
Answer: d
Explanation: WebKit includes various values like checkbox, button, button-level, menulist,
scrollbarbutton-up, listitem, scrollbarbutton-left, caret, textfield, textarea, searchfield,
searchfield-decoration, slider-vertical, slider-horizontal, scrollbargripper-horizontal etc.

10. Which is not a Mozilla value?


a) caret
b) resizer
c) listbox
d) scrollbar
View Answer
Answer: a
Explanation: Mozilla includes many values like menulist, radio, scrollbar, dialog, listbox,
scrollbarbutton-down, scrollbar, resizer, checkbox, scrollbarbutton-up, separator, toolbar,
toolbox, statusbar, separator, toolbarbutton, window, treetwisty, treeview etc.

11. Which is not the property of CSS box model?


a) width
b) height
c) margin
d) color
View Answer
Answer: d
Explanation: CSS box model include height, width, padding, margin and border. All text-
fields have complete support for every property related to CSS box model. Browser relies
on system default styles when displaying these widgets.

CSS Questions & Answers – CSS Transition,


Perl cgi Programming
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS Transition,
Perl cgi Programming”.

1. Which value specifies a transition effect with a slow start, then fast, then end slowly?
a) ease
b) linear
c) ease-in
d) ease-out
View Answer
Answer: a
Explanation: The transition-timing-function property takes the value ease. It specifies a
transition effect with a slow start, then fast, then end slowly and this is the default value,
ease-in specifies a transition effect with a slow start.
2. Which of the following specifies a transition effect with same speed from start to end?
a) linear
b) ease-out
c) ease-in-out
d) ease
View Answer
Answer: a
Explanation: linear value specifies a transition effect with the same speed from start to end,
ease-in-out specifies a transition effect with a slow start and end, ease-out specifies a
transition with a slow end.

3. Which of the following specifies how many seconds a transition effect takes to complete?
a) transition-delay
b) transition-duration
c) transition-property
d) transition
View Answer
Answer: b
Explanation: transition-duration specifies how many seconds or milliseconds a transition
effect takes to complete, a transition is a shorthand property for setting the four transition
properties into a single property.
advertisement
4. What specifies the speed curve of transition effect?
a) transition-delay
b) transition-property
c) transition-timing-function
d) transition-duration
View Answer
Answer: c
Explanation: transition-timing-function specifies the speed curve of transition effect,
transition-property specifies the name of the CSS property the transition effect is for,
transition-delay specifies a delay in seconds for transition effect.

5. Which of the following defines a MIME string format of the content being returned?
a) content-type:string
b) expires:date string
c) location:URL string
d) last-modified:string
View Answer
Answer: a
Explanation: Content-type:string is a MIME string defining the format of the content being
returned, example is content-type:text/html, last-modified: string defines the date of last
modification of the file.

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!

6. What defines the date when information becomes invalid?


a) last-modified: string
b) expires: date string
c) last-modified: string
d) content-type: string
View Answer
Answer: b
Explanation: expires: sate string defines the date when information becomes invalid. This
should be used by the browser to decide when a page needs to be refreshed. A valid date
string should be in the format 01 Jan 1998 12:00:00 GMT.

7. Which of the following specifies the length of the data being returned?
a) set-cookie: string
b) location: URL string
c) content-length: string
d) last-modified: string
View Answer
Answer: c
Explanation: content-length: string specifies the length in bytes of the data being returned.
The browser uses this value to report the estimated download time for a file. Set-cookie:
string set the cookie passed through the string.

8. Which variable defines the data type of the content?


a) content_type
b) content_length
c) http_cookie
d) http_user_agent
View Answer
Answer: a
Explanation: The data type of the content is defined by content_type variable, used when
the client is sending attached content to the server, like file upload etc, the length of the
query information is defined by content_length, it’s available only for POST requests.

9. What returns the set cookies in the form of a key?


a) path_info
b) http_user_agent
c) http_cookie
d) query_string
View Answer
Answer: c
Explanation: http_cookie returns the set cookies in the form of key and value pair, in
http_user_agent user-agent request-header field contains information about user agent
originating the request. It’s the name of the web browser.

10. Which of the following gives the path for CGI script?
a) remote_host
b) remote_addr
c) query_string
d) path_info
View Answer
Answer: d
Explanation: path_info provides the path for the CGI script, query_string gives URL-
encoded information that is sent with GET method request, remote_addr gives the IP
address of the remote host making the request.

11. What gives the full path to CGI script?


a) script_filename
b) script_name
c) server_name
d) request_method
View Answer
Answer: a
Explanation: script_filename gives the full path to the CGI script, script_name gives the
name of the CGI script, server_name gives the server’s hostname or IP address,
request_method is the method used to make the request, the most common methods are
GET and POST

CSS Questions & Answers – Miscellaneous


This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Miscellaneous”.

1. Which of the following is not a combinatory?


a) *
b) >
c) ~
d) +
View Answer
Answer: a
Explanation: Combinator explains the relationship between the selectors. There are four
combinators in CSS, child selector (>), adjacent sibling selector(+), general sibling
selector(~), descendent selector (space).

2. Which of the following selects all elements that are siblings of the specified element?
a) child selector
b) general sibling selector
c) adjacent sibling selector
d) descendant selector
View Answer
Answer: b
Explanation: General sibling selector selects all elements that are siblings of a specified
element, adjacent sibling selector selects all elements that are adjacent siblings of the
specified element, child selector selects all elements that are immediate children of the
specified element.

3. Which of the following adds the value of a counter to an element?


a) counter-increment
b) content
c) counter()
d) counter-reset
View Answer
Answer: c
Explanation: counter() or counters() function adds value of counter to an element, content
inserts generated content, counter-increment increments a counter value, counter-reset
creates or resets a counter.
advertisement
4. Which of the following specifies how to slice border image?
a) border-image
b) border-image-source
c) border-image-outset
d) border-image-slice
View Answer
Answer: d
Explanation: border-image-slice specifies how to slice border image, border-image-outset
specifies the amount by which border image area extends beyond the border box, border-
image is a shorthand property for setting all the border-image properties.

5. Which web font was developed by Apple and Microsoft in the late 1980s?
a) TTF
b) OTF
c) WOFF
d) WOFF 2.0
View Answer
Answer: a
Explanation: TrueType (TTF) is a font standard developed in the late 1980s by Microsoft
and Apple. It is the most common font format for both Microsoft Windows and Mac OS
operating systems.

Note: Join free Sanfoundry classes at Telegram or Youtube

6. Which of the following is a format for scalable computer fonts?


a) EOT
b) WOFF
c) OTF
d) WOFF 2.0
View Answer
Answer: c
Explanation: OpenType (OTF) is a format scalable for computer fonts, it was built on
TrueType, and is a registered trademark of Microsoft. These fonts are used commonly
today on major computer platforms.

7. Which font format is used in web pages?


a) WOFF 2.0
b) WOFF
c) SVG Fonts
d) EOT
View Answer
Answer: b
Explanation: WOFF is font format used in web pages. It was developed in 2009. It is
essentially OpenType or TrueType with compression and additional metadata. The goal is
to support font distribution from the server to client over the network with bandwidth
constraints.

8. What value lets animation to play forwards first then backward?


a) alternate
b) alternate-reverse
c) reverse
d) normal
View Answer
Answer: a
Explanation: When the value is set to alternate the animation is played forwards first then
backward. When a value is set to alternate-reverse, the animation is played backward first,
then forwards. At normal value the animation is played as normal, this is the default value.

9. Which value specifies animation with slow start?


a) ease-out
b) ease-in
c) linear
d) ease
View Answer
Answer: b
Explanation: ease-in specifies an animation with a slow start, ease-out specifies an
animation with a slow end, linear specifies animation with same speed from start to end,
ease specifies an animation with a slow start, then fast, then end slowly.

10. How many values are there for animation-full-mode property?


a) 1
b) 2
c) 3
d) 4
View Answer
Answer: d
Explanation: animation-fill-mode property specifies the style for the target element when an
animation is not playing. There are four values for this property namely none, forwards,
backwards, and both. None is the default value.

11. Which of the following specifies animation code?


a) @keyframes
b) animation
c) animation-delay
d) animation-direction
View Answer
Answer: a
Explanation: Akeyframes specifies animation code, animation is shorthand property which
sets all the animation property, animation-delay specifies the delay for start of the
animation, animation-delay specifies a delay for start of the animation.
12. Which specifies the speed curve of animation?
a) animation-iteration-count
b) animation-name
c) animation-play-state
d) animation-timing-function
View Answer
Answer: d
Explanation: animation-timing-function specifies the speed curve of animation, animation-
play-state specifies whether the animation is running or paused, animation-name specifies
the name of @keyframes animation.

13. How many values are there for the object-fit property?
a) 2
b) 5
c) 3
d) 4
View Answer
Answer: b
Explanation: object-fit property can have 5 properties names fill, contain, cover, none, scale-
down. The default value is fill, the replaced content is sized to fill element’s content box,
with help of contain the replaced content is scaled to maintain its aspect ratio while fitting
element’s content box.

14. Which property specifies the number of columns an element should be divided into?
a) column-rule
b) column-count
c) column-gap
d) column-fill
View Answer
Answer: b
Explanation: column-count specifies the number of columns an element should be divided
into, column-fill specifies how to fill the columns, column-gap specifies the gap between
columns, column-rule is for setting all the column-rule properties.

15. Which property is used for setting column-width and column-count?


a) columns
b) column-width
c) column-span
d) column-width-rule
View Answer
Answer: a
Explanation: columns is a shorthand property for setting column-width and column-count,
column-width specifies suggested, optimal width for columns, column-span specifies how
many columns an element should span across.

CSS Quiz Results


Score: 14 of 25
56% Correct:

Question 1:
What does CSS stand for?

Cascading Style Sheets Your answer

Colorful Style Sheets

Computer Style Sheets

Creative Style Sheets

Question 2:
What is the correct HTML for referring to an external style sheet?

<link rel="stylesheet" type="text/css" href="mystyle.css"> Your


answer

<style src="mystyle.css">

<stylesheet>mystyle.css</stylesheet>

Question 3:
Where in an HTML document is the correct place to refer to an external style
sheet?

At the end of the document Your answer

In the <body> section

In the <head> section Correct answer


Question 4:
Which HTML tag is used to define an internal style sheet?

<style> Your answer

<script>

<css>

Question 5:
Which HTML attribute is used to define inline styles?

style Your answer

class

styles

font

Question 6:
Which is the correct CSS syntax?

body {color: black;} Your answer

body:color=black;

{body;color:black;}

{body:color=black;}
Question 7:
How do you insert a comment in a CSS file?

/* this is a comment */ Your answer

// this is a comment //

' this is a comment

// this is a comment

Question 8:
Which property is used to change the background color?

background-color Your answer

color

bgcolor

Question 9:
How do you add a background color for all <h1> elements?

h1 {background-color:#FFFFFF;} Your answer

all.h1 {background-color:#FFFFFF;}

h1.all {background-color:#FFFFFF;}

Question 10:
Which CSS property is used to change the text color of an element?
text-color Your answer

fgcolor

color Correct answer

Question 11:
Which CSS property controls the text size?

font-size Your answer

text-style

text-size

font-style

Question 12:
What is the correct CSS syntax for making all the <p> elements bold?

p {font-weight:bold;} Your answer

p {text-size:bold;}

<p style="font-size:bold;">

<p style="text-size:bold;">

Question 13:
How do you display hyperlinks without an underline?

a {text-decoration:no-underline;} Your answer


a {text-decoration:none;} Correct answer

a {decoration:no-underline;}

a {underline:none;}

Question 14:
How do you make each word in a text start with a capital letter?

text-style:capitalize Your answer

You can't do that with CSS

text-transform:capitalize Correct answer

transform:capitalize

Question 15:
Which property is used to change the font of an element?

font-weight Your answer

font-style

font-family Correct answer

Question 16:
How do you make the text bold?

font-weight:bold; Your answer

font:bold;
style:bold;

Question 17:
How do you display a border like this:

The top border = 10 pixels


The bottom border = 5 pixels
The left border = 20 pixels
The right border = 1pixel?

border-width:10px 5px 20px 1px; Your answer

border-width:10px 20px 5px 1px;

border-width:10px 1px 5px 20px; Correct answer

border-width:5px 20px 10px 1px;

Question 18:
Which property is used to change the left margin of an element?

margin-left Your answer

indent

padding-left

Question 19:
When using the padding property; are you allowed to use negative values?

Yes Your answer

No Correct answer
Question 20:
How do you make a list that lists its items with squares?

list-type: square; Your answer

list-style-type: square; Correct answer

list: square;

Question 21:
How do you select an element with id 'demo'?

.demo Your answer

*demo

demo

#demo Correct answer

Question 22:
How do you select elements with class name 'test'?

.test Your answer

test

#test

*test
Question 23:
How do you select all p elements inside a div element?

div.p Your answer

div + p

div p Correct answer

Question 24:
How do you group selectors?

Separate each selector with a comma Your answer

Separate each selector with a plus sign

Separate each selector with a space

Question 25:
What is the default value of the position property?

relative Your answer

static Correct answer

fixed

absolute

CSS Questions & Answers – Strings and


Keywords
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “Strings and
Keywords”.
1. Which of the following strings are defined by in css?
a) single quotes
b) double quotes
c) both single quotes and double quotes
d) none of the mentioned
View Answer
Answer: c
Explanation: 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
View Answer
Answer: c
Explanation: 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
View Answer
Answer: c
Explanation: 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.

advertisement

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
View Answer
Answer: a
Explanation: 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
View Answer
Answer: d
Explanation: 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%.

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!

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
View Answer
Answer: a
Explanation: 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
View Answer
Answer: b
Explanation: 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
View Answer
Answer: d
Explanation: 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
View Answer
Answer: b
Explanation: 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
View Answer
Answer: d
Explanation: Syntax:

CSS Questions & Answers – CSS1 and CSS 2.1


Properties
This set of CSS test focuses on “CSS1 and CSS 2.1 Properties”.

1. Which of the following property sets in a shorthand form any or all background
properties?
a) font
b) background
c) background-color
d) background-position
View Answer
Answer: b
Explanation: Syntax:
background: background-color background-image background-repeat background-
attachment background- position;
2. Which of the following property defines whether table cell borders are connected or
separate?
a) border-style
b) border-collapse
c) border-color
d) border-bottom-width
View Answer
Answer: b
Explanation:
Syntax: border-collapse: collapse | separate | inherit
3. Which of the following property defines the style for the right border of an element?
a) border-left
b) border-right
c) border-right-style
d) border-style
View Answer
Answer: c
Explanation:

advertisement

Syntax:border-right-style: dashed | dotted | double | groove | hidden | inset


| inherit | none | outset | ridge | solid
4. Which of the following property defines the visual style of up to four different sides of a
border?
a) border-width
b) border-top
c) border
d) border-style
View Answer
Answer: d
Explanation:

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!
Syntax: border-style: style [ style style style ]
5. Which of the following property sets the coordinates of the clipping shape that exposes or
hides the content of absolutely positioned elements?
a) clip
b) clamp
c) clip-wekit
d) clamp-webkit
View Answer
Answer: b
Explanation:
Syntax: clip: rect(coordinates) | auto | inherit
6. Which of the following property generates content in a document and is used with
the :before and :after pseudo-elements?
a) text
b) content
c) contents
d) none of the mentioned
View Answer
Answer: c
Explanation:
Syntax: content: normal | none | string
7. Which of the following property controls CSS counter values?
a) counter
b) counter-increment
c) counter-decrement
d) none of the mentioned
View Answer
Answer: b
Explanation:
Syntax: counter-increment: counter-name1 [integer] ... counter-nameN [integer]
| none | inherit
8. Which of the following property determines how the cursor displays when passed over
the affected element?
a) mouse
b) cursor
c) click
d) focus
View Answer
Answer: d
Explanation:
Syntax: cursor: url(address of cursor file)
9. Which of the following property is used to control the text direction, much like the dir
attribute for (X)HTML tags?
a) left
b) right
c) direction
d) direct
View Answer
Answer: c
Explanation:
Syntax: direction: ltr | rtl | inherit
10. Which of the following property specifies an element’s display type and can override an
element’s defined presentation?
a) content
b) display
c) visibility
d) none of the mentioned
View Answer
Answer: d
Explanation:
CSS Questions & Answers – CSS3 Transitions
for Images
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS3
Transitions for Images”.

1. Which of the following css property specifies an image to use as the background of an
element?
a) background
b) background-img
c) background-image
d) none of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

2. Which of the following css property specifies a delay for the transition effect?
a) transition-delay
b) transition-effect
c) transition
d) transition-duration
View Answer
Answer: a
Explanation: Self-explainatory.

3. Which of the following method rotates an element around its Y-axis at a given degree
using tranform 3D?
a) rotateY()
b) rotate-Y()
c) rotate-Yaxis()
d) none of the mentioned
View Answer
Answer: a
Explanation: Self-explainatory.

advertisement

4. Which of the following property defines where a 3D element is based in the x- and the y-
axis?
a) transform-style
b) perspective(n)
c) perspective-origin
d) none of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.
5. Which of the following css property repeats an image both horizontally and vertically?
a) background
b) background-image
c) background-repeat
d) background-position
View Answer
Answer: c
Explanation: Self-explainatory.

Note: Join free Sanfoundry classes at Telegram or Youtube

6. Which of the following CSS3 property specifies how nested elements are rendered in 3D
space?
a) transform
b) transform-style
c) transform-render
d) none of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

7. Which of the following CSS3 property specifies the intrinsic resolution of all raster images
used in/on the element?
a) image-orientation
b) image-rendering
c) image-resolution
d) all of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

8. Which of the following CSS3 property specifies how the contents of a replaced element
should be fitted to the box established by its used height and width?
a) object-fit
b) object-position
c) image-orientation
d) none of the mentioned
View Answer
Answer: a
Explanation: Self-explainatory.

9. Which of the following CSS3 property specifies the alignment of the replaced element
inside its box?
a) object
b) object-allign
c) object-position
d) object-render
View Answer
Answer: c
Explanation: Self-explainatory.

10. Which of the following css property defines whether or not an element should be visible
when not facing the screen?
a) visibility
b) backface-control
c) backface-visibility
d) none of the mentioned
View Answer
Answer: c

CSS Questions & Answers – CSS3 Transitions


for UI Elements
This set of CSS Questions and Answers for Campus interviews focuses on “CSS3
Transitions for UI Elements”.

1. Which of the following selector is used to select and style when you place mouse over it?
a) focus
b) hover
c) mouse
d) all of the mentioned
View Answer
Answer: b
Explanation: Self-explainatory.

2. Which of the following method increases or decreases the size of an element using
tranform?
a) rotate()
b) scale()
c) translate()
d) matrix()
View Answer
Answer: b
Explanation: Self-explainatory.

3. Which of the following method moves an element from its current position using
tranform?
a) rotate()
b) scale()
c) translate()
d) matrix()
View Answer
Answer: c
Explanation: Self-explainatory.
advertisement

4. Which of the following property specifies the speed curve of the transition effect?
a) transition-delay
b) transition-duration
c) transition-timing-function
d) transition
View Answer
Answer: c
Explanation: Self-explainatory.

5. Which of the following method skews an element along the X-axis by the given angle
using tranform?
a) skewX()
b) skewy()
c) x-axis()
d) skew()
View Answer
Answer: a
Explanation: Self-explainatory.

Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate


Now!

6. Which of the following method skews an element along the X and Y-axis by the given
angles using tranform?
a) skewX()
b) skewy()
c) skew-X-Y()
d) skew()
View Answer
Answer: d
Explanation: Self-explainatory.

7. Which of the following transition-timing-function property specifies a transition effect with


a slow start?
a) ease
b) ease-in
c) ease-in-out
d) none of the mentioned
View Answer
Answer: b
Explanation: Self-explainatory.

8. Which of the following transition-timing-function property specifies a transition effect with


a slow start, then fast, then end slowly
a) ease
b) ease-in
c) ease-in-out
d) none of the mentioned
View Answer
Answer: a
Explanation: Self-explainatory.

9. Which of the following transition-timing-function property lets you define your own values
in a cubic-bezier function
a) cubic(n,n,n,n)
b) matrix(n,n,n,n)
c) cubic-bezier(n,n,n,n)
d) none of the mentioned
View Answer
Answer: c
Explanation: Self-explainatory.

10. Which of the following method combines all the 2D transform methods into one using
transform?
a) combine()
b) 2D-tranform()
c) matrix()
d) matrix-2D()
View Answer
Answer: c

CSS Questions & Answers – CSS3 Animations


with SVG and Filters
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS3
Animations with SVG and Filters”.

1. What does SVG stands for?


a) Scaled Vector Graph
b) Scalable Vector Graphics
c) Scaled Vector Graphics
d) None of the mentioned
View Answer
Answer: b
Explanation: Self-explainatory.

2. Which of the following element is used to begin an SVG image?

a) <image>
b) <svg>
c) <img>
d) <graph>
View Answer
Answer: b
Explanation: Self-explainatory.

3. Which of the following element is used to create a SVG rectangle?


a) <rectangle>
b) <polygon>
c) <rect>
d) <square>
View Answer

Answer: c
Explanation: Self-explainatory.

4. Which of the following element is used to create a circle?

advertisement

a) <cir>
b) <round>
c) <circle>
d) <ellipse>
View Answer

Answer: c
Explanation: Self-explainatory.

5. Which of the following element is used to create an SVG ellipse?

Subscribe Now: CSS Newsletter | Important Subjects Newsletters


a) <circle>
b) <ellipse>
c) <curve>
d) none of the mentioned
View Answer

Answer: b
Explanation: Self-explainatory.
6. Which of the following is not an attribute used with SVG ellipse?
a) cx
b) cy
c) rr
d) ry
View Answer
Answer: c
Explanation: Self-explainatory.

7. Which of the following element is used to create a SVG line?

a) <line>
b) <dot>
c) <ray>
d) <stick>
View Answer

Answer: a
Explanation: Self-explainatory.

8. Which of the following is attribute of SVG line?


a) x
b) y
c) x1
d) all of the mentioned
View Answer
Answer: d
Explanation: Self-explainatory.

9. Which of the following element is used to create any shape that consists of only straight
lines?

a) <polyogn>
b) <polyline>
c) <lines>
d) <multiline>
View Answer

Answer: b
Explanation: Self-explainatory.
10. Which of the following defines the color of a line, text or outline of an element?
a) text
b) stroke
c) line
d) all of the mentioned
View Answer
Answer: d

SS Questions & Answers – CSS3 3D


Transforms, Transitions, and Animations
This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS3 3D
Transforms, Transitions, and Animations”.

1. Which of the following css property allows elements to be offset, rotated, scaled, and
skewed in a variety of different ways?
a) transform-3D
b) transform-origin
c) transform
d) transition
View Answer
Answer: c
Explanation:
Syntax: transform: list of transform-functions | none
2. Which of the following css property is used to define a delay before an animation starts?
a) delay
b) transition-delay
c) transform-delay
d) none of the mentioned
View Answer
Answer: b
Explanation:

advertisement

Syntax: transition-delay: time1


3. Which of the following css property is used to define the time it takes one iteration of an
animation to play?
a) control
b) animation-duration
c) transition-duration
d) all of the mentioned
View Answer
Answer: c
Explanation:
Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate
Now!

4. Which of the following css property is used to define which properties a transition will be
applied to?
a) animation-property
b) transition-property
c) css3-property
d) none of the mentioned
View Answer
Answer: b
Explanation:
Syntax: transition-property: all | none | property-name-1
5. Which of the following css property is used to describe how the animation will play?
a) animation-timing-function
b) css3-timing-function
c) transform-timing-function
d) transition-timing-function
View Answer
Answer: d
Explanation:
Syntax:transition-timing-function transition-timing-function:
timingfunction,timingfunction2,...timingfunctionN]
6. Which of the following css property is used to define a delay before an animation starts?
a) transform-delay
b) delay-function
c) delay-animation
d) animation-delay
View Answer
Answer: d
Explanation: None.
Syntax: animation-delay: time1 [,..timeN]
7. Which of the following css property is used to indicate if an animation plays in reverse or
repeats itself every other iteration?
a) animation-iteration
b) animation-check
c) animation-direction
d) animation-state
View Answer
Answer: c
Explanation:
Syntax: animation-direction: normal | alternate [,normal | alternate
8. Which of the following css property is used to define the time it takes one iteration of an
animation to play?
a) animation-duration
b) animation-time
c) animation-value
d) none of the mentioned
View Answer
Answer: a
Explanation:
Syntax: animation-duration: time
9. Which of the following css property is used to define the number of times an animation
should play?
a) scale-iteration-count
b) transtion-iteration-count
c) animation-iteration-count
d) all of the mentioned
View Answer
Answer: c
Explanation:
Syntax: animation-iteration-count: number | infinite
10. Which of the following css property is used to define the animations that should be run?
a) animation-run
b) animation-name
c) transtion-name
d) none of the mentioned
View Answer
Answer: d
Explanation

You might also like