Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/hakeemsalman/css-learning-kit

It help in FEE Interview Preparation
https://github.com/hakeemsalman/css-learning-kit

Last synced: 2 months ago
JSON representation

It help in FEE Interview Preparation

Awesome Lists containing this project

README 

        
# CSS Learning Kit



## Top CSS Interview Questions



### Experience Candidates

---



### 1. Difference between CSS Grid vs Flexbox?  

**CSS Grid** is a two-dimensional layout system (rows and columns), while **Flexbox** is one-dimensional (either row or column).  



- **Grid**: Best for overall page layouts, aligns elements both horizontally & vertically.  

- **Flexbox**: Best for distributing elements along a single axis (row/column).  



---



### 2. Explain CSS position property?  

Defines how an element is positioned in a document.  



- **Static**: Default positioning, follows normal flow.  

- **Relative**: Positioned relative to its normal position.  

- **Absolute**: Positioned relative to the nearest positioned (non-static) ancestor.  

- **Fixed**: Stays fixed relative to the viewport.  

- **Sticky**: Sticks to a position until a certain scroll threshold is met.  



---



### 3. When does DOM reflow occur?  

DOM reflow occurs when changes in elements require the browser to recalculate their position & dimensions. Triggers include:  

- Changing size, position, or layout properties (width, height, margin, padding).  

- Adding/removing elements.  

- Resizing the window.  



---



### 4. Different Box Sizing Property?  

- **content-box** (default): Width & height include only content, not padding or border.  

- **border-box**: Width & height include padding and border.  



---



### 5. How to center align a div inside another div?  

- **Flexbox:**  

  ```css

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  ```

- **Grid:**  

  ```css

  display: grid;

  place-items: center;

  height: 100vh;

  ```

- **Absolute Positioning:**  

  ```css

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  ```



---



### 6. Four types of @media properties?  

- `max-width` / `min-width`  

- `max-height` / `min-height`  

- `aspect-ratio`  

- `orientation`  



---



### 7. What is the grid system?  

A **grid system** is a layout structure using rows and columns to align elements. CSS Grid and Bootstrap’s grid system are common examples.  



---



### 8. Different ways to hide an element using CSS?  

- `display: none;` → Removes element from DOM.  

- `visibility: hidden;` → Hides element but keeps space.  

- `opacity: 0;` → Hides element without affecting layout.  

- `position: absolute; left: -9999px;` → Moves it off-screen.  



---



### 9. What does the `:root` pseudo-class refer to?  

Targets the root element (``) in CSS. Used for defining global variables:  

```css

:root {

  --primary-color: blue;

}

```



---



### 10. What does Accessibility (a11y) mean?  

Web accessibility (a11y) ensures websites are usable by people with disabilities (e.g., screen readers, keyboard navigation).  



---



### 11. How do I restore the default value of a property?  

Use:  

- `initial` → Resets to default browser-defined value.  

- `inherit` → Inherits value from the parent element.  

- `unset` → Acts as `inherit` if inherited, otherwise `initial`.  



---



### 12. How does `calc()` work?  

Allows dynamic calculations in CSS:  

```css

width: calc(100% - 50px);

```



---



### 13. What do CSS Custom properties (variables) mean?  

CSS variables that store reusable values:  

```css

:root {

  --main-color: red;

}

p {

  color: var(--main-color);

}

```



---



### 14. Difference between CSS variables and preprocessor variables?  

- **CSS Variables**: Live in the browser, can be changed dynamically.  

- **Preprocessor Variables (SASS, LESS)**: Compiled before rendering, not changeable at runtime.  



---



### 15. What does `* { box-sizing: border-box; }` do?  

Ensures width & height include padding and borders. Prevents unexpected layout issues.  



---



### 16. What does `!important` mean in CSS?  

Overrides all other rules, even inline styles.  



---



### 17. What is specificity? How to calculate it?  

Specificity determines which CSS rule applies when multiple rules match an element. Calculated as:  



- Inline styles → **1000**  

- ID selectors → **100**  

- Class, pseudo-classes → **10**  

- Element selectors → **1**  



Example:  

```css

#id (100) > .class (10) > div (1)

```



---



### 18. What is progressive rendering?  

Loads visible content first to improve performance. Methods:  

- Lazy loading images  

- Content skeletons  

- Async JavaScript  



---



### 19. Advantages of `translate()` over absolute position?  

- Doesn’t affect surrounding elements.  

- Uses GPU acceleration for better performance.  



---



### 20. Does `style1.css` need to be downloaded before `style2.css`?  

Yes, unless both are async-loaded via `` with `media="print"` trick.  



---



### 21. How to check if a browser supports a feature?  

Use:  

```css

@supports (display: grid) { ... }

```

or  

```js

if ('grid' in document.body.style) { ... }

```



---



### 22. How to fix browser-specific styling issues?  

- Use `@supports`, `@media`.  

- Vendor prefixes (`-webkit-`, `-moz-`).  

- Normalize.css or CSS resets.  



---



### 23. How does `overflow: hidden;` work?  

Hides content that exceeds the element’s width/height.  



---



### 24. How to center text inside `
` in a `
`?  

```css

display: flex;

align-items: center;

justify-content: center;

```



---



### 25. Difference between margin and padding?  

- **Margin**: Space **outside** the element.  

- **Padding**: Space **inside** the element.  



---



### 26. How to auto-number headings in CSS?  

Use `counter-reset` and `counter-increment`:  

```css

h1::before {

  counter-increment: section;

  content: counter(section) ". ";

}

```



---



### 27. Difference between `nth-child()` and `nth-of-type()`?  

- `nth-child(n)`: Targets the **n-th** child of the parent.  

- `nth-of-type(n)`: Targets the **n-th** element of a specific type.  



---



### 28. Importance of CSS Sprites?  

Combines multiple images into one file to reduce HTTP requests.  



---



### 29. What is tweening in CSS?  

Smooth animation between two states using keyframes:  

```css

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

```



---



### 30. Why use `clear` property with floats?  

Prevents layout breaking by ensuring the floated elements don’t overlap other elements.  



---



### 31. How does absolute positioning work?  

Positioned relative to the nearest **non-static** ancestor.  



---



### Freshers Candidates



Here are the answers to your CSS interview questions:  



---



### **1. What are the advantages of using CSS?**  

- **Separation of concerns**: Keeps design and content separate.  

- **Consistency**: Ensures uniform styling across pages.  

- **Efficiency**: One stylesheet can style multiple pages.  

- **Performance**: Faster page load times with cached stylesheets.  

- **Accessibility**: Enhances usability across devices.  



---



### **2. How do you specify units in CSS? What are the different ways to do it?**  

CSS supports **absolute** and **relative** units:  



- **Absolute**: Fixed sizes (e.g., `px`, `cm`, `mm`, `in`).  

- **Relative**: Scales based on other elements (e.g., `%`, `em`, `rem`, `vw`, `vh`).  



---



### **3. What is the Box model in CSS? Which CSS properties are a part of it?**  

The CSS **box model** consists of:  

- **Content** → Actual text/image inside.  

- **Padding** → Space around content.  

- **Border** → Surrounds padding.  

- **Margin** → Space outside the border.  



---



### **4. What are the limitations of CSS?**  

- **Limited logic** (no loops/conditions).  

- **Browser inconsistencies** in rendering.  

- **Difficult debugging** due to cascading issues.  

- **Not suitable for complex animations** (compared to JS).  



---



### **5. How to include CSS in the webpage?**  

- **Inline**: `
Text
`  

- **Internal**: ` p { color: red; } `  

- **External**: ``  



---



### **6. What are the different types of Selectors in CSS?**  

- **Universal (`*`)** → Targets all elements.  

- **Element (`h1, p`)** → Targets specific elements.  

- **Class (`.class`)** → Targets elements with a class.  

- **ID (`#id`)** → Targets elements with an ID.  

- **Attribute (`[type="text"]`)** → Targets elements by attribute.  

- **Pseudo-classes (`:hover`)** → Targets states of elements.  

- **Pseudo-elements (`::before`)** → Targets specific parts of elements.  



---



### **7. What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?**  

A **CSS preprocessor** adds programming features (variables, nesting, functions) to CSS.  

- **SASS** (most popular) → Uses `.scss` or `.sass`.  

- **LESS** → Uses `.less`, similar to CSS but with variables.  

- **Stylus** → More flexible syntax.  



Advantages:  

- Code reusability.  

- Easier maintenance.  

- Advanced styling capabilities.  



---



### **8. What is VH/VW (viewport height/width) in CSS?**  

- **vh** → % of viewport height (`100vh` = full height).  

- **vw** → % of viewport width (`100vw` = full width).  



---



### **9. Difference between reset vs normalize CSS?**  

- **Reset.css** → Removes all default styles (harsh reset).  

- **Normalize.css** → Standardizes default styles across browsers (gentle reset).  



---



### **10. Difference between inline, inline-block, and block?**  

- **Inline** → No width/height control (``).  

- **Inline-block** → Like inline but allows width/height (``).  

- **Block** → Full width, starts on a new line (`
`).  



---



### **11. Is it important to test the webpage in different browsers?**  

Yes, because:  

- Different browsers interpret CSS differently.  

- Ensures **cross-browser compatibility**.  



---



### **12. What are Pseudo-elements and Pseudo-classes?**  

- **Pseudo-classes (`:hover`)** → Select elements based on state (hover, focus).  

- **Pseudo-elements (`::before`, `::after`)** → Select part of an element.  



---



### **13. Does margin-top or margin-bottom affect inline elements?**  

No, margins do not apply to inline elements (only block/inline-block).  



---



### **14. What is cascading in CSS?**  

**Cascading** determines which styles are applied when multiple rules exist. Priority order:  

1. Inline styles  

2. IDs  

3. Classes  

4. Elements  



---



### **15. What property is used for changing the font face?**  

```css

font-family: "Arial", sans-serif;

```



---



### **16. Differences between adaptive design and responsive design?**  

- **Adaptive** → Uses fixed layouts for different screen sizes.  

- **Responsive** → Uses flexible layouts that adjust dynamically.  



---



### **17. How are CSS selectors matched against elements by the browser?**  

Browsers match **right to left**, optimizing performance:  

1. Find elements that match the **last selector**.  

2. Traverse backward to check parent selectors.  



---



### **18. How is border-box different from content-box?**  

- **border-box** → Includes padding & border inside width.  

- **content-box** (default) → Width excludes padding & border.  



---



### **19. How is opacity specified in CSS3?**  

```css

opacity: 0.5; /* 50% transparent */

```



---



### **20. Why should we use float property in CSS?**  

Floats allow elements to wrap around text or other elements, used for layout before Flexbox/Grid.  



---



### **21. What is `z-index`, and how does it function?**  

Controls stacking order of elements. Higher `z-index` values appear on top.  

```css

z-index: 10;

```



---



### **22. What do the following CSS selectors mean?**  

- `div p` → Targets `
` inside `


`.  

- `div > p` → Targets **direct child** `
` inside `


`.  

- `div + p` → Targets the **immediate** `
` after `


`.  

- `div ~ p` → Targets all `
` after `


` (same parent).  



---



### **23. What are the properties of Flexbox?**  

- `display: flex;` → Enables flexbox.  

- `flex-direction` → Defines main axis (row, column).  

- `justify-content` → Aligns items horizontally.  

- `align-items` → Aligns items vertically.  

- `align-self` → Aligns a specific item.  

- `flex-wrap` → Wraps items to a new row.  

- `flex-grow`, `flex-shrink`, `flex-basis` → Controls item size behavior.  



---