Top 15 CSS Interview Questions with Answers
Here are some common Top 15 CSS interview questions and sample answers to help you prepare:
Here are some common Top 20 HTML Interview questions here.
1.What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. It helps control the layout of web pages, including colors, fonts, and spacing.
2.What are the different ways to apply CSS to a web page?
Inline CSS: Applied directly on an element using the style attribute.
Internal CSS: Written inside the <style> tag within the <head> section of the HTML document.
External CSS: Linked to an HTML document using the <link> tag, and stored in a separate .css file.
3.What is the CSS Box Model?
The CSS Box Model is a fundamental concept that consists of the content, padding, border, and margin of an element. These elements collectively define the space occupied by the element on the page.
- Content: The actual content of the element.
- Padding: Space around the content.
- Border: A border around the padding.
- Margin: Space outside the border, separating the element from others.
4.What is the difference between relative, absolute, fixed, and sticky positioning in CSS?
Relative: Positions an element relative to its normal position.
Absolute: Positions the element relative to its nearest positioned ancestor (non-static), or the document if no such ancestor exists.
Fixed: Positions the element relative to the browser window; the element stays in place even when scrolling.
Sticky: A hybrid of relative and fixed. The element toggles between relative and fixed positioning, based on the user’s scroll position.
5.What is Flexbox and why is it useful?
Flexbox is a CSS layout module that helps distribute space within a container and aligns items within the container. It is especially useful for creating responsive layouts, and it simplifies the process of aligning items horizontally and vertically.
6.What are CSS selectors? Can you list some common types?
CSS selectors are used to select the HTML elements to style. Common selectors include:
- Type Selector: Targets elements by their tag name (e.g.,
div,p). - Class Selector: Targets elements by their class name (e.g.,
.className). - ID Selector: Targets an element by its unique ID (e.g.,
#idName). - Universal Selector: Targets all elements (
*). - Attribute Selector: Targets elements based on attributes (e.g.,
[type="text"]). - Pseudo-Class Selector: Targets elements based on their state (e.g.,
:hover,:focus).
7.What is the difference between block, inline, and inline-block elements?
Block: Takes up the full width available and starts on a new line (e.g., <div>, <p>).
Inline: Takes up only as much width as necessary and does not start on a new line (e.g., <span>, <a>).
Inline-block: Allows elements to sit next to each other (like inline), but also respects width and height settings (like block).
8.What is the z-index and how does it work in CSS?
The z-index property controls the stacking order of elements. Elements with higher z-index values appear in front of those with lower values. It only applies to positioned elements (position: relative, absolute, fixed, or sticky).
9.What is the difference between em and rem units in CSS?
em: A relative unit that is based on the font-size of the parent element.
rem: A relative unit based on the root element’s (html) font size.
10.What is a CSS preprocessor, and can you name a few?
A CSS preprocessor extends the functionality of regular CSS, allowing the use of variables, nested rules, mixins, and functions, which makes CSS more maintainable and modular. Some popular preprocessors include:
- Sass (Syntactically Awesome Stylesheets)
- LESS
- Stylus
11.What is a media query in CSS, and how is it used?
Media queries allow the application of different styles based on the characteristics of the user’s device, such as screen size or resolution. They are essential for creating responsive designs. Example:
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
12.What is the float property in CSS, and how is it commonly used?
The float property is used to position elements to the left or right of their container, allowing text or inline elements to wrap around them. It was commonly used for layout design, though Flexbox and Grid are now preferred.
13.What is CSS Grid Layout, and how does it differ from Flexbox?
CSS Grid Layout is a 2-dimensional system that enables the design of complex web layouts. Unlike Flexbox, which is 1-dimensional and works in a row or column direction, Grid allows for both rows and columns, making it more suitable for layout designs with multiple axes.
14.How can you center an element horizontally and vertically in CSS?
For a div element:
div {
display: flex;
justify-content: center; /* Horizontally */
align-items: center; /* Vertically */
height: 100vh; /* Full viewport height */
}
15.What is the difference between visibility: hidden and display: none?
visibility: hidden: Hides the element, but it still takes up space in the layout.
display: none: Removes the element from the layout entirely, as if it doesn’t exist.
By reviewing these CSS interview questions and answers, you can gain a strong foundation in CSS topics and concepts commonly asked during interviews.