Both frameworks can speed up development, but they have different philosophies: Bootstrap is more opinionated and comes with ready-made components, while Tailwind gives you more control and flexibility with its utility classes. These advanced CSS techniques enable developers to create more interactive, dynamic, and complex web layouts with ease. Here are some common CSS interview questions and answers that you might encounter in a front-end development interview: 1. What is CSS and why is it important? Answer: CSS (Cascading Style Sheets) is a styling language used to control the appearance of HTML elements on a webpage. It allows developers to set visual properties like colors, fonts, layouts, and spacing. CSS helps separate the content (HTML) from the design, making web development more efficient, and also improves maintainability and reusability. 2. What are the different ways to apply CSS to a webpage? Answer: There are three ways to apply CSS to a webpage: 1. Inline CSS: Directly within an HTML element using the “style”attribute. “html

This is a red text.

2. Internal CSS: Inside the * 3. External CSS: In an external *.css* file that is linked to the HTML document. html 3. What is the CSS Box Model? Answer: The CSS Box Model describes how elements are structured and how their width and height are calculated. It consists of the following areas: 1. Content: The actual content (text, images, etc.). 2. Padding: Space between the content and the border. 3. Border: Surrounds the padding (if defined).4. Margin: Space outside the border, separating the element from others. The default box-sizing is “content-box’, which means padding and border are not included in the width/height. Setting ‘box-sizing: border-box* includes padding and border in the total width/height. 4. What is the difference between ‘class’ and ‘id* in CSS? Answer: - Class: A class is used to target multiple elements in a page. It is reusable across different HTML elements and is defined with a dot (.) in CSS. “css -myClass { color: red; } - ID: An ID is unique and can only be applied to one element per page. It is defined with a hash (#*) in CSS. ‘css #mylD { color: blue; }5. What is Flexbox? Answer: Flexbox (Flexible Box Layout) is a one-dimensional layout model that allows you to arrange items along a row or column. Flexbox makes it easier to distribute space, align items, and handle responsive layouts. Key properties: - “display: flex’: Defines the container as a flex container. - “flex-direction®: Defines the direction of the flex items (‘row’, ‘column’, etc.). - “justify-content’: Aligns the items along the main axis (e.g.. center, space-between). -“align-items®: Aligns the items along the cross axis (e.g., start, center, stretch). Example: css container { display: flex; justify-content: space-between; } 6. What is the “z-index” in CSS? Answer: The “z-index” property in CSS controls the stacking order of elements on the page. It is used when elements overlap, withhigher “z-index” values being displayed in front of lower ones. It only works on elements that have a ‘position’ value other than ‘static’ (e.g., ‘relative’, ‘absolute’, ‘fixed’, or ‘sticky’). Example: ‘css div { position: absolute; z-index: 10; /* Will appear in front of elements with lower z-index values */ } 7. Explain the difference between “position: relative’ and “position: absolute’. Answer: - ‘position: relative’: The element is positioned relative to its ‘left’, normal position in the document flow. You can use “top* “bottom’, and ‘right* to move it, but it still occupies space in the flow, Example: SS. div { position: relative; top: 10px; }- “position: absolute’: The element is positioned relative to its nearest positioned ancestor (an ancestor with a ‘position’ other than ‘static’). It is removed from the document flow, so it does not take up space. Example: ‘css div { position: absolute; top: 10px: left: 10px; } 8. What are media queries in CSS? Answer: Media Queries are used to apply different styles to a page based on the device’s characteristics, such as its width, height, or screen resolution. They are commonly used for responsive design. Example: ‘css @media (max-width: 768px) { body { background-color: lightblue; } } This applies the background color “lightblue” when the viewportwidth is 768px or smaller. 4. What is the difference between ‘inline’, “block”, and “inline- block’ elements? Answer: - Block-level elements: Occupy the entire width of their parent container and start on a new line (e.g., “