CSS Interview Prep: 50 Must-Know CSS Questions with Detailed Explanations
1. What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to style the layout and appearance of HTML elements.
Example:
h1 {
color: blue;
font-size: 24px;
}
2. What are the different ways to apply CSS to a webpage?
- Inline CSS: Using the style attribute directly in HTML tags.
- Internal CSS: Inside a <style> tag in the <head> section.
- External CSS: Linking to an external stylesheet using a <link> tag.
Example:
<!-- Inline CSS -->
<h1 style="color: red;">Hello World!</h1>
<!-- Internal CSS -->
<style>
h1 {
color: green;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" type="text/css" href="styles.css">
3. What is the CSS box model?
The CSS box model describes how elements are structured and rendered. It includes margins, borders, padding, and the content area.
Example:
.box {
margin: 20px; /* Outer space */
border: 5px solid black; /* Border */
padding: 10px; /* Inner space */
width: 100px; /* Content area width */
}
4. What is the difference between padding and margin?
- Padding: The space between the content and the border of an element.
- Margin: The space outside the border of an element.
Example:
.element {
padding: 20px; /* Space inside the border */
margin: 30px; /* Space outside the border */
}
5. What are CSS selectors?
CSS selectors are patterns that select the elements to style. Examples include type selectors, class selectors, ID selectors, and attribute selectors.
Example:
/* Type selector */
h1 {
color: blue;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#unique {
font-weight: bold;
}
6. What is the difference between class selectors and ID selectors?
- Class selectors: Start with a dot (.) and can be used on multiple elements.
- ID selectors: Start with a hash (#) and must be unique within a page.
Example:
.button { /* Class selector */
background-color: blue;
}
#header { /* ID selector */
height: 100px;
}
7. What are pseudo-classes in CSS?
Pseudo-classes are keywords added to selectors that specify a special state of the selected elements.
Example:
a:hover {
color: red; /* Changes color when the link is hovered over */
}
8. What are pseudo-elements in CSS?
Pseudo-elements allow you to style a specific part of an element.
Example:
p::first-line {
font-weight: bold; /* Styles the first line of a paragraph */
}
9. What is the CSS specificity rule?
Specificity determines which CSS rule is applied when multiple rules match the same element. It is calculated based on the types of selectors used.
Example:
- Inline styles have the highest specificity.
- ID selectors are more specific than class selectors.
- Class selectors are more specific than type selectors.
10. What are CSS combinators?
Combinators are used to define relationships between selectors. The four combinators are descendant ( ), child (>), adjacent sibling (+), and general sibling (~).
Example:
/* Descendant combinator */
div p {
color: blue; /* Selects all <p> inside <div> */
}
/* Child combinator */
div > p {
color: green; /* Selects only <p> that are direct children of <div> */
}
/* Adjacent sibling combinator */
h1 + p {
margin-top: 0; /* Selects <p> that immediately follows an <h1> */
}
/* General sibling combinator */
h1 ~ p {
color: red; /* Selects all <p> that follow an <h1> */
}
11. What is the CSS float property?
The float property allows an element to be taken out of the normal flow and positioned to the left or right of its container.
Example:
img {
float: left; /* Floats the image to the left */
margin-right: 10px;
}
12. What is the clear property in CSS?
The clear property specifies whether an element can be next to floated elements or must be below them.
Example:
.clearfix {
clear: both; /* Prevents floating elements from overlapping */
}
13. What is flexbox in CSS?
Flexbox is a layout model that allows for the design of complex layout structures with a more efficient way to lay out, align, and distribute space among items.
Example:
.container {
display: flex; /* Enables flexbox on the container */
}
.item {
flex: 1; /* Distributes available space equally among items */
}
14. What is the grid layout in CSS?
CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid-based designs.
Example:
.container {
display: grid; /* Enables grid layout */
grid-template-columns: repeat(3, 1fr); /* Creates three equal columns */
}
15. What are media queries?
Media queries are used to apply different styles to different devices or screen sizes.
Example:
@media (max-width: 600px) {
body {
background-color: lightblue; /* Changes background color on smaller screens */
}
}
16. What is the z-index in CSS?
The z-index property controls the vertical stacking order of elements that overlap. Higher values are in front of lower values.
Example:
.box1 {
position: absolute;
z-index: 1; /* Lower stacking order */
}
.box2 {
position: absolute;
z-index: 2; /* Higher stacking order, appears on top */
}
17. What is CSS positioning?
CSS positioning determines how an element is positioned in the document. Common positioning values include static, relative, absolute, fixed, and sticky.
Example:
.relative {
position: relative; /* Positioned relative to its normal position */
}
.absolute {
position: absolute; /* Positioned relative to the nearest positioned ancestor */
}
18. What is the purpose of the display property in CSS?
The display property determines how an element is displayed in the document flow. Common values include block, inline, inline-block, flex, and grid.
Example:
.block {
display: block; /* Starts on a new line */
}
.inline {
display: inline; /* Stays on the same line */
}
19. What is the difference between block and inline elements?
- Block elements: Occupy the full width available, creating a new line (e.g., <div>, <h1>).
- Inline elements: Only occupy the space required, and do not create a new line (e.g., <span>, <a>).
20. What is a CSS transition?
CSS transitions allow you to change property values smoothly over a specified duration.
Example:
.box {
transition: background-color 0.5s ease; /* Transition effect for background color */
}
.box:hover {
background-color: red; /* Changes color on hover */
}
21. What is a CSS transform?
CSS transforms allow you to change the shape, size, or position of an element using functions like translate(), rotate(), scale(), and skew().
Example:
.box {
transform: rotate(45deg); /* Rotates the box by 45 degrees */
}
22. What is the difference between visibility: hidden and display: none?
- visibility: hidden: The element is invisible but still occupies space in the layout.
- display: none: The element is removed from the document flow, and it does not occupy any space.
Example:
.hidden {
visibility: hidden; /* Element is hidden but occupies space */
}
.none {
display: none; /* Element is removed from the layout */
}
23. What are CSS variables (custom properties)?
CSS variables allow you to store values that can be reused throughout a stylesheet. They are defined using -- and accessed with the var() function.
Example:
:root {
--main-color: blue; /* Defines a CSS variable */
}
.box {
background-color: var(--main-color); /* Uses the variable */
}
24. What is the purpose of the !important rule in CSS?
The !important rule overrides any other conflicting styles, regardless of specificity.
Example:
p {
color: red !important; /* This will override other color styles */
}
25. What is the overflow property in CSS?
The overflow property specifies what should happen if content overflows an element’s box. Possible values are visible, hidden, scroll, and auto.
Example:
.container {
overflow: scroll; /* Adds scrollbars if content overflows */
}
26. What is the opacity property in CSS?
The opacity property specifies the transparency level of an element, where 1 is fully opaque and 0 is fully transparent.
Example:
.box {
opacity: 0.5; /* Makes the box semi-transparent */
}
27. What are the different types of CSS units?
CSS units can be classified into absolute units (like px, cm, in) and relative units (like %, em, rem, vw, vh).
Example:
.element {
width: 50%; /* Relative unit */
padding: 10px; /* Absolute unit */
}
28. What is a CSS preprocessor?
CSS preprocessors like SASS, LESS, and Stylus extend CSS with features like variables, nesting, and mixins, making CSS more maintainable and scalable.
Example with SASS:
$primary-color: blue;
.button {
background-color: $primary-color; /* Uses a variable */
}
29. What is the purpose of the float property?
The float property is used to position elements to the left or right of their container, allowing text and inline elements to wrap around them.
Example:
img {
float: left; /* Floats the image to the left */
}
30. What is the calc() function in CSS?
The calc() function allows you to perform calculations to set CSS property values dynamically.
Example:
.box {
width: calc(100% - 20px); /* Calculates width dynamically */
}
31. What is the @import rule in CSS?
The @import rule allows you to import styles from other CSS files into a main stylesheet.
Example:
@import url('styles.css'); /* Imports styles from another file */
32. What are CSS sprites?
CSS sprites combine multiple images into a single image to reduce HTTP requests and improve page load performance. You then use background positioning to display the desired image.
Example:
.sprite {
background-image: url('sprite.png');
width: 50px; /* Width of individual sprite */
height: 50px; /* Height of individual sprite */
background-position: -50px -50px; /* Adjust position to show the desired sprite */
}
33. What is the position: sticky property?
The position: sticky property allows an element to switch between relative and fixed positioning depending on the user's scroll position.
Example:
.header {
position: sticky; /* Sticks to the top when scrolled */
top: 0;
}
34. What is a responsive design?
Responsive design is an approach to web design that makes web pages render well on various devices and screen sizes by using fluid grids, flexible images, and media queries.
Example:
@media (max-width: 768px) {
.container {
flex-direction: column; /* Changes layout for smaller screens */
}
}
35. What is the text-align property?
The text-align property specifies the horizontal alignment of text within an element.
Example:
p {
text-align: center; /* Centers the text within the paragraph */
}
36. What is the vertical-align property?
The vertical-align property specifies the vertical alignment of inline elements or table cells.
Example:
img {
vertical-align: middle; /* Aligns the image to the middle of the line */
}
37. What is the white-space property?
The white-space property controls how white space inside an element is handled.
Example:
pre {
white-space: pre; /* Preserves white space and line breaks */
}
38. What is the content property in CSS?
The content property is used with pseudo-elements to insert content before or after an element.
Example:
h1::before {
content: "Chapter 1: "; /* Adds text before the <h1> */
}
39. What is the resize property in CSS?
The resize property specifies if and how an element is resizable by the user.
Example:
.textarea {
resize: both; /* Allows resizing both horizontally and vertically */
}
40. What is a CSS fallback?
A CSS fallback is a method of specifying alternative styles in case the primary style is not supported or fails to load.
Example:
body {
background-color: blue; /* Primary color */
background-color: lightblue; /* Fallback color */
}
41. What is the :root pseudo-class?
The :root pseudo-class targets the highest-level parent of the document, typically the <html> element, and is commonly used for defining CSS variables.
Example:
:root {
--main-bg-color: blue; /* Defines a global CSS variable */
}
42. What is the @media rule in CSS?
The @media rule applies styles based on the device's characteristics, such as screen size, orientation, and resolution.
Example:
@media (max-width: 600px) {
.container {
display: flex; /* Changes layout for smaller screens */
}
}
43. What are CSS animations?
CSS animations allow you to animate transitions between CSS styles using keyframes.
Example:
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.box {
animation: fade 2s; /* Applies the fade animation */
}
44. What is the @keyframes rule in CSS?
The @keyframes rule specifies the animation code by defining the style changes at various points during the animation sequence.
Example:
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation: slide 1s forwards; /* Applies the slide animation */
}
45. What is a CSS transition delay?
A transition delay defines how long to wait before starting the transition effect.
Example:
.box {
transition: background-color 0.5s ease 1s; /* 1s delay before the transition starts */
}
46. What is a CSS filter?
CSS filters are graphical effects that are applied to an element's rendering. They can change the appearance of images and backgrounds.
Example:
img {
filter: grayscale(100%); /* Converts the image to grayscale */
}
47. What is the outline property in CSS?
The outline property is used to create a line around an element, similar to borders, but does not take up space in the layout.
Example:
.button {
outline: 2px solid blue; /* Adds an outline to the button */
}
48. What are CSS gradients?
CSS gradients are smooth transitions between two or more colors that can be used as backgrounds.
Example:
.background {
background: linear-gradient(to right, red, yellow); /* Creates a linear gradient */
}
49. What is a CSS reset?
A CSS reset is a set of CSS rules that aims to remove browser default styles, ensuring a consistent baseline across different browsers.
Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Resets margins and paddings for all elements */
}
50. What is a CSS framework?
A CSS framework is a pre-prepared library that is meant to be used as a base for starting a particular type of project. They typically include styles, components, and a grid system.
Example:
- Popular CSS frameworks include Bootstrap, Foundation, and Bulma.
This list provides an overview of key CSS concepts and examples to help understand the essential aspects of CSS for web development. Each topic can be explored in more detail based on individual needs or specific interview requirements.