CSS INTERVIEW QUESTIONS ANSWER

1) What is difference between css and css3?

Ans: CSS:
1) Original styling language for web documents.
2) Lacks certain advanced features and capabilities.
CSS3:
1) Third version of CSS.
2) Introduces new features like animations, transitions, and rounded corners.
3) Offers improved styling capabilities for modern web design.

2) What is the selector in css?

Ans: Element Selector: p { }
Class Selector: .my-class { }
ID Selector: #my-id { }
Descendant Selector: div p { }
Child Selector: div > p { }
Attribute Selector: input [type="text"] { }
Universal Selectors: *{ }
Adjacent Sibling Selector: h2+p { }
Pseudo-Classes:- : hover { }
Pseudo-Elements:- : before { }, :: after{ }

3) What is media query in css?

Ans: A CSS media query adjusts styles based on factors like screen size for responsive web design.

4) What is different position in css?

Ans: Static:
Default position.
Elements follow normal document flow.
Relative:
Positioned relative to its normal position. Use top, right, bottom, left to offset.
Absolute:
Removed from normal flow.
Positioned relative to nearest positioned ancestor or the initial containing block.
Fixed:
Removed from normal flow.
Positioned relative to the viewport.
Stays fixed even during page scroll.
Sticky:
Positioned based on scroll position.
Acts like relative until a specified point then becomes fixed.

5) What is bom in css?

Ans: In CSS, "BOM" doesn't have a specific meaning; it's commonly associated with the JavaScript Browser
Object Model.

6) What is difference between PX, unit, em, rem in css?

Ans: Pixels (px):
Absolute unit.
Fixed-size based on screen pixels.
Doesn't change with user settings.
Percentage (%):
 Relative to the parent element.
Scales with the parent's size.
Em (em):
Relative to the font-size of the nearest parent or the element itself.
Can compound if used within nested elements.
Rem (rem):
Relative to the root (html) font-size.
Provides a consistent size across the document.

7) What is flex box in css?

Ans: Flexbox, short for Flexible Box, is a CSS layout model that allows the design of flexible and efficient
Box layouts. Key features include:

Direction:
Defines a flex container's main axis (horizontal or vertical).
Justification:
Controls the distribution of space along the main axis.
Alignment:
Aligns items along both the main and cross axes.
Ordering:
Allows rearranging of elements without changing the HTML source order.
Flex Containers:
Elements with display: flex; or display: inline-flex;.
Flex Items:
Elements within a flex container.

Flexbox simplifies complex layouts and enhances responsive design, making it a powerful tool for creating dynamic
and adaptive web pages.

8) What is pseudo selector in css?

Ans: A pseudo-selector in CSS is a keyword added to a selector that selects a specific state or part of
an element. Examples include :hover, :active, and :nth-child(n). They enable styling based on conditions
or positions without additional classes or IDs.

9) How to make website responsive?

Ans: Use Responsive Design:
Employ CSS media queries to adapt styles based on screen size.
Design layouts that fluidly adjust to different devices.
Viewport Meta Tag:
Include <Meta name="viewport" content="width=device-width, initial-scale=1.0"> in your HTML to control the
viewport.
Flexible Grid Layouts:
Use CSS frameworks like Bootstrap or create your flexible grid system with percentages or flexbox.
Flexible Images:
Set images to max-width: 100%; to prevent them from overflowing their containers.
Media Queries:
Adjust styles based on screen characteristics using media queries, like changing font sizes or hiding/showing
elements.
Relative Units:
Use relative units like percentages, em, or rem for sizing elements.
Fluid Typography:
Utilize relative units for font sizes to ensure readability on various screen sizes.
Testing:
 Regularly test your website on different devices and browsers to identify and fix responsiveness issues.
Mobile-First Approach:
Design for mobile devices first and then progressively enhance for larger screens.
Flexible Containers:
Apply flexible container styles, such as flexbox or display: grid, to create adaptable layouts.

By combining these techniques, you can create a responsive website that provides a consistent and optimal user
experience across various devices.

10) What is breakpoint for viewport responsive device?

Ans: A breakpoint in responsive web design refers to specific screen sizes where layout adjustments are
Made. Common breakpoints include:
1. **Smartphones:** - `@media only screen and (max-width: 767px) { /* styles */ }`
2. **Tablets:** - `@media only screen and (min-width: 768px) and (max-width: 991px) { /* styles */ }
3. **Desktops:** - `@media only screen and (min-width: 992px) { /* styles */ }`
These breakpoints help tailor the design for optimal viewing on different devices.

11) Why we use box-sizing in css?

Ans: 1. **`box-sizing` Property:**
- Controls calculation of width and height in CSS.
2. **`content-box` (Default):**
- Width and height include only content.
- Padding and borders increase overall size.
3. **`border-box`:**
- Width and height include content, padding, and borders.
- Padding and borders don't add to the overall size.
4. **Consistency:**
- `border-box` provides a more consistent and intuitive box model.
5. **Sizing Simplification:**
- Easier sizing management, especially for responsive designs.
6. **Predictable Layouts:**
- Helps create predictable layouts, crucial for grids and columns.

11) Difference between Flex and Grid?

Ans: Layout Type:
Flexbox: One-dimensional layout (rows or columns).
CSS Grid: Two-dimensional layout (rows and columns).
Control:
Flexbox: Controls items along a single axis with flexibility.
CSS Grid: Precise control over rows and columns independently.
Content Ordering:
Flexbox: Easy reordering of elements along the flex direction.
CSS Grid: Allows rearranging items in both rows and columns within the grid.
Use Cases:
Flexbox: Best for smaller-scale layouts within components.
CSS Grid: Suited for larger-scale layouts, offering comprehensive control.
Arrangement:
Flexbox: Ideal for distributing items within a container in a single direction.
CSS Grid: Perfect for complex layouts where precise control over rows and columns is required.