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
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.
advertisement

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.
advertisement

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
Explanation: word-break property can be used to allow line breaks within the words.
Syntax:

word-break: break-all | keep-all | normal


Chapterwise Multiple Choice Questions on CSS

CSS MCQ - Multiple Choice Questions and Answers

Our 1000+ MCQs focus on all topics of the CSS subject, covering 100+ topics. This will help you to prepare for exams, contests, online tests, quizzes, viva-voce, interviews, and certifications. You can practice these MCQs chapter by chapter starting from the 1st chapter or you can jump to any chapter of your choice.
  1. CSS Fundamentals, Colors and Styling
  2. CSS Text, Borders and Images
  3. CSS Selectors & Files
  4. CSS Properties, Elements, Functions & Tables
  5. CSS3 Fundamentals, Transitions & Animations
  6. CSS Lists, Tables and Forms
  7. CSS Layout & Images
  8. CGI Programming & Miscellaneous

1. CSS MCQ on Fundamentals, Colors and Styling

The section contains CSS multiple choice questions and answers on css basics, functions, fonts, versions, specification and color values, style inclusion methods, specifying sizes, colors and files.

  • Introduction to CSS
  • CSS Functions
  • CSS Fonts
  • CSS Versions
  • Specification of CSS
  • Style Inclusion Methods
  • CSS Color Values
  • Specifying Sizes, Colors and Files
  • 2. CSS MCQ on Text, Borders and Images

    The section contains CSS questions and answers on borders, text, voice, outlines and box model, media types, border elements, cross browser layout techniques, styling texts, lists and navigation menus, embedding web fonts, gradients, background borders and targeting styles.

  • CSS border
  • CSS Text
  • CSS Voice
  • CSS Outline
  • CSS Media Types
  • CSS Border Elements
  • Cross Browser Layout Techniques
  • CSS Styling Texts
  • Embedding Web Fonts
  • CSS Box Model
  • CSS Backgrounds, Borders and Drop Shadow
  • CSS Styling Lists and Navigation Menus
  • Gradients without Images
  • Targeting Styles with Media Queries
  • 3. CSS Multiple Choice Questions on Selectors & Files

    The section contains CSS MCQs with answers on document styles, specificity and importance, selectors and advanced selectors.

  • Applying Style to a Document
  • Using Advanced Selectors
  • CSS Selectors
  • CSS Specificity and Importance
  • 4. CSS MCQ on Properties, Elements, Functions & Tables

    The section contains CSS multiple choice questions and answers on xhtml fundamentals, css inheritance and miscellaneous property, major themes, strings and keywords, css measurements, css properties, styling tables, generated content, layout floating elements, css keyframes, elements precise positioning, transforms and transitions, inheritance and cascade.

  • CSS and (X)HTML Elements Fundamentals
  • CSS Miscellaneous Property
  • Document Structure and CSS Inheritance
  • CSS Major Themes
  • CSS Strings and Keywords
  • Measurements in CSS
  • Miscellaneous CSS Constructs
  • CSS 1 and CSS 2.1 Properties
  • Implemented CSS3 and Browser-Specific Features
  • CSS Styling Tables
  • Generated Content
  • CSS Floating Elements for Layout
  • CSS Transforms and Transitions
  • CSS Keyframes
  • Precise Positioning of Elements
  • CSS Inheritance and Cascade
  • 5. CSS3 MCQ on Fundamentals, Transitions & Animations

    The section contains CSS3 questions and answers on css3 images, ui elements transitions, css3 animations, css3 user interface properties, fundamentals and multi column layout.

  • CSS3 Transitions for Images
  • CSS3 Transitions for UI Elements
  • CSS3 Animations with SVG and Filters
  • CSS3 Animation with Responsive Web Design
  • CSS3 3D Transforms, Transitions, and Animations
  • CSS3 User Interface Properties
  • CSS3 Fundamentals
  • Using CSS3 Multi Column Layout
  • 6. CSS MCQ on Lists, Tables and Forms

    The section contains CSS MCQs on form elements appearance.

  • Appearance of Form Elements
  • 7. CSS MCQ on Layout & Images

    The section contains CSS MCQ questions with answers on bullet point styles, css image alignment, id & class, image replacement, print styles and their development, server specific css, shadowy styles, multiple backgrounds, css popups and menus, sliding doors, clipped sliding doors, table graphs, 2d transforms and constrained images.

  • Specifying Bullet Point Styles, CSS Image Alignment, ID and Class
  • Suppressing Element Display & Visibility, Image Replacement
  • Print Styles and their Development
  • Server Specific CSS
  • Shadowy Styles, Multiple Backgrounds, CSS Pop-Ups & Menus
  • Sliding Doors & Clipped Sliding Doors
  • Table Graphs, 2D Transforms, Boxing of Images & Constrained Images
  • 8. CSS MCQ on CGI Programming & Miscellaneous

    The section contains CSS questions and answers on css transition and perl cgi programming.

  • CSS Transition & Perl CGI Programming
  • Miscellaneous
  • If you would like to learn "CSS" thoroughly, you should attempt to work on the complete set of 1000+ MCQs - multiple choice questions and answers mentioned above. It will immensely help anyone trying to crack an exam or an interview.

    Wish you the best in your endeavor to learn and master CSS!

    Important Links:

    CSS Books:

    1. “HTML & CSS: Design and Build Web Sites” by Jon Duckett
    2. “Learning CSS3 Animations and Transitions” by Alexis Goldstein
    3. “The CSS3 Anthology” by Rachel Andrew
    4. “CSS: The Missing Manual” by David Sawyer McFarland
    5. “Practical CSS3: Develop and Design” by Chris Mills

    You can buy these CSS Books from “Amazon USA” OR “Amazon India”.

    advertisement
    Manish Bhojasia - Founder & CTO at Sanfoundry
    Manish Bhojasia, a technology veteran with 20+ years @ Cisco & Wipro, is Founder and CTO at Sanfoundry. He lives in Bangalore, and focuses on development of Linux Kernel, SAN Technologies, Advanced C, Data Structures & Alogrithms. Stay connected with him at LinkedIn.

    Subscribe to his free Masterclasses at Youtube & discussions at Telegram SanfoundryClasses.