CSS – Flip Cards for Programmers

CSS (54 questions)

Go back to the list of questions

SQL 105

Basic Concepts

What is CSS and why is it used?

↑ Back to top

How do inline, inline-block, and block-level elements differ?

↑ Back to top

Can you explain the differences between margin and padding?

↑ Back to top

What does the CSS box model represent?

↑ Back to top

How do you specify colors in CSS (e.g., hex, RGB, RGBA, HSL)?

↑ Back to top

What is the purpose of the "reset" or "normalize" in CSS?

↑ Back to top

Selectors and Specificity

What are the different types of CSS selectors and when would you use them?

↑ Back to top

How does the cascade and specificity work in CSS?

↑ Back to top

What are pseudo-classes and pseudo-elements? Give examples of each.

↑ Back to top

How do you target an element based on the state of its parent or sibling?

↑ Back to top

What is the difference between the ">" (child) and " " (descendant) combinators?

↑ Back to top

Layout and Positioning

What are the different methods of positioning elements (static, relative, absolute, fixed, sticky)?

↑ Back to top

How does float work and what are common ways to clear floated elements?

↑ Back to top

Can you explain the differences between display: block, display: inline, and display: inline-block?

↑ Back to top

What is the difference between width: auto and width: 100%?

↑ Back to top

How do you center an element horizontally and vertically using modern approaches (e.g., Flexbox, CSS Grid)?

↑ Back to top

What are the main concepts and properties of Flexbox?

↑ Back to top

How does CSS Grid differ from Flexbox, and in which use cases are they each more appropriate?

↑ Back to top

Responsive Design Interview Questions

What are media queries and how are they used to create responsive designs?

↑ Back to top

How do you handle responsive typography?

↑ Back to top

What does mobile-first design mean, and why might you choose it?

↑ Back to top

What are some best practices for responsive images in CSS?

↑ Back to top

How do you prevent horizontal scroll on mobile devices?

↑ Back to top

Advanced Selectors and Techniques

What are attribute selectors and how can they be used effectively?

↑ Back to top

Can you explain how to use :nth-child, :nth-of-type, and related pseudo-classes?

↑ Back to top

What is the difference between ::before and ::after?

↑ Back to top

How do you create custom shapes using only CSS (clip-path, border-radius, etc.)?

↑ Back to top

Can you describe how CSS transforms and transitions work?

↑ Back to top

How do CSS animations differ from transitions?

↑ Back to top

Preprocessors, Methodologies, and Architecture

What are CSS preprocessors like SASS or LESS, and what benefits do they offer?

↑ Back to top

Can you explain BEM (Block Element Modifier) naming convention and why it's useful?

↑ Back to top

What are CSS Modules in the context of modern frameworks (e.g., React)?

↑ Back to top

How do you organize and maintain large-scale CSS code bases?

↑ Back to top

Performance and Optimization

How do you handle CSS performance for large sites or applications?

↑ Back to top

What is the render-blocking effect of CSS and how can it be minimized?

↑ Back to top

How can you reduce the size of your CSS files (e.g., minification, compression, bundling)?

↑ Back to top

What are critical CSS and how do you implement it?

↑ Back to top

What is the difference between inlining CSS vs. linking CSS, and when might each be appropriate?

↑ Back to top

Browser Compatibility and Tools

What tools or methods do you use for cross-browser testing and debugging CSS issues?

↑ Back to top

How can vendor prefixes be managed effectively?

↑ Back to top

What polyfills or approaches do you use to handle unsupported CSS features in older browsers?

↑ Back to top

How do you detect and handle retina/high-density screens with CSS?

↑ Back to top

CSS in Modern Development Environments

How do you utilize frameworks like Bootstrap, Tailwind, or Material UI?

↑ Back to top

What are CSS-in-JS solutions (e.g., styled-components, Emotion) and how do they differ from standard CSS?

↑ Back to top

What is the Shadow DOM in the context of Web Components, and how does it affect CSS scoping?

↑ Back to top

Can you explain the concept of "CSS Modules" in build tools like Webpack?

↑ Back to top

Advanced Topics and Custom Properties

What are CSS Custom Properties (variables) and how do they differ from preprocessor variables?

↑ Back to top

How does the calc() function work and when is it useful?

↑ Back to top

How do you implement dark mode or theme switching using CSS variables?

↑ Back to top

What are some advanced properties or features introduced in recent CSS specs?

↑ Back to top

Problem-Solving and Patterns

How would you handle a complex layout where elements need to overlap or stack at various breakpoints?

↑ Back to top

What techniques do you use to debug tricky CSS issues or "layout thrashing"?

↑ Back to top

Have you encountered or solved a significant CSS bug for older browsers (like IE11) or mobile Safari?

↑ Back to top

What strategies would you use to refactor legacy CSS code in a large project?

↑ Back to top

Przejdź do innych zestawów pytań

SQL 105

Country/region

CSS (54 questions)

Basic Concepts

What is CSS and why is it used?

How do inline, inline-block, and block-level elements differ?

Can you explain the differences between margin and padding?

What does the CSS box model represent?

How do you specify colors in CSS (e.g., hex, RGB, RGBA, HSL)?

What is the purpose of the "reset" or "normalize" in CSS?

Selectors and Specificity

What are the different types of CSS selectors and when would you use them?

How does the cascade and specificity work in CSS?

What are pseudo-classes and pseudo-elements? Give examples of each.

How do you target an element based on the state of its parent or sibling?

What is the difference between the ">" (child) and " " (descendant) combinators?

Layout and Positioning

What are the different methods of positioning elements (static, relative, absolute, fixed, sticky)?

How does float work and what are common ways to clear floated elements?

Can you explain the differences between display: block, display: inline, and display: inline-block?

What is the difference between width: auto and width: 100%?

How do you center an element horizontally and vertically using modern approaches (e.g., Flexbox, CSS Grid)?

What are the main concepts and properties of Flexbox?

How does CSS Grid differ from Flexbox, and in which use cases are they each more appropriate?

Responsive Design Interview Questions

What are media queries and how are they used to create responsive designs?

How do you handle responsive typography?

What does mobile-first design mean, and why might you choose it?

What are some best practices for responsive images in CSS?

How do you prevent horizontal scroll on mobile devices?

Advanced Selectors and Techniques

What are attribute selectors and how can they be used effectively?

Can you explain how to use :nth-child, :nth-of-type, and related pseudo-classes?

What is the difference between ::before and ::after?

How do you create custom shapes using only CSS (clip-path, border-radius, etc.)?

Can you describe how CSS transforms and transitions work?

How do CSS animations differ from transitions?

Preprocessors, Methodologies, and Architecture

What are CSS preprocessors like SASS or LESS, and what benefits do they offer?

Can you explain BEM (Block Element Modifier) naming convention and why it's useful?

What are CSS Modules in the context of modern frameworks (e.g., React)?

How do you organize and maintain large-scale CSS code bases?

Performance and Optimization

How do you handle CSS performance for large sites or applications?

What is the render-blocking effect of CSS and how can it be minimized?

How can you reduce the size of your CSS files (e.g., minification, compression, bundling)?

What are critical CSS and how do you implement it?

What is the difference between inlining CSS vs. linking CSS, and when might each be appropriate?

Browser Compatibility and Tools

What tools or methods do you use for cross-browser testing and debugging CSS issues?

How can vendor prefixes be managed effectively?

What polyfills or approaches do you use to handle unsupported CSS features in older browsers?

How do you detect and handle retina/high-density screens with CSS?

CSS in Modern Development Environments

How do you utilize frameworks like Bootstrap, Tailwind, or Material UI?

What are CSS-in-JS solutions (e.g., styled-components, Emotion) and how do they differ from standard CSS?

What is the Shadow DOM in the context of Web Components, and how does it affect CSS scoping?

Can you explain the concept of "CSS Modules" in build tools like Webpack?

Advanced Topics and Custom Properties

What are CSS Custom Properties (variables) and how do they differ from preprocessor variables?

How does the calc() function work and when is it useful?

How do you implement dark mode or theme switching using CSS variables?

What are some advanced properties or features introduced in recent CSS specs?

Problem-Solving and Patterns

How would you handle a complex layout where elements need to overlap or stack at various breakpoints?

What techniques do you use to debug tricky CSS issues or "layout thrashing"?

Have you encountered or solved a significant CSS bug for older browsers (like IE11) or mobile Safari?

What strategies would you use to refactor legacy CSS code in a large project?

Przejdź do innych zestawów pytań