CSS MCQ

 FROM GOOGLE GEMINI:


CSS (Cascading Style Sheets) Multiple Choice Questions

Q1. What does CSS stand for?

  • A) Computer Style Sheets

  • B) Cascading Style Sheets

  • C) Creative Style Sheets

  • D) Colorful Style Sheets

Answer: B) Cascading Style Sheets

Q2. Which HTML tag is used to define an internal style sheet?

  • A) <script>

  • B) <css>

  • C) <style>

  • D) <design>

Answer: C) <style>

Q3. Which is the correct CSS syntax to change the background color of an element?

  • A) background-color: yellow;

  • B) color: yellow;

  • C) bg-color: yellow;

  • D) background: yellow; (Note: Both A and D are valid, but background-color is the property specifically for background color. In standard strict multiple-choice questions, A is the most precise property name).

Answer: A) background-color: yellow;

Q4. How do you insert a comment in a CSS file?

  • A) // this is a comment

  • B) /* this is a comment */

  • C) <!-- this is a comment -->

  • D) ' this is a comment

Answer: B) /* this is a comment */

Q5. Which CSS property is used to change the text color of an element?

  • A) text-color

  • B) fg-color

  • C) color

  • D) font-color

Answer: C) color

Q6. Which CSS property controls the text size?

  • A) font-style

  • B) text-size

  • C) font-size

  • D) text-style

Answer: C) font-size

Q7. How do you select an element with the id "header"?

  • A) .header

  • B) #header

  • C) *header

  • D) header

Answer: B) #header

Q8. How do you select elements with the class name "box"?

  • A) .box

  • B) #box

  • C) *box

  • D) box

Answer: A) .box

Q9. Which CSS property is used to change the left margin of an element?

  • A) padding-left

  • B) indent

  • C) margin-left

  • D) spacing-left

Answer: C) margin-left

Q10. What is the default value of the position property in CSS?

  • A) relative

  • B) fixed

  • C) absolute

  • D) static

Answer: D) static


SOME MORE EXAMPLES:


Here is a comprehensive list of 100 multiple-choice questions (MCQs) on CSS (Cascading Style Sheets), organized by topic. Each question includes the correct answer and a brief explanation to help you master the concepts.

📋 Section 1: Introduction & Syntax (Questions 1–15)

1. What does CSS stand for?

  • A) Creative Style Sheets

  • B) Computer Style Sheets

  • C) Cascading Style Sheets

  • D) Colorful Style Sheets

Answer: C

Explanation: CSS stands for Cascading Style Sheets. It is used to format the layout of web pages.

2. What is the correct HTML refereeing an external style sheet?

  • A) <style src="mystyle.css">

  • B) <link rel="stylesheet" type="text/css" href="mystyle.css">

  • C) <stylesheet>mystyle.css</stylesheet>

  • D) <link src="mystyle.css">

Answer: B

Explanation: The <link> tag is used inside the <head> section of an HTML document to link an external CSS file using the href attribute.

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

  • A) At the end of the document

  • B) In the <body> section

  • C) In the <head> section

  • D) Inside the <html> tag

Answer: C

Explanation: External stylesheets should always be linked inside the <head> tag so they load before the body content renders.

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

  • A) <script>

  • B) <css>

  • C) <style>

  • D) <link>

Answer: C

Explanation: The <style> tag is used to embed CSS rules directly within an HTML document.

5. Which HTML attribute is used to define inline styles?

  • A) styles

  • B) class

  • C) style

  • D) font

Answer: C

Explanation: The style attribute allows you to apply CSS directly to a single HTML element.

6. Which is the correct CSS syntax?

  • A) body {color: black;}

  • B) {body;color:black;}

  • C) body:color=black;

  • D) body:color:black;

Answer: A

Explanation: The standard CSS syntax consists of a selector followed by a declaration block enclosed in curly braces {} containing property: value; pairs.

7. How do you insert a comment in a CSS file?

  • A) // this is a comment

  • B) ' this is a comment

  • C) /* this is a comment */

  • D) <!-- this is a comment -->

Answer: C

Explanation: CSS comments start with /* and end with */. Single-line // comments are not valid in standard CSS.

8. Which property is used to change the background color?

  • A) color

  • B) background-color

  • C) bgcolor

  • D) background-image

Answer: B

Explanation: background-color sets the background color of an element. color changes the text color.

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

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

  • B) h1 {background-color: #FFFFFF;}

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

  • D) h1 {bg-color: #FFFFFF;}

Answer: B

Explanation: You target all elements of a specific type simply by using their tag name as the selector.

10. Which CSS property is used to change the text color of an element?

  • A) text-color

  • B) color

  • C) fgcolor

  • D) font-color

Answer: B

Explanation: The color property is specifically used to define the foreground color (text color) of an element.

11. Which character is used to separate a property and its value in CSS?

  • A) Comma (,)

  • B) Semi-colon (;)

  • C) Colon (:)

  • D) Period (.)

Answer: C

Explanation: A colon (:) separates a property from its value, while a semi-colon (;) terminates a CSS declaration.

12. Which character terminates a CSS declaration?

  • A) Colon (:)

  • B) Semi-colon (;)

  • C) Period (.)

  • D) Exclamation (!)

Answer: B

Explanation: Each CSS statement must end with a semi-colon (;) to separate it from the next rule.

13. Is CSS case-sensitive?

  • A) Yes

  • B) No

  • C) Only for font names

  • D) Only for color codes

Answer: B

Explanation: CSS is generally case-insensitive, though class names and IDs are case-sensitive because they depend on HTML.

14. What is the extension of a regular CSS file?

  • A) .html

  • B) .js

  • C) .css

  • D) .style

Answer: C

Explanation: External style sheets must be saved with a .css file extension.

15. Which of the following is NOT a valid way to write CSS?

  • A) Inline CSS

  • B) Internal CSS

  • C) External CSS

  • D) Outline CSS

Answer: D

Explanation: The three valid methods to implement CSS are Inline, Internal (Embedded), and External.

🎯 Section 2: Selectors & Specificity (Questions 16–30)

16. How do you select an element with id "demo"?

  • A) .demo

  • B) #demo

  • C) *demo

  • D) demo

Answer: B

Explanation: The # symbol is used to select elements by their id attribute.

17. How do you select elements with class name "test"?

  • A) #test

  • B) *test

  • C) .test

  • D) test

Answer: C

Explanation: The . symbol is used to target elements belonging to a specific class.

18. How do you select all p elements inside a div element?

  • A) div.p

  • B) div p

  • C) div + p

  • D) div > p

Answer: B

Explanation: A space denotes a descendant selector, matching all <p> elements nested anywhere inside a <div>.

19. How do you select all p elements that are the immediate children of a div element?

  • A) div p

  • B) div + p

  • C) div > p

  • D) div ~ p

Answer: C

Explanation: The > combinator selects only direct children, ignoring deeply nested grandchildren.

20. How do you group multiple selectors?

  • A) Separate each selector with a space

  • B) Separate each selector with a comma

  • C) Separate each selector with a plus sign

  • D) Separate each selector with a slash

Answer: B

Explanation: Commas are used to apply the same CSS ruleset to multiple selectors simultaneously.

21. What is the universal selector in CSS?

  • A) #

  • B) .

  • C) *

  • D) @

Answer: C

Explanation: The asterisk (*) matches any and all elements on a page.

22. Which selector matches an element that is currently being hovered over by the mouse?

  • A) :active

  • B) :focus

  • C) :hover

  • D) :visited

Answer: C

Explanation: The :hover pseudo-class applies styles when the user points to an item without clicking it.

23. Which CSS selector has the highest specificity?

  • A) Class selector (.classname)

  • B) ID selector (#idname)

  • C) Element selector (p)

  • D) Universal selector (*)

Answer: B

Explanation: IDs have higher specificity weights than classes, elements, and attributes.

24. What does the selector a[target="_blank"] do?

  • A) Selects all links

  • B) Selects all links with a target attribute

  • C) Selects all links with target="_blank"

  • D) None of the above

Answer: C

Explanation: This is an attribute selector that targets <a> elements whose target attribute perfectly matches _blank.

25. Which pseudo-class represents an element that has focus (like a text input clicked by user)?

  • A) :visited

  • B) :active

  • C) :focus

  • D) :hover

Answer: C

Explanation: The :focus pseudo-class triggers when an element becomes ready to accept input.

26. How do you select the first letter of every <p> element?

  • A) p:first-letter

  • B) p::first-letter

  • C) p:initial-letter

  • D) p.first-letter

Answer: B

Explanation: The ::first-letter pseudo-element targets the first character of the first line of a block container.

27. How do you apply CSS to target every alternate <tr> element (even rows)?

  • A) tr:nth-child(even)

  • B) tr:nth-child(2)

  • C) tr:even

  • D) tr:nth-row(even)

Answer: A

Explanation: The :nth-child(even) selector matches every element that is an even-indexed child of its parent.

28. What does the + combinator mean (e.g., div + p)?

  • A) Selects all <p> inside <div>

  • B) Selects the <p> element placed immediately after a <div>

  • C) Selects every <p> that follows a <div>

  • D) Combines styles of both <div> and <p>

Answer: B

Explanation: The adjacent sibling combinator (+) matches the very next sibling element.

29. What does the ~ combinator mean (e.g., div ~ p)?

  • A) Selects all <p> elements that are general siblings after a <div>

  • B) Selects the direct child <p> of a <div>

  • C) Selects the first <p> inside a <div>

  • D) None of the above

Answer: A

Explanation: The general sibling combinator (~) matches all specified sibling elements following the target element, regardless of how far down they are.

30. Which rule overrides all other style declarations, including inline styles?

  • A) !override

  • B) !important

  • C) !default

  • D) !force

Answer: B

Explanation: Appending !important to a CSS property value breaks standard cascading order to ensure that style takes precedence.

🔤 Section 3: Typography & Fonts (Questions 31–45)

31. Which property is used to change the font of an element?

  • A) font-style

  • B) font-weight

  • C) font-family

  • D) font-variant

Answer: C

Explanation: font-family specifies a prioritized list of font family names for the text.

32. How do you make the text bold?

  • A) font: bold;

  • B) font-weight: bold;

  • C) style: bold;

  • D) text-size: bold;

Answer: B

Explanation: The font-weight property sets how thick or thin characters in text should be displayed.

33. How do you display a borderless text font to italic?

  • A) font-style: italic;

  • B) font: italic;

  • C) text-style: italic;

  • D) font-weight: italic;

Answer: A

Explanation: font-style controls whether text is rendered in normal, italic, or oblique variations.

34. Which property controls the text size?

  • A) text-style

  • B) font-size

  • C) text-size

  • D) font-style

Answer: B

Explanation: font-size handles the scale dimensions of typography.

35. What is the default font size of standard paragraph text in most browsers?

  • A) 12px

  • B) 14px

  • C) 16px

  • D) 18px

Answer: C

Explanation: Most modern web browsers default their body base font size to 16px.

36. Which CSS unit is relative to the font-size of the root element (html)?

  • A) em

  • B) rem

  • C) px

  • D) %

Answer: B

Explanation: rem stands for "Root EM". It scales relative to the root elements' (<html>) sizing values.

37. Which property changes the spacing between text characters?

  • A) line-height

  • B) letter-spacing

  • C) word-spacing

  • D) text-indent

Answer: B

Explanation: letter-spacing increases or decreases the tracking spaces between characters.

38. How do you make each word in a text start with a capital letter?

  • A) text-transform: capitalize;

  • B) text-transform: uppercase;

  • C) text-style: capitalize;

  • D) You cannot do this with CSS

Answer: A

Explanation: text-transform: capitalize; automatically converts the first letter of every single word into uppercase format.

39. How do you remove the underline from all hyperlinks?

  • A) a {text-decoration: no-underline;}

  • B) a {underline: none;}

  • C) a {text-decoration: none;}

  • D) a {decorations: none;}

Answer: C

Explanation: Hyperlinks natively carry an underline decoration. Setting text-decoration: none; successfully strips it away.

40. Which property controls the vertical spacing between lines of text?

  • A) letter-spacing

  • B) word-spacing

  • C) line-height

  • D) vertical-align

Answer: C

Explanation: line-height modifies the height of bounding text lines (often called leading).

41. How do you align text to the center of a container?

  • A) text-align: center;

  • B) align: center;

  • C) text-align: middle;

  • D) float: center;

Answer: A

Explanation: text-align handles inline horizontal text alignments with options like left, right, center, or justify.

42. Which property is used to add a shadow effect to text characters?

  • A) box-shadow

  • B) text-shadow

  • C) font-shadow

  • D) element-shadow

Answer: B

Explanation: text-shadow accepts values for horizontal offset, vertical offset, blur radius, and color to offset typography shadows.

43. What value of text-transform converts all text to lowercase?

  • A) text-transform: smallcase;

  • B) text-transform: lower;

  • C) text-transform: lowercase;

  • D) text-decoration: lowercase;

Answer: C

Explanation: text-transform: lowercase; forces all targeted textual alphabetic strings into lowercase letters.

44. What does font-variant: small-caps; do?

  • A) Makes the font size smaller

  • B) Converts all lowercase letters into scaled-down uppercase capital letters

  • C) bolds only capitals

  • D) Uses alternative lowercase fonts

Answer: B

Explanation: The small-caps value forces all lowercase text elements to render as small variations of capital letters.

45. Which of the following is a generic font-family fallback value?

  • A) Times New Roman

  • B) Arial

  • C) sans-serif

  • D) Helvetica

Answer: C

Explanation: sans-serif, serif, monospace, cursive, and fantasy are fallback generic font families native to CSS specifications.

📦 Section 4: The Box Model & Layouts (Questions 46–65)

46. What components make up the standard CSS Box Model?

  • A) Content, Margin, Links

  • B) Content, Padding, Border, Margin

  • C) Width, Height, Border, Scale

  • D) Padding, Flex, Grid, Gaps

Answer: B

Explanation: The box model consists layered from inside out: Content -> Padding -> Border -> Margin.

47. When using the standard box model, what is the calculated width of an element?

  • A) Only the value of the width property

  • B) Width + Padding

  • C) Width + Padding + Border

  • D) Width + Padding + Border + Margin

Answer: C

Explanation: In the default box model layout model, an element's visible physical rendering size is width + total padding + total border size.

48. Which CSS property changes the box model calculation to include padding and borders inside the specified width?

  • A) box-sizing: content-box;

  • B) box-sizing: border-box;

  • C) size-model: inclusive;

  • D) layout-sizing: shrink;

Answer: B

Explanation: box-sizing: border-box; instructs the browser to incorporate paddings and borders inside the primary designated object width and height boundaries.

49. How do you set a margin space on top of an element?

  • A) padding-top

  • B) margin-top

  • C) top-margin

  • D) margin: top;

Answer: B

Explanation: margin-top sets structural layout spacing outside the element borders on the upper perimeter side.

50. What is the shorthand order for padding and margins (e.g., margin: 10px 20px 30px 40px;)?

  • A) Top, Left, Bottom, Right

  • B) Top, Right, Bottom, Left

  • C) Bottom, Right, Top, Left

  • D) Left, Right, Top, Bottom

Answer: B

Explanation: Multi-value direction shorthands evaluate clockwise: Top, Right, Bottom, Left (TRBL).

51. How do you center a block element horizontally within its parent container using margins?

  • A) margin: center;

  • B) margin: 0 auto;

  • C) margin: auto 0;

  • D) horizontal-align: center;

Answer: B

Explanation: Specifying auto for the left and right margins instructs the browser to split the remaining available block container width evenly.

52. Which property hides an element but keeps its space reserved in the page layout?

  • A) display: none;

  • B) visibility: hidden;

  • C) opacity: 0;

  • D) Both B and C

Answer: D

Explanation: visibility: hidden and opacity: 0 mask the element visually without extracting its layout space from the DOM sequence, unlike display: none;.

53. Which property completely removes an element from the page layout flow?

  • A) display: none;

  • B) visibility: hidden;

  • C) hidden: true;

  • D) clear: both;

Answer: A

Explanation: display: none; completely removes the element from the layout flow as if it didn't exist.

54. What is the default position value for HTML elements?

  • A) absolute

  • B) relative

  • C) static

  • D) fixed

Answer: C

Explanation: The default position value is static. It follows the normal top-to-bottom document flow.

55. An element with position: absolute; positions itself relative to:

  • A) The viewport window

  • B) Its nearest positioned ancestor (non-static)

  • C) Its direct parent element regardless of position

  • D) The body element only

Answer: B

Explanation: absolute placement targets coordinates against the nearest containing ancestor element possessing a positioning status other than static.

56. Which position value keeps an element anchored in place relative to the browser viewport even during scrolling?

  • A) relative

  • B) absolute

  • C) fixed

  • D) sticky

Answer: C

Explanation: fixed locks elements rigidly into reference positions mapped against the view screen frames.

57. What property controls the stacking order of overlapping positioned elements?

  • A) layer-index

  • B) z-index

  • C) stack-order

  • D) order

Answer: B

Explanation: z-index takes numeric integers determining layering depth orders along the virtual Z-axis.

58. How do you add a solid black border line around an element?

  • A) border: 1px solid black;

  • B) border-style: solid 1px black;

  • C) border: black solid 1px;

  • D) All of the above are valid due to loose shorthand parsing

Answer: A

Explanation: The standard border shorthand syntax structure is width style color;. However, the order of these values does not strictly matter.

59. How do you make border corners rounded?

  • A) border-round

  • B) corner-radius

  • C) border-radius

  • D) box-radius

Answer: C

Explanation: border-radius curves the outer structural edges of element background boxes.

60. What is the purpose of the clear property?

  • A) Clears out element content data

  • B) Specifies which sides of an element floating elements are not allowed to float

  • C) Resets margins and padding fields back to zero

  • D) Clears validation caching errors

Answer: B

Explanation: The clear property enforces whether an element must move below floating elements that precede it.

61. Which property sets an element's structural display layout to Flexbox?

  • A) flex: true;

  • B) display: flexbox;

  • C) display: flex;

  • D) layout: flex;

Answer: C

Explanation: display: flex; activates standard flexible box formatting layout structures across immediate child elements.

62. In Flexbox, which property aligns items along the main axis (horizontally by default)?

  • A) align-items

  • B) justify-content

  • C) align-content

  • D) flex-direction

Answer: B

Explanation: justify-content aligns items along the main axis, while align-items manages alignment along the cross axis.

63. How do you change the main axis direction in a flex container to vertical?

  • A) flex-direction: vertical;

  • B) flex-direction: column;

  • C) flex-axis: vertical;

  • D) justify-content: column;

Answer: B

Explanation: flex-direction: column; rotates the primary axis flow from rows to vertical columns.

64. What CSS Grid property is used to define column dimensions?

  • A) grid-columns

  • B) grid-template-columns

  • C) grid-template-rows

  • D) grid-layout-columns

Answer: B

Explanation: grid-template-columns explicitly structures the structural column line spacing layout of grid containers.

65. What unit is unique to CSS Grid and represents a fraction of the available space?

  • A) fr

  • B) gr

  • C) flex

  • D) rem

Answer: A

Explanation: The fr unit stands for "fraction", dynamically splitting available structural track partitions within Grid designs.

🎨 Section 5: Colors, Backgrounds, & Advanced (Questions 66–85)

66. Which of the following is NOT a valid color value notation format in CSS?

  • A) color: rgb(255, 0, 0);

  • B) color: #FF0000;

  • C) color: red;

  • D) color: color-name(red);

Answer: D

Explanation: Color keywords are used directly (e.g., red), without wrapping them in a functional notation like color-name().

67. What does the 'A' stand for in RGBA and HSLA color formats?

  • A) Alternate

  • B) Alpha

  • C) Array

  • D) Accumulator

Answer: B

Explanation: The Alpha channel represents opacity values ranging decimal points between 0.0 (fully transparent) up to 1.0 (fully opaque).

68. How do you make a background image repeat only vertically?

  • A) background-repeat: repeat-x;

  • B) background-repeat: repeat-y;

  • C) background-repeat: vertical;

  • D) background-attachment: scroll;

Answer: B

Explanation: The value repeat-y repeats the background image along the Y-axis (vertically).

69. Which property fixes a background image so that it doesn't scroll with the rest of the page?

  • A) background-repeat: fixed;

  • B) background-attachment: fixed;

  • C) background-position: center;

  • D) background-scroll: none;

Answer: B

Explanation: Setting background-attachment: fixed; keeps the background image stationary relative to the viewport.

70. How do you add a shadow effect outside an entire structural element box?

  • A) text-shadow

  • B) border-shadow

  • C) box-shadow

  • D) element-shadow

Answer: C

Explanation: box-shadow applies drop shadow effects around element frames.

71. What CSS property applies filter effects like blur or grayscale to an element's rendering output?

  • A) blur

  • B) filter

  • C) transform

  • D) transition

Answer: B

Explanation: The filter property gives graphical access to structural image processing parameters like blur(), grayscale(), or sepia().

72. Which CSS property is used to smoothly animate changes in CSS properties over time?

  • A) animation

  • B) transform

  • C) transition

  • D) change-speed

Answer: C

Explanation: transition controls simple property interpolation speed shifts over a given duration.

73. What rule is used to define keyframe states for complex multi-stage CSS animations?

  • A) @keyframes

  • B) @animate

  • C) @steps

  • D) @motion

Answer: A

Explanation: The @keyframes at-rule establishes keyframe checkpoints detailing changes across custom runtime tracks.

74. Which property allows you to rotate, scale, skew, or translate an element?

  • A) transition

  • B) transform

  • C) animation

  • D) skew-mode

Answer: B

Explanation: transform applies 2D or 3D structural modifications to targeted visual items.

75. How do you scale an element to twice its original size using transforms?

  • A) transform: double();

  • B) transform: scale(2);

  • C) transform: size(200%);

  • D) scale: 2x;

Answer: B

Explanation: The scale() function increases or decreases element dimensions relative to its original size.

76. What feature is used to query device properties to apply responsive CSS code styles?

  • A) @media rules

  • B) @responsive queries

  • C) @device filters

  • D) Flexbox rules

Answer: A

Explanation: @media queries target different screens, screen aspect properties, or resolutions to implement responsive layouts.

77. Which CSS media descriptor targets standard mobile phone screens using viewport layout constraints?

  • A) max-width

  • B) device-mode

  • C) mobile-only

  • D) screen-ratio

Answer: A

Explanation: Setting standard breakpoints via max-width or min-width targets device sizes (e.g., @media (max-width: 600px)).

78. Which property changes mouse cursor styles when passing above an element?

  • A) mouse-style

  • B) pointer-mode

  • C) cursor

  • D) hover-icon

Answer: C

Explanation: The cursor property allows customization of mouse icons, such as transforming it into a pointing hand using cursor: pointer;.

79. How do you declare a custom property (CSS Variable)?

  • A) var-my-color: #000;

  • B) --my-color: #000;

  • C) $my-color: #000;

  • D) @my-color: #000;

Answer: B

Explanation: Native CSS custom variable identifiers must always be prefixed with two dashes (--).

80. How do you consume a declared CSS variable value?

  • A) color: get(--my-color);

  • B) color: var(--my-color);

  • C) color: --my-color;

  • D) color: $my-color;

Answer: B

Explanation: You extract custom variable property values by invoking the var() functional expression wrapper.

81. Which property controls how content behaves when it overflows its container?

  • A) overflow

  • B) break-out

  • C) contain

  • D) display

Answer: A

Explanation: overflow defines whether clipping occurs, or scrollbars appear, when element contents exceed their containers' dimensions.

82. Which value of the overflow property clips content and hides the remaining overflow text?

  • A) scroll

  • B) visible

  • C) hidden

  • D) auto

Answer: C

Explanation: overflow: hidden; cuts off excess protruding content without providing tracking scrolling pathways.

83. What function allows simple mathematical calculations to be performed inside a CSS value field?

  • A) math()

  • B) calc()

  • C) compute()

  • D) sum()

Answer: B

Explanation: The calc() function allows dynamic property values calculations to mix variable measurement units (e.g., calc(100% - 20px)).

84. Which CSS property changes the layout order of structural items inside a flex container?

  • A) z-index

  • B) flex-index

  • C) order

  • D) tabindex

Answer: C

Explanation: The order property controls the visual arrangement sequence of flex items within a flex container.

85. What property forces text lines to clip and append ellipses (...) when combined with overflow constraints?

  • A) text-overflow: ellipsis;

  • B) text-cut: dots;

  • C) word-break: clip;

  • D) font-variant: dots;

Answer: A

Explanation: text-overflow: ellipsis; signals truncation paths by injecting trailing ellipsis points.

⚡ Section 6: Architecture, Standards, & Advanced Layouts (Questions 86–100)

86. What organization manages the formal standardization of CSS specifications?

  • A) Google

  • B) Microsoft

  • C) W3C (World Wide Web Consortium)

  • D) WHATWG

Answer: C

Explanation: The W3C develops specifications and guidelines for web languages like HTML and CSS.

87. What does the "Cascading" in CSS refer to?

  • A) The way animations loop

  • B) The method used to determine which style rules apply when multiple rules compete

  • C) JavaScript execution pipelines

  • D) The linear code execution order

Answer: B

Explanation: Cascading defines the deterministic system browsers use to resolve stylistic conflicts based on specificity, origin, and order.

88. Which selector matches any checkbox element that is currently checked?

  • A) input:selected

  • B) input:checked

  • C) input[checked=true]

  • D) input::checked

Answer: B

Explanation: The :checked pseudo-class matches toggle checkboxes or radio options currently marked active.

89. Which property sets whether an element behaves as a block or inline box model object?

  • A) layout

  • B) display

  • C) box-type

  • D) visibility

Answer: B

Explanation: display determines the rendering box behaviors (block, inline, inline-block, etc.).

90. What is a key characteristic of an inline element?

  • A) It starts on a new line and takes up full width

  • B) It respects specified width and height settings

  • C) It sits on the same line and its width is defined only by its content

  • D) It cannot contain text

Answer: C

Explanation: Inline elements do not start on new lines and ignore top/bottom manual width/height assignments.

91. What is the difference between inline-block and inline?

  • A) inline-block forces line breaks

  • B) inline-block allows manual width and height settings to be respected

  • C) There is no difference

  • D) inline-block cannot use margins

Answer: B

Explanation: inline-block elements flow inline on the same text line, but retain the ability to use box model width, height, and padding parameters.

92. Which CSS property isolates structural blend modes for element overlays?

  • A) mix-blend-mode

  • B) background-blend

  • C) color-blend

  • D) opacity

Answer: A

Explanation: mix-blend-mode specifies how an element's content blends with the content of the parent element behind it.

93. What selector targets the root element of the document (typically HTML)?

  • A) :root

  • B) *

  • C) #root

  • D) html:all

Answer: A

Explanation: The :root pseudo-class represents the highest-level configuration node in a document tree.

94. What attribute selector targets values starting with a specific prefix string (e.g., href starting with https)?

  • A) a[href^="https"]

  • B) a[href$="https"]

  • C) a[href*="https"]

  • D) a[href~="https"]

Answer: A

Explanation: The prefix operator ^= matches attribute strings starting exactly with the specified text snippet.

95. What attribute selector matches values ending with a specific string?

  • A) ^=

  • B) *=

  • C) $=

  • D) ~=

Answer: C

Explanation: The suffix operator $= matches attribute strings ending exactly with the specified text snippet.

96. What does pointer-events: none; do?

  • A) Changes the mouse pointer to a circle

  • B) Prevents the element from responding to mouse clicks or hover states

  • C) Disables JavaScript execution entirely

  • D) Prevents text selection actions

Answer: B

Explanation: pointer-events: none; makes the element "click-through," meaning it ignores all pointer interactions and passes them to elements underneath.

97. Which property handles column distribution gaps inside CSS Grid or Flexbox layouts?

  • A) grid-gap

  • B) gap

  • C) spacing

  • D) margin-gap

Answer: B

Explanation: The modern gap shorthand property establishes empty gutter spacings between tracking flex items or grid structural partitions.

98. Which pseudo-class selects elements that have no child nodes or text strings inside them?

  • A) :null

  • B) :blank

  • C) :empty

  • D) :void

Answer: C

Explanation: The :empty selector targets elements that contain no children, not even whitespace text nodes.

99. Which property forces text lines to break mid-word if necessary to prevent layout container clipping?

  • A) word-break: break-word;

  • B) text-align: adjust;

  • C) overflow: force;

  • D) white-space: wrap;

Answer: A

Explanation: word-break: break-all; or break-word overrides text processing to insert arbitrary wrap splits when long continuous words threaten container boundaries.

100. How do you import another external CSS file from within an existing CSS style sheet?

  • A) @import url("styles.css");

  • B) #include "styles.css";

  • C) link("styles.css");

  • D) @require "styles.css";

Answer: A

Explanation: The @import at-rule allows developers to modularly ingest secondary stylesheet documents directly within active CSS files.

No comments:

Post a Comment

Subscribe to: Posts (Atom)