CSS Interview Questions

Here are accurate and concise answers to your CSS interview questions:

What is CSS and what does it stand for?
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML elements on a webpage.
Explain the difference between inline, block, and inline-block elements.
- Inline: Elements do not start on a new line and take up only as much width as necessary (e.g., <span>, <a>).
- Block: Elements start on a new line and take up the full width available (e.g., <div>, <p>).
- Inline-block: Elements behave like inline elements but allow setting width and height (e.g., <button>).
Describe the box model in CSS.
The CSS box model consists of:
- Content: The actual text or image inside the element.
- Padding: Space around the content, inside the border.
- Border: A line surrounding the padding and content.
- Margin: Space outside the border, separating elements.
What is the purpose of the clear property in CSS?
The clear property prevents elements from wrapping around floated elements. Example: clear: both; ensures the element moves below floated content.
Explain the difference between position: relative; and position: absolute;.
- Relative: Positions the element relative to its normal position.
- Absolute: Positions the element relative to its nearest positioned (non-static) ancestor.
What is CSS selector specificity and how is it calculated?
Specificity determines which CSS rule applies when multiple rules target the same element. It is calculated as:
- Inline styles (1000 points)
- ID selectors (100 points)
- Class, attribute, and pseudo-class selectors (10 points)
- Element and pseudo-element selectors (1 point)
- Universal selector (*) has no specificity.

How can you center an element horizontally and vertically using CSS?

Using flexbox:

display: flex;
justify-content: center;
align-items: center;

Using grid:
```
display: grid;
place-items: center;
```

Using absolute positioning:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Explain the purpose of the float property in CSS.
The float property is used to position elements to the left or right of their container, allowing text or other elements to wrap around them.
Describe the difference between padding and margin.
- Padding: Space between the content and its border (inside the element).
- Margin: Space outside the border, separating elements from each other.
How does display: none; differ from visibility: hidden;?
- display: none; removes the element from the document flow, making it completely disappear.
- visibility: hidden; hides the element but still occupies space in the layout.
What is a CSS preprocessor, and why might you use one?
A CSS preprocessor (e.g., SASS, LESS) extends CSS with features like variables, nesting, and mixins, improving maintainability and efficiency.
What is the box-sizing property in CSS?
The box-sizing property defines how the total width and height of an element are calculated.
- content-box (default): Width includes only content.
- border-box: Width includes padding and border.
How do you include external stylesheets in HTML?
Using the <link> tag inside the <head> section:
```
<link rel="stylesheet" href="styles.css">
```
What is the difference between em and rem units in CSS?
- em: Relative to the font size of the parent element.
- rem: Relative to the root (html) font size.
How does the z-index property work in CSS?
The z-index property controls the stacking order of elements. Higher values bring elements to the front. It only works with positioned elements (relative, absolute, fixed).