Top 300 Advanced CSS Multiple Choice Questions (MCQs)

Advanced CSS MCQs and Answers

I. WHICH CSS PROPERTY CONTROLS THE TEXT COLOR?

A. color
B. font-color
C. txtcolor
D. textcolor

Answer: A

II. HOW CAN YOU MAKE A BACKGROUND IMAGE FIXED, SO IT DOES NOT SCROLL WITH THE PAGE?

A. background-attachment: scroll
B. background-attachment: fixed
C. background-position: fixed
D. background-fixed: scroll

Answer: B

III. WHICH CSS PROPERTY CONTROLS THE LEFT MARGIN OF AN ELEMENT?

A. padding-left
B. indent-left
C. margin-left
D. space-left

Answer: C

IV. HOW DO YOU DISPLAY AN ELEMENT AS AN INLINE BLOCK?

A. display: block
B. display: inline
C. display: inline-block
D. display: inline:block

Answer: C

V. WHICH CSS PROPERTY SPECIFIES THE STACKING ORDER OF AN ELEMENT?

A. floating-level
B. stack-order
C. z-index
D. stacking-index

Answer: C

VI. HOW CAN YOU ADD A SHADOW AROUND THE OUTSIDE OF A BOX ELEMENT?

A. shadow: outside
B. box-shadow: inset
C. shadow: outer
D. box-shadow: outer

Answer: B

VII. WHAT IS THE CSS PROPERTY USED TO CHANGE THE CURSOR TO A HAND WHEN HOVERING OVER AN ELEMENT?

A. cursor: hand
B. cursor: pointer
C. :hover: hand
D. hover-cursor: hand

Answer: B

VIII. HOW DO YOU SELECT AN ELEMENT WITH A CLASS NAME OF “intro”?

A. .class=”intro”
B. p.intro
C. element intro
D. .intro

Answer: D

IX. HOW DO YOU IMPORT AN EXTERNAL STYLESHEET CALLED STYLES.CSS INTO AN HTML DOCUMENT?

A. <import src=”styles.css”>
B. <link href=”styles.css”>
C. <style src=”styles.css”>
D. <link ref=”styles.css” type=”text/css”>

Answer: B

X. HOW CAN YOU ADD A CUSTOM FONT TO A WEBSITE?

A. Using @font tag
B. Using font-family tag
C. Import fonts.css file
D. Using @import url

Answer: D

Advanced CSS MCQs

XI. WHAT IS THE SYNTAX FOR APPLYING MULTIPLE CLASSES TO AN ELEMENT?

A. <div class="one two">
B. <div class="one" class="two">
C. <div class="one + two">
D. <div class="one, two">

Answer: A

XII. WHICH POSITION VALUE ALLOWS ABSOLUTE POSITIONING INSIDE A RELATIVE PARENT?

A. fixed
B. absolute
C. static
D. inherit

Answer: B

XIII. HOW CAN YOU STYLE EVERY SECOND ROW IN A TABLE?

A. tr:second-child
B. tr:nth-child(2n)
C. tr:nth-of-type(2)
D. tr:even

Answer: B

XIV. HOW DO YOU SELECT ALL P ELEMENTS INSIDE A DIV?

A. div + p
B. div p
C. div > p
D. div.p

Answer: C

XV. HOW CAN YOU STYLE ANCHOR TAGS ON HOVER?

A. a hover
B. a:hover
C. hover over a
D. hover: a

Answer: B

XVI. HOW DO YOU ADD A 50 PIXEL BOTTOM MARGIN TO ALL h2 ELEMENTS?

A. h2 {padding-bottom: 50px}
B. h2 {margin: 50px 0 0 0}
C. h2 {margin-bottom: 50px}
D. h2 {bottom-margin: 50px}

Answer: C

XVII. WHAT IS THE DEFAULT DISPLAY VALUE OF A DIV?

A. inline-block
B. block
C. inline
D. none

Answer: B

XVIII. HOW CAN YOU FONT STYLES FROM MULTIPLE FONTS?

A. font-blend
B. font-style
C. font-family
D. font-mix

Answer: C

XIX. HOW DO YOU IMPORT ONLY PART OF A CSS FILE, NOT THE ENTIRE STYLESHEET?

A. @section import url
B. @media import url
C. @import url fragment
D. @import url part

Answer: C

XX. WHAT IS THE CORRECT SYNTAX FOR APPLYING A CLASS CALLED “box” TO A DIV?

A. <div class=”box”>
B. <div name=”box”>
C. <div box>
D. <div addClass=”box”>

Answer: A

XXI. HOW DO YOU ADD A 1 PIXEL BLACK BORDER AROUND AN IMAGE?

A. img {border: 1px solid #000000;}
B. img {border-width: 1px; border-color: black;}
C. img {border: #000 1px solid;}
D. img {border-style: solid; border-size: 1px; border-color: #000;}

Answer: C

XXII. WHAT IS THE DIFFERENCE BETWEEN CLASS AND ID SELECTORS?

A. Classes can be used multiple times, IDs can only be used once
B. Nothing, they are the same
C. IDs can be used multiple times, Classes can only be used once
D. IDs style elements, Classes group elements

Answer: A

XXIII. HOW DO YOU SELECT ALL DIV CHILD ELEMENTS OF A PARENT DIV WITH CLASS “CONTAINER”?

A. div container > div
B. .container div
C. container > div
D. div > container > div

Answer: B

XXIV. HOW CAN YOU STYLE EVERY n-th ELEMENT USING CSS?

A. :nth(n)
B. *:nth-child(n)
C. nth:child(n)
D. :nth-of-type(n)

Answer: B

XXV. HOW DO YOU SELECT THE FIRST p ELEMENT INSIDE A DIV?

A. div + p:first-child
B. div > p:first-child
C. div p:first-of-type
D. div p:nth-child(1)

Answer: B

XXVI. HOW DO YOU CHANGE THE CURSOR TO A POINTER ON IMAGE HOVER?

A. img:hover { cursor: hand }
B. img:hover { cursor: navigate }
C. img:hover { cursor: alias }
D. img:hover { cursor: pointer }

Answer: D

XXVII. WHAT IS TRUE ABOUT CLASS SELECTORS IN CSS?

A. You can assign multiple classes by separating them with “+”
B. Multiple classes cannot be applied to the same element
C. Classes must be unique within the HTML document
D. Classes can be reused on multiple elements

Answer: D

XXVIII. WHAT IS THE CSS OPACITY PROPERTY USED FOR?

A. Fading elements
B. Setting transparency
C. Animations
D. Shadow effects

Answer: B

XXIX. HOW CAN YOU ATTACH CSS STYLING INFORMATION TO AN ELEMENT?

A. External and internal stylesheet
B. Inline styling and internal stylesheet
C. Inline styling, external and internal stylesheet
D. External stylesheet only

Answer: C

XXX. WHAT DOES THE !IMPORTANT RULE DO?

A. Makes a style declaration the most specific
B. Adds default styling
C. Overrides all previous styling of a property
D. Marks a declaration as invalid

Answer: C

XXXI. WHAT IS THE DIFFERENCE BETWEEN PX AND EM FOR FONT-SIZE?

A. No difference, they are interchangeable
B. PX is relative, EM is absolute
C. EM is relative, PX is absolute
D. PX is newer than EM

Answer: C

XXXII. HOW DO YOU SELECT ALL PARAGRAPHS INSIDE A DIV class=”post”?

A. post > p
B. post + p
C. .post + p
D. .post > p

Answer: D

XXXIII. WHAT IS THE CSS FLEX PROPERTY MAINLY USED FOR?

A. Column layouts
B. Menus and navigation
C. Complex grid layouts
D. Vertical alignment

Answer: C

XXXIV. HOW CAN ELEMENTS BE FIXED TO THE BROWSER WINDOW WHEN SCROLLING?

A. overflow: fixed
B. display: fixed
C. position: static
D. position: fixed

Answer: D

XXXV. WHAT IS THE DIFFERENCE BETWEEN DISPLAY:NONE AND VISIBILITY:HIDDEN?

A. The space is preserved with visibility:hidden
B. There is no difference
C. display:none is invalid CSS
D. The space is preserved with display:none

Answer: A

XXXVI. HOW CAN CSS STYLES BE APPLIED CONDITIONALLY FOR DIFFERENT MEDIA TYPES?

A. Use media selectors
B. Use CSS frameworks
C. Use media queries
D. Use device selectors

Answer: C

XXXVII. HOW DO GRID SYSTEMS IN CSS WORK?

A. By applying floats to elements
B. By using inline-block elements
C. By defining containers, rows, and columns
D. By applying clearfixes

Answer: C

XXXVIII. WHAT IS LESS CSS?

A. A CSS optimizer
B. A CSS validator
C. A CSS preprocessor

D. An alternate to CSS

Answer: C

XXXIX. WHAT IS THE DIFFERENCE BETWEEN DIVS AND SPAN ELEMENTS?

A. Spans can be used to group elements
B. Divs display inline, Spans block
C. No difference
D. Divs are block-level, Spans inline

Answer: D

XL. HOW CAN CSS STYLES BE APPLIED ONLY FOR PRINT?

A. @media print
B. @media only print
C. Use print.css stylesheet
D. <link print>

Answer: A

XLI. WHAT IS THE PROPERTY USED TO CHANGE THE COLOR OF TEXT?

A. text-color
B. txt-color
C. color
D. text-tint

Answer: C

XLII. WHAT IS THE DEFAULT FONT-SIZE IN MOST BROWSERS?

A. 12px
B. 16px
C. 14px
D. 22px

Answer: B

XLIII. WHICH IS THE CORRECT CSS SYNTAX FOR LINK PSEUDO-CLASSES?

A. a.link, a.hover, a.visited
B. a :link, a :hover, a :visited
C. link : a, hover : a, visited : a
D. a > link, a > hover, a > visited

Answer: B

XLIV. WHICH CSS VALUE POSITIONS ELEMENTS RELATIVELY TO ITSELF?

A. relative
B. absolute
C. fixed
D. static

Answer: A

XLV. WHICH CSS PROPERTY CONTROLS THE SPACE BETWEEN TEXT CHARACTERS?

A. word-spacing
B. letter-spacing
C. font-spacing
D. text-spacing

Answer: B

XLVI. HOW CAN YOU USE ONLY THE ELEMENTS OF A CSS LIBRARY LIKE BOOTSTRAP?

A. Use its CDN library
B. Include the CSS/JS
C. Copy the class names
D. Fork its repository

Answer: C

XLVII. WHAT IS THE PURPOSE OF CLEARFIX CLASS IN CSS?

A. Overriding styles
B. Resetting margins
C. Clearing floats
D.Box alignments

Answer: C

XLVIII. WHAT IS CSS INHERITANCE?

A. Combining multiple stylesheets
B. Elements inheriting styles from parents
C. Browser prefix inheritance
D. Importing styles locally

Answer: B

XLIX. HOW ARE MEDIA QUERIES USED?

A. To conditionally apply CSS for devices
B. To optimize CSS loading
C. To scope styles to media elements
D. To import device-based style sheets

Answer: A

L. WHAT IS THE CSS GRID LAYOUT SYSTEM MAINLY USED FOR?

A. Animation frameworks
B. Page columns
C. Overall page layouts
D. Navigation menus

Answer: C

Leave a Reply

Your email address will not be published. Required fields are marked *