Unlock hundreds more features
Save your Quiz to the Dashboard
View and Export Results
Use AI to Create Quizzes and Analyse Results

OR
Sign inSign in with Facebook
Sign inSign in with Google
Quizzes > Quizzes for Business > Technology

CSS Fundamentals Knowledge Test Quiz

Test Your CSS Basics and Skills

Difficulty: Moderate
Questions: 20
Learning OutcomesStudy Material
Colorful paper art displaying questions for a CSS Fundamentals Knowledge Test quiz.

This CSS fundamentals quiz offers a concise set of practice questions designed for web developers at any level. Participants will discover how style rules, selectors, and the box model shape modern layouts. Ideal for students and educators seeking to reinforce CSS knowledge alongside other tests like IT Fundamentals Knowledge Test or C# Fundamentals Quiz. Each question is fully editable - customise it instantly in our quizzes editor. Test your CSS skills today and gain confidence in style sheet mastery.

Which CSS selector targets all HTML elements with the class "button"?
button
*button
.button
#button
The dot prefix in CSS denotes a class selector and ".button" will match any element with class="button". An ID selector uses "#", an element selector uses the tag name, and "*button" is not valid.
Which CSS property controls the space outside an element's border?
padding
margin
border
width
The margin property adds space outside of an element's border, separating it from other elements. Padding controls space inside the border, border adds the border itself, and width sets the content box width.
Which CSS property is used to set the font family for text?
font-style
font-weight
font-size
font-family
The font-family property specifies the typeface or list of typefaces for text. font-size controls text size, font-weight adjusts thickness, and font-style handles italic or oblique styling.
Which CSS declaration makes an element a flex container?
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
Setting display: flex on an element designates it as a flex container, enabling flex layout for its direct children. Other properties like flex-direction or align-items only work once display is set to flex.
Which media query applies styles only when the viewport width is 600px or less?
@media screen and (width <= 600px) { ... }
@media (max-width: 600px) { ... }
@media (min-width: 600px) { ... }
@media only screen (max-height: 600px) { ... }
The max-width media feature applies styles when the viewport width is less than or equal to the specified value. min-width applies when it is greater, and other syntaxes shown are invalid for width conditions.
Which type of selector has higher specificity in CSS?
Universal selectors (*)
Element selectors
ID selectors
CLASS selectors
ID selectors have greater specificity than class, element, or universal selectors. IDs count as 0-1-0-0 in specificity calculations, whereas classes are 0-0-1-0 and elements are 0-0-0-1.
What does the adjacent sibling selector "h2 + p" match?
Each p element immediately following an h2
Each direct child p of an h2
Each p element inside an h2
Each h2 followed anywhere by a p
The adjacent sibling selector (+) targets an element that immediately follows another. So "h2 + p" matches any p element directly after an h2 at the same DOM level.
Which box-sizing value makes the width property include padding and border?
padding-box
content-box
margin-box
border-box
With box-sizing: border-box, the declared width includes content, padding, and border. In contrast, content-box adds padding and border outside the declared width.
In CSS Grid, which property defines the number and size of the grid's columns?
grid-columns
grid-template-columns
column-count
grid-template-rows
grid-template-columns sets the number and width of grid columns. grid-template-rows does the same for rows, column-count is used in multi-column layout, and grid-columns is not a valid property.
In Flexbox layout, which property aligns items along the main axis?
justify-content
align-items
flex-direction
align-content
justify-content distributes space along the main axis of a flex container. align-items and align-content deal with the cross axis, and flex-direction sets the main axis orientation.
Which media query applies styles when the viewport is at least 768px wide?
@media screen and (height > 768px) { ... }
@media (width >= 768px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) { ... }
The min-width feature applies styles when the viewport width meets or exceeds the specified value. max-width does the opposite, and other syntaxes shown are either invalid or target height.
Which selector targets all input elements with type="text"?
.input-text
input#text
input.text
input[type="text"]
Attribute selectors in CSS use square brackets to match attribute values. input[type="text"] selects inputs whose type attribute equals "text".
Which text-transform value capitalizes the first letter of each word?
lowercase
initial
capitalize
uppercase
The capitalize value transforms the first character of each word to uppercase. uppercase makes all letters uppercase and lowercase makes them all lowercase.
Which selector has greater specificity: p.intro or .intro?
.intro
p.intro
p
.intro p
p.intro combines an element selector and a class selector, giving it a specificity of 0-0-1-1. A lone class selector .intro is 0-0-1-0, making p.intro more specific.
In modern CSS Grid, which property sets the space between grid tracks?
grid-gap
gap
track-gap
row-gap
The gap property (Grid Level 2) is the shorthand for row-gap and column-gap and sets spacing between grid tracks. grid-gap is an older alias and row-gap only sets vertical spacing.
Which of the following selectors has the highest specificity?
body.homepage
#sidebar .widget ul li
div.content p.highlight
.button:hover
The selector with an ID (#sidebar) plus a class (.widget) and two element selectors has a specificity of 0-1-1-2, which is higher than the others. Pseudo-classes and element selectors alone are less specific.
Which Flexbox property allows items to wrap onto multiple lines?
flex-wrap: wrap;
flex-flow: nowrap;
flex-direction: row;
flex-wrap: no-wrap;
The flex-wrap property controls whether flex items wrap onto multiple lines. Setting it to wrap enables wrapping, whereas nowrap (or default) keeps them on one line.
In CSS Grid, what does repeat(3, 1fr) specify when used in grid-template-columns?
A single column of three fraction units
Three columns each taking one fraction unit
Three columns each taking three fraction units
Three rows each taking one fraction unit
The repeat() function is shorthand for repeating track definitions. repeat(3, 1fr) creates three columns, each sized at one fraction of the available space.
How would you write a media query to target viewport widths between 600px and 900px?
@media (max-width: 900px) { ... }
@media (min-width: 600px) and (max-width: 900px) { ... }
@media (width > 600px) and (width < 900px) { ... }
@media (min-width: 600px) { ... }
Combining min-width and max-width with the and keyword correctly targets a range of viewport widths. Isolated min-width or max-width queries do not enforce both limits.
Given box-sizing: border-box; width: 100px; padding: 10px; border: 5px solid; what is the content width?
90px
100px
70px
80px
With border-box sizing, the declared width includes padding and border. Subtracting 2×10px padding and 2×5px border from 100px leaves 70px of content width.
0
{"name":"Which CSS selector targets all HTML elements with the class \"button\"?", "url":"https://www.quiz-maker.com/QPREVIEW","txt":"Which CSS selector targets all HTML elements with the class \"button\"?, Which CSS property controls the space outside an element's border?, Which CSS property is used to set the font family for text?","img":"https://www.quiz-maker.com/3012/images/ogquiz.png"}

Learning Outcomes

  1. Identify CSS selector types and their usage
  2. Apply the CSS box model to control element spacing
  3. Analyse specificity rules for stylesheet conflicts
  4. Master basic layout techniques like flex and grid
  5. Demonstrate text styling and font property control
  6. Evaluate responsive design using media queries

Cheat Sheet

  1. Master CSS Selectors - CSS selectors are your magic wand for picking and styling HTML elements - type selectors, classes, IDs and even attribute selectors let you target exactly what you want. Mixing and matching selectors lets you write less code but style more creatively. Dive in to see how these patterns work together on every page. Explore CSS Selectors
    2. developer.mozilla.org
  2. Comprehend the CSS Box Model - The box model is the secret recipe behind every layout, combining content, padding, border, and margin to define an element's total size. Understanding how these layers interact keeps your designs neat and predictable. Play with values and watch spacing transform like a pro. Dive into the Box Model
    3. developer.mozilla.org
  3. Analyze Specificity Rules - When multiple styles clash, specificity decides the winner - inline styles beat IDs, IDs beat classes, and classes beat elements in a royal showdown. Learning this hierarchy prevents frustrating "why isn't my style applying?" moments. Get ready to conquer conflicts with confidence. Unlock Specificity Secrets
    4. developer.mozilla.org
  4. Implement Flexbox for Layouts - Flexbox turns container children into flexible items you can align, distribute, and reorder with ease. From centering content both horizontally and vertically to building responsive nav bars, flexbox has your back. Experiment with properties like justify-content and align-items for instant layout magic. Get Flexible with Flexbox
    5. developer.mozilla.org
  5. Utilize CSS Grid for Complex Designs - CSS Grid is your two-dimensional playground for rows and columns, letting you craft magazine-style layouts or intricate dashboards with minimal fuss. Define tracks, gaps, and areas to build robust designs that adapt gracefully. Once you taste grid power, simple floats will feel ancient. Grid Your Way to Glory
    6. developer.mozilla.org
  6. Style Text Effectively - Typography sets the tone of your content - control it with properties like font-family, font-size, color, and line-height. A dash of letter-spacing or a thoughtful font choice can turn bland paragraphs into a reader's delight. Play with web-safe fonts and fallback stacks to keep your text looking sharp everywhere. Polish Your Typography
    7. developer.mozilla.org
  7. Apply Media Queries for Responsiveness - Media queries are the watchdogs of responsive design - tell your CSS when to swoop in and change styles based on screen width, orientation, or resolution. Whether it's stacking columns on mobile or tweaking font sizes for tablets, they keep your site looking awesome on every device. Test frequently to master the breakpoints game. Master Media Queries
    8. developer.mozilla.org
  8. Understand Pseudo-classes and Pseudo-elements - Pseudo-classes like :hover and :focus style elements in special states, while pseudo-elements like ::before and ::after let you inject content or decorative touches. They're perfect for interactive menus, tooltips, or flairs without extra markup. Level up your UI with these stealthy selectors. Explore Pseudo Powers
    9. developer.mozilla.org
  9. Manage Inheritance and Cascading - CSS isn't just rules; it's a living cascade where inheritance and source order decide the final style. Some properties pass down from parent to child, while conflicts boil down to specificity, then order. Understanding this flow saves hours of head-scratching. Navigate the Cascade
    10. developer.mozilla.org
  10. Practice Writing Clean and Maintainable CSS - A tidy stylesheet is a happy stylesheet: use comments, consistent indentation, and meaningful class names (hello BEM!) to keep your code readable. Modularize with components, avoid deep nesting, and purge unused rules to stay lean. Future-you will thank past-you when it's time to update. Write Clean CSS
    11. developer.mozilla.org
Make a Quiz (FREE) Copy & Edit This Quiz Create a Quiz with AI

Technology Quizzes

Powered by: Quiz Maker