Site icon T4Tutorials.com

CSS Programming MCQs

1. Which CSS property specifies the type of positioning method used for an element?

(A) z-index


(B) top


(C) position


(D) display



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

(A) relative


(B) absolute


(C) static


(D) fixed



3. Which CSS property controls the stack order of elements?

(A) position


(B) z-index


(C) overflow


(D) float



4. Which z-index value brings an element to the top of the stack?

(A) Lower number


(B) 0


(C) auto


(D) Higher number



5. Which CSS property specifies how to handle content that overflows an element’s box?

(A) overflow


(B) clip


(C) hidden


(D) scroll



6. Which overflow value adds scrollbars only when content overflows?

(A) visible


(B) hidden


(C) scroll


(D) auto



7. Which CSS property moves an element to the left or right of its container?

(A) position


(B) float


(C) display


(D) align



8. Which float value removes an element from normal flow and moves it to the right?

(A) left


(B) none


(C) right


(D) inline



9. What is the effect of display: inline-block;?

(A) Makes element absolute


(B) Makes element inline only


(C) Makes element float


(D) Makes element block-level but inline with text



10. Which CSS property aligns inline elements vertically within a line?

(A) text-align


(B) vertical-align


(C) align-items


(D) float



11. Which CSS property aligns flex items along the main axis?

(A) align-items


(B) text-align


(C) justify-content


(D) vertical-align



12. Which combinator selects elements that are direct children of a specified element?

(A) Descendant (space)


(B) Child (>)


(C) Adjacent sibling (+)


(D) General sibling (~)



13. Which combinator selects an element that is immediately preceded by a sibling element?

(A) >


(B) +


(C) ~


(D) (space)



14. Which combinator selects all siblings after a specified element?

(A) >


(B) +


(C) ~


(D) (space)



15. Which CSS position value allows an element to move relative to its normal position?

(A) static


(B) fixed


(C) absolute


(D) relative



16. Which positioning value fixes an element relative to the browser window?

(A) absolute


(B) relative


(C) sticky


(D) fixed



17. Which position value allows an element to stick based on scroll but only within its container?

(A) sticky


(B) fixed


(C) absolute


(D) relative



18. What does overflow: hidden; do?

(A) Displays all content


(B) Adds scrollbars always


(C) Clips content that overflows


(D) Makes content float



19. Which property can reset a floated element to normal flow?

(A) clear


(B) float: none;


(C) display: block;


(D) Both (A) and (B)



20. Which vertical-align value aligns the baseline of an element with the baseline of its parent?

(A) top


(B) middle


(C) baseline


(D) bottom



21. #21: Which pseudo-class targets an element when a user hovers over it?

(A) focus


(B) hover


(C) active


(D) visited



22. Which pseudo-class applies styles to the first child of its parent?

(A) first-child


(B) last-child


(C) nth-child(1)


(D) only-child



23. Which pseudo-class targets elements that are being clicked or activated?

(A) focus


(B) hover


(C) active


(D) checked



24. Which pseudo-class targets a form input that currently has focus?

(A) focus


(B) active


(C) hover


(D) target



25. Which pseudo-class selects all checked checkboxes or radio buttons?

(A) selected


(B) checked


(C) enabled


(D) valid



26. Which pseudo-class applies styles to elements that are the nth child of their parent?

(A) nth-child(n)


(B) nth-of-type(n)


(C) first-child


(D) last-child



27. Which pseudo-class selects elements that are not targeted by another selector?

(A) disabled


(B) empty


(C) root


(D) not()



28. Which pseudo-element is used to insert content before an element’s content?

(A) after


(B) before


(C) first-letter


(D) first-line



29. Which pseudo-element is used to style the first letter of an element?

(A) first-line


(B) first-letter


(C) before


(D) after



30. Which pseudo-element is used to style the first line of a block of text?

(A) first-line


(B) first-letter


(C) before


(D) after



31. Which pseudo-element inserts content after an element’s content?

(A) after


(B) before


(C) first-line


(D) first-letter



32. Which pseudo-class selects only elements that have no children?

(A) first-child


(B) only-child


(C) empty


(D) nth-child



33. Which pseudo-class selects elements that are enabled?

(A) disabled


(B) enabled


(C) checked


(D) read-only



34. Which pseudo-class selects the last child of its parent?

(A) only-child


(B) first-child


(C) nth-child(n)


(D) last-child



35. Which pseudo-element can be used to style the placeholder text inside an input field?

(A) placeholder


(B) before


(C) after


(D) first-letter



36. Which pseudo-class targets links that have already been visited?

(A) hover


(B) visited


(C) link


(D) active



37. Which pseudo-class applies styles to links that have not yet been visited?

(A) hover


(B) visited


(C) link


(D) active



38. Which pseudo-class selects elements that are the only child of their parent?

(A) nth-child


(B) first-child


(C) last-child


(D) only-child



39. Which pseudo-class targets elements that are invalid according to form validation?

(A) valid


(B) invalid


(C) checked


(D) enabled



40. Which pseudo-element can be used to style text selection by the user?

(A) before


(B) after


(C) selection


(D) first-letter



41. Which CSS property is used to set the transparency level of an element?

(A) visibility


(B) opacity


(C) transparent


(D) filter



42. What is the range of values for the CSS opacity property?

(A) 1 to 10


(B) 0 to 1


(C) 0% to 100%


(D) 0 to 100



43. Which CSS property can also be used to adjust opacity using RGBA colors?

(A) background-color


(B) color


(C) border-color


(D) all-color



44. Which CSS property is commonly used to create horizontal navigation links?

(A) display: block;


(B) display: inline;


(C) float: left;


(D) position: relative;



45. How can a dropdown menu be displayed on hover using CSS?

(A) hover pseudo-class


(B) active pseudo-class


(C) focus pseudo-class


(D) checked pseudo-class



46. Which property ensures the dropdown menu is hidden by default?

(A) display: none;


(B) visibility: hidden;


(C) opacity: 0;


(D) All of the above



47. Which CSS layout method is commonly used for image galleries?

(A) flexbox


(B) grid


(C) float


(D) All of the above



48. Which CSS property can be used to create spacing between images in a gallery?

(A) margin


(B) padding


(C) gap


(D) All of the above



49. What is an image sprite?

(A) A single image used for multiple UI elements


(B) Multiple images combined into a slideshow


(C) A type of animated GIF


(D) A background pattern



50. Which CSS property is used to display a specific part of an image sprite?

(A) background-position


(B) background-image


(C) background-repeat


(D) object-position



51. Which CSS property prevents the background image from repeating?

(A) background-size: cover;


(B) background-repeat: no-repeat;


(C) background-position: center;


(D) background-clip: content-box;



52. Which attribute selector targets elements with a specific attribute, regardless of its value?

(A) [attr]


(B) [attr=value]


(C) [attr~=value]


(D) [attr|=value]



53. Which attribute selector targets elements whose attribute value is exactly equal to a specified value?

(A) [attr]


(B) [attr=value]


(C) [attr^=value]


(D) [attr$=value]



54. Which attribute selector targets elements whose attribute value starts with a specified value?

(A) [attr*=value]


(B) [attr$=value]


(C) [attr^=value]


(D) [attr|=value]



55. Which attribute selector targets elements whose attribute value ends with a specified value?

(A) [attr^=value]


(B) [attr$=value]


(C) [attr*=value]


(D) [attr|=value]



56. Which attribute selector targets elements whose attribute value contains a specified substring?

(A) [attr^=value]


(B) [attr$=value]


(C) [attr*=value]


(D) [attr|=value]



57. Which attribute selector targets elements whose attribute value is either exactly equal to a value or starts with a value followed by a hyphen?

(A) [attr|=value]


(B) [attr^=value]


(C) [attr$=value]


(D) [attr*=value]



58. Which CSS property is commonly used to create hover effects in navigation bars?

(A) color


(B) background-color


(C) transform


(D) All of the above



59. In an image gallery using flexbox, which property evenly spaces items along the main axis?

(A) justify-content: space-between;


(B) align-items: center;


(C) flex-wrap: wrap;


(D) gap: 10px;



Exit mobile version