--- title: "CSS Fundamentals: Selectors, Box Model & Styling" lang: "en" author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/post/css-fundamentals-quiz --- [Home](/)›[Quizzes](/quizzes)›[All Categories](/quizzes/categories)›[CSS](/quizzes/categories/css) Quizzes [Next in CSSResponsive Web Design: Mobile-First & Breakpoints](/quizzes/post/responsive-design-quiz) [CSS](/quizzes/categories/css)[Frontend](/quizzes/categories/frontend)[Quizzes](/quizzes/categories/quizzes) # CSS Fundamentals: Selectors, Box Model & Styling [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)20 QuestionsBeginnerPublished: 27 Feb 2026 [Markdown for AI(opens in a new tab)](/post/css-fundamentals-quiz/index.md "Open the plain-Markdown version of this page, for pasting into an AI tool") Series [Frontend Essentials](/series/frontend-essentials)3/4 [PreviousTypeScript: Typed JavaScript Fundamentals](/quizzes/post/typescript-fundamentals-quiz)[NextHTML Semantics & Web Accessibility](/quizzes/post/html-semantics-accessibility-quiz) All posts in this series (4) Quizzes4 1. [JavaScript: Language Fundamentals & Modern Features](/quizzes/post/javascript-fundamentals-quiz) 2. [TypeScript: Typed JavaScript Fundamentals](/quizzes/post/typescript-fundamentals-quiz) 3. [CSS Fundamentals: Selectors, Box Model & StylingYou are here](/quizzes/post/css-fundamentals-quiz) 4. [HTML Semantics & Web Accessibility](/quizzes/post/html-semantics-accessibility-quiz) ## CSS Fundamentals: Selectors, Box Model & Styling Up to 20 questions, shuffled on every run Quiz Configuration Enterto start Welcome to the CSS Fundamentals quiz! This quiz will test your knowledge of CSS basics, including selectors, the box model, properties, and layout techniques. Each question reinforces one concept so you build a solid foundation in CSS. Good luck! Answer key and explanations20 questions The quiz above draws 20 questions at random from these 30, so a second attempt will not be the same run. Everything in the pool is listed here. 1. What does CSS stand for? AnswerCascading Style Sheets 2. What is the purpose of the CSS box model? AnswerTo calculate the space taken by margin, border, padding, and content 3. What is a CSS selector? AnswerA pattern used to identify the HTML elements that styles apply to 4. What is the functional difference between margin and padding? AnswerPadding creates space inside the border; margin creates space outside 5. In the CSS box model, what is the "content" area? AnswerThe innermost area where the actual text or images are displayed 6. What is a class selector in CSS, and how is it written? AnswerA selector starting with a dot (.) targeting a class attribute 7. What is an ID selector in CSS, and how is it written? AnswerA selector starting with a hash (#) targeting a unique element 8. What does "specificity" mean in CSS? AnswerA weight system that determines which CSS rule takes precedence 9. What is the universal selector in CSS? AnswerThe asterisk (\*) symbol used to apply styles to every element 10. What is the color property used for in CSS? AnswerTo set the foreground color (text color) of an element 11. What is the background-color property in CSS? AnswerA property that sets the color behind the content of an element 12. What is the font-size property used for in CSS? AnswerTo determine the height and scale of text within an element 13. What are common units used in CSS? Answerpx (pixels), em (font-relative), rem (root-relative), and % 14. What is the display property in CSS? AnswerA property that defines how an element is rendered in the layout 15. What does display: block do? AnswerForces an element to take the full width and start on a new line 16. What does display: inline do? AnswerAllows an element to flow with text without creating a new line 17. What does display: inline-block do? AnswerAllows elements to sit side-by-side while respecting width and height 18. What is the purpose of the padding property in CSS? AnswerTo create space between the element content and its border 19. What is the border property used for in CSS? AnswerTo add a decorative or structural line around an element 20. What is the text-align property used for? AnswerTo control the horizontal alignment of text within a block 21. What does the float property do in CSS? AnswerPushes an element to one side and allows text to wrap around it 22. What is a pseudo-class in CSS? AnswerA keyword added to a selector that specifies a special state 23. What is a pseudo-element in CSS? AnswerA keyword used to style specific parts of an element, like ::before 24. What is the difference between position: static and relative? AnswerStatic is the default; relative allows offsets without breaking flow 25. What does position: absolute do? AnswerPositions an element relative to its nearest positioned ancestor 26. What does z-index do in CSS? AnswerDetermines the stack level of elements along the vertical Z-axis 27. What is flexbox in CSS? AnswerA layout model designed for distributing space among items 28. What does justify-content do in flexbox? AnswerAligns items along the main axis (usually horizontally) 29. What does align-items do in flexbox? AnswerAligns items along the cross axis (usually vertically) 30. What is the difference between CSS reset and CSS normalize? AnswerReset clears all defaults; normalize makes them consistent ## Tags [#Css](/quizzes/tags/css)[#Css fundamentals](/quizzes/tags/css-fundamentals)[#Selectors](/quizzes/tags/selectors)[#Box model](/quizzes/tags/box-model)[#Styling](/quizzes/tags/styling)[#Frontend](/quizzes/tags/frontend)[#Responsive design](/quizzes/tags/responsive-design)[#Typography](/quizzes/tags/typography)[#Flexbox](/quizzes/tags/flexbox)[#Layout](/quizzes/tags/layout)[#Web design](/quizzes/tags/web-design)[#Css properties](/quizzes/tags/css-properties)[#Cross browser compatibility](/quizzes/tags/cross-browser-compatibility)[#Css best practices](/quizzes/tags/css-best-practices) ## Share [Facebook](https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz "Share on Facebook")[Twitter](https://twitter.com/intent/tweet/?text=CSS%20Fundamentals%3A%20Selectors%2C%20Box%20Model%20%26%20Styling&url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz "Share on Twitter")[LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz&title=CSS%20Fundamentals%3A%20Selectors%2C%20Box%20Model%20%26%20Styling&summary=Master%20CSS%20fundamentals%3A%20selectors%2C%20box%20model%2C%20properties%2C%20layout%20basics%2C%20and%20styling%20techniques.%20Build%20the%20foundation%20for%20web%20design%20and%20responsive%20layouts.&source=https://mkabumattar.com "Share on LinkedIn")[WhatsApp](https://wa.me/?text=CSS%20Fundamentals%3A%20Selectors%2C%20Box%20Model%20%26%20Styling%20https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz "Share on WhatsApp")[Telegram](https://t.me/share/url?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz&text=CSS%20Fundamentals%3A%20Selectors%2C%20Box%20Model%20%26%20Styling "Share on Telegram")[Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz&title=CSS%20Fundamentals%3A%20Selectors%2C%20Box%20Model%20%26%20Styling "Share on Reddit")[Hacker News](http://news.ycombinator.com/submitlink?u=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz&t=CSS%20Fundamentals%3A%20Selectors%2C%20Box%20Model%20%26%20Styling "Share on Hacker News")[Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fcss-fundamentals-quiz&media=&description=Master%20CSS%20fundamentals%3A%20selectors%2C%20box%20model%2C%20properties%2C%20layout%20basics%2C%20and%20styling%20techniques.%20Build%20the%20foundation%20for%20web%20design%20and%20responsive%20layouts. "Share on Pinterest")[Email]() ## Comments Was this useful? ## You might also enjoy More posts on similar topics [![HTML Semantics & Web Accessibility](/_astro/hero.DeLGVsAp_ZP225h.webp)](/quizzes/post/html-semantics-accessibility-quiz) ## [HTML Semantics & Web Accessibility](/quizzes/post/html-semantics-accessibility-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [HTML](/quizzes/categories/html) - [Accessibility](/quizzes/categories/accessibility) - [Quizzes](/quizzes/categories/quizzes) Welcome to the HTML Semantics & Accessibility Quiz! This quiz will test your knowledge of semantic HTML elements and web accessibility best practices. Each question has a hint to help you out, and you [#Html](/quizzes/tags/html)[#Html semantics](/quizzes/tags/html-semantics)[#Accessibility](/quizzes/tags/accessibility)+11 tags [read more](/quizzes/post/html-semantics-accessibility-quiz) [![JavaScript: Language Fundamentals & Modern Features](/_astro/hero.CPnUQqYa_cqDLj.webp)](/quizzes/post/javascript-fundamentals-quiz) ## [JavaScript: Language Fundamentals & Modern Features](/quizzes/post/javascript-fundamentals-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [JavaScript](/quizzes/categories/javascript) - [Programming](/quizzes/categories/programming) - [Web Development](/quizzes/categories/web-development) - [Frontend](/quizzes/categories/frontend) Welcome to the JavaScript Basics Quiz! This quiz tests your understanding of fundamental JavaScript concepts, syntax, and modern programming best practices. Each question is multiple-choice, and you'l [#JavaScript](/quizzes/tags/javascript)[#ES6](/quizzes/tags/es6)[#Arrow Functions](/quizzes/tags/arrow-functions)+6 tags [read more](/quizzes/post/javascript-fundamentals-quiz) [![TypeScript: Typed JavaScript Fundamentals](/_astro/hero.BXknL-oV_plxRs.webp)](/quizzes/post/typescript-fundamentals-quiz) ## [TypeScript: Typed JavaScript Fundamentals](/quizzes/post/typescript-fundamentals-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [TypeScript](/quizzes/categories/typescript) - [Programming](/quizzes/categories/programming) - [Web Development](/quizzes/categories/web-development) - [Frontend](/quizzes/categories/frontend) Welcome to the TypeScript Basics Quiz! This quiz covers fundamental TypeScript concepts, static typing, and type-safe programming best practices. Each question is multiple-choice, and you'll find hint [#TypeScript](/quizzes/tags/typescript)[#Static Typing](/quizzes/tags/static-typing)[#Interfaces](/quizzes/tags/interfaces)+6 tags [read more](/quizzes/post/typescript-fundamentals-quiz) [![Responsive Web Design: Mobile-First & Breakpoints](/_astro/hero.Dy4gx6ye_Z2uxxRs.webp)](/quizzes/post/responsive-design-quiz) ## [Responsive Web Design: Mobile-First & Breakpoints](/quizzes/post/responsive-design-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Web Design](/quizzes/categories/web-design) - [CSS](/quizzes/categories/css) - [Frontend](/quizzes/categories/frontend) Welcome to the Responsive Design Quiz! Most traffic now arrives on a phone, so a layout has to hold up on any screen size. This quiz will test your knowledge of responsive design principles, including [#Responsive Design](/quizzes/tags/responsive-design)[#Mobile First](/quizzes/tags/mobile-first)[#Media Queries](/quizzes/tags/media-queries)+2 tags [read more](/quizzes/post/responsive-design-quiz) [![GraphQL Fundamentals: Queries, Mutations & Schema Design](/_astro/hero.D7HMB0_s_1Ij4Vw.webp)](/quizzes/post/graphql-fundamentals-quiz) ## [GraphQL Fundamentals: Queries, Mutations & Schema Design](/quizzes/post/graphql-fundamentals-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [GraphQL](/quizzes/categories/graphql) - [API Development](/quizzes/categories/api-development) - [Quizzes](/quizzes/categories/quizzes) Welcome to the GraphQL Basics Quiz! Learning GraphQL well matters for building efficient, flexible APIs that let clients request exactly what they need. This quiz will test your understanding of core [#Graphql](/quizzes/tags/graphql)[#Graphql fundamentals](/quizzes/tags/graphql-fundamentals)[#Api development](/quizzes/tags/api-development)+11 tags [read more](/quizzes/post/graphql-fundamentals-quiz) [![React Fundamentals: Components, Hooks & State Management](/_astro/hero.x4gPhQ21_Z2if49G.webp)](/quizzes/post/react-fundamentals-quiz) ## [React Fundamentals: Components, Hooks & State Management](/quizzes/post/react-fundamentals-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Frontend](/quizzes/categories/frontend) - [React](/quizzes/categories/react) - [JavaScript](/quizzes/categories/javascript) Welcome to the React Fundamentals Quiz! This quiz will test your knowledge of core React concepts, including components, JSX, hooks, state management, props, and event handling. Whether you're new to [#React](/quizzes/tags/react)[#Components](/quizzes/tags/components)[#Hooks](/quizzes/tags/hooks)+2 tags [read more](/quizzes/post/react-fundamentals-quiz) 6 related posts