CSS Interview Questions

1. What are the advantages of using CSS for web design?

CSS (Cascading Style Sheets) provides a variety of advantages for web design. It helps in separating the content (HTML) from the presentation (styling), which results in cleaner, more maintainable code. CSS allows developers to control the visual appearance of web pages, including layout, colors, fonts, spacing, and more. It enhances user experience by making web applications visually appealing and responsive across different devices. Additionally, with the ability to apply styles globally or selectively through selectors, CSS makes it easier to manage complex designs efficiently.

2. How can CSS be included in a webpage?

CSS can be included in a webpage in three primary ways:

Inline CSS: Adding styles directly within HTML elements using the style attribute.
```
<p style="color: red;">This is red text.</p>
```
Internal CSS: Adding styles within a <style> tag in the <head> section of the HTML document.
```
<style>
  body {
    background-color: lightblue;
  }
  </style>
```
External CSS: Linking an external stylesheet using the <link> tag.
```
<link rel="stylesheet" href="styles.css">
```

3. How are units specified in CSS, and what different types of units are available?

Units in CSS define how values like length, size, or positioning should be measured. Common CSS units include:

Absolute Units: Fixed in terms of physical units, e.g., px, cm, mm, in.
Relative Units: Relative to a parent element, e.g., % (percent), em, rem.
Viewport Units: Based on the browser viewport, e.g., vw, vh.
Other Units: e.g., ch (character width), ex (x-height of a font).

4. What does the box-sizing property do, and how do content-box and border-box differ?

The box-sizing property defines how the total width and height of an element are calculated.

content-box (default): Considers only the width and height of content, ignoring padding and borders.
```
width: 200px; 
padding: 10px; 
border: 5px solid black; 
```
The total box will be 220px.
border-box: Includes padding and borders in the specified width and height.
```
width: 200px; 
padding: 10px; 
border: 5px solid black; 
```
The total box will be 200px.

5. What is the CSS Box Model, and which properties are part of it?

The CSS Box Model represents the rectangular boxes that are created for elements on a webpage. It consists of four main parts:

Content: The actual content inside the box (e.g., text, images).
Padding: Space between the content and the border.
Border: Surrounds the padding, giving the element its visual edge.
Margin: Space outside the border, separating adjacent elements.

6. What is the difference between margin and padding in CSS?

Padding is the space between the content and the element's border. It pushes the content inward, creating space around the content.
Margin is the space outside the border, pushing elements away from each other or the edge of the parent container.

7. How is the opacity property specified in CSS3?

The opacity property in CSS3 specifies the transparency level of an element. It is a value between 0 (completely transparent) and 1 (completely opaque).

element {
  opacity: 0.5; /* 50% transparent */
}

8. How does the overflow: hidden property work?

The overflow: hidden property hides content that exceeds the boundaries of its container. Instead of allowing scrollbars or overflowing content, elements with overflow: hidden will clip the overflowed content.

div {
  overflow: hidden;
  width: 200px;
  height: 100px;
}

9. What property is used to change the font face?

The font-family property is used to specify the typeface or font face for text content in CSS.

p {
  font-family: Arial, sans-serif;
}

10. How do you restore the default value of a CSS property?

You can restore the default value of a CSS property by setting it to its initial value using the initial keyword.

element {
  property: initial;
}

11. What are the different types of CSS selectors?

CSS selectors target specific elements to apply styles. Some common types are:

Universal Selector: *
Type Selector: h1, p
Class Selector: .class
ID Selector: #id
Descendant Selector: div p
Attribute Selector: [type="text"]

12. What does the :root pseudo-class refer to?

The :root pseudo-class represents the document’s root element, which is usually the <html> element. It can be used to define global styles accessible to the entire document.

:root {
  --primary-color: #3498db;
}

13. What are pseudo-elements and pseudo-classes in CSS?

Pseudo-elements allow you to style specific parts of an element, such as ::before, ::after.
```
p::before {
  content: 'Note: ';
}
```
Pseudo-classes define the special state of an element, e.g., :hover, :first-child.
```
a:hover {
  color: red;
}
```

14. How is the nth-child() selector different from nth-of-type()?

nth-child() targets elements based on their position among siblings, regardless of their type.
```
div:nth-child(2) { color: blue; }
```
nth-of-type() targets elements based on their position within a specific type.
```
div:nth-of-type(2) { color: blue; }
```

15. How are CSS selectors matched against elements by the browser?

The browser matches CSS selectors against elements based on specificity, which is calculated by the order and type of selectors used. Specificity is determined by:

Inline styles (!important)
ID selectors (#id)
Class selectors, attributes, and pseudo-classes (.class, [type], :hover)
Element types (div, p)

16. What is specificity in CSS, and how is it calculated?

Specificity is a way to determine which styles should be applied when multiple rules target the same element. It’s calculated as a four-part number:

0-0-1-0: Inline styles (!important)
0-1-0-0: ID selectors (#id)
0-0-1-0: Class selectors, attributes, pseudo-classes (.class, [type], :hover)
1-0-0-0: Element types (div, p)

Higher specificity values override lower values.

17. What does * { box-sizing: border-box; } mean, and why is it useful?

* { box-sizing: border-box; } sets all elements to include padding and borders within their specified width and height. It avoids issues with layout inconsistencies where content might spill outside element boundaries. This is useful for ensuring consistent sizing across all elements.

18. What is cascading in CSS, and how does it work?

Cascading in CSS refers to how styles from different sources (inline styles, external stylesheets, etc.) are combined. The specificity, importance, and source origin of styles (e.g., inherited styles, user-agent defaults) determine which styles take precedence.

19. What does !important mean in CSS, and when should it be used?

The !important declaration overrides any other CSS rules, regardless of specificity. Use it sparingly because it can make debugging difficult and prevent styles from being overridden even when more relevant rules are present.

20. How do CSS custom properties (variables) work, and how do they differ from preprocessor variables?

CSS custom properties, defined using --name, work similarly to variables and can be reused throughout stylesheets. They are scoped to the CSS document and provide greater flexibility and reusability compared to preprocessors like SASS or LESS variables. Preprocessor variables exist within specific preprocessor contexts and are compiled into CSS during the build process.

HTML

JAVASCRIPT

CSS

PYTHON

SQL