CSS100: Style Engineering

Master the art of styling, from selectors and box model to Flexbox, Grid, and high-performance animations.

Total Questions

100

Modern CSS

Flex & Grid

Animations

High Perf

Architecture

BEM/Resets

CSS Basics

Selectors (Deep Dive)

The Box Model

Positioning

Flexbox (Deep Dive)

CSS Grid (Deep Dive)

Responsive Design

Typography & Text

Transitions & Animations

CSS Variables & Custom Properties

Advanced CSS

CSS Architecture, Methodologies & Best Practices

CSS100: Style Engineering

CSS Basics

What is CSS and why do we use it?

What does "Cascading" mean in CSS?

What are the 3 ways to add CSS to HTML?

What is a CSS rule and what are its parts?

What is a CSS comment and how do you write one?

What is the difference between a class and an ID in CSS?

What are CSS units? What is the difference between px, em, rem, %, vw, vh?

What are CSS colors? How many ways can you write a color?

Selectors (Deep Dive)

What are the basic CSS selectors?

What are combinator selectors?

What are pseudo-classes in CSS?

What are pseudo-elements in CSS?

What is CSS specificity and how is it calculated?

What is the !important rule and when should you use it?

What are attribute selectors in CSS?

What are the :is(), :where(), and :has() selectors?

The Box Model

What is the CSS box model?

What is the difference between margin and padding?

What does box-sizing: border-box do and why is it important?

What is margin collapsing?

What is the display property and what are its values?

What is display:none vs visibility:hidden?

What is overflow in CSS?

What is the float property and why is it less used today?

Positioning

What are the 5 CSS position values and how do they work?

What is z-index and how does it work?

How do you center an element horizontally and vertically?

What is the difference between position:fixed and position:sticky?

Flexbox (Deep Dive)

What is Flexbox and how do you enable it?

What is the flex-direction property?

What does justify-content do in Flexbox?

What does align-items do in Flexbox?

What is flex-wrap and why is it important for responsive design?

What is the flex shorthand? What are flex-grow, flex-shrink, flex-basis?

What is align-self and order in Flexbox?

What is the gap property in Flexbox and Grid?

CSS Grid (Deep Dive)

What is CSS Grid and how is it different from Flexbox?

What is grid-template-columns and the fr unit?

How do grid-column and grid-row work for spanning items?

What is grid-template-areas?

What is minmax() and how do you make a responsive grid without media queries?

What is CSS Grid subgrid?

Responsive Design

What are CSS media queries?

What is mobile-first design and why is it recommended?

What is the viewport meta tag and why is it essential?

What is the clamp() function in CSS?

What are container queries in CSS?

What is the difference between min-width and max-width?

Typography & Text

What are the main CSS font properties?

How do you use custom web fonts (Google Fonts)?

What are the main CSS text properties?

Transitions & Animations

What is a CSS transition and how does it work?

What is a CSS animation with @keyframes?

What is the CSS transform property?

What are animation-fill-mode, animation-iteration-count, and animation-direction?

What is the difference between CSS transitions and animations?

What is will-change and when should you use it?

CSS Variables & Custom Properties

What are CSS custom properties (variables)?

How do you implement dark mode with CSS variables?

What are the differences between CSS variables and SASS/LESS variables?

Advanced CSS

What is a CSS stacking context and how is it created?

What is the calc() function in CSS?

What is the CSS object-fit property?

What is CSS specificity inheritance and what properties are inherited by default?

What is the CSS outline property and how is it different from border?

What are CSS logical properties?

What is aspect-ratio in CSS?

CSS Architecture, Methodologies & Best Practices