CSS Interview Questions

CSS Interview Questions

1. What is CSS and what does it stand for?

CSS stands for Cascading Style Sheets. It is a language used to describe the visual presentation of a web page, including fonts, colors, layout, and animations.

2. How does CSS relate to HTML?

HTML defines the structure of a web page, while CSS controls its appearance. You can think of HTML as the skeleton and CSS as the skin of a website.

3. What are the different ways to add CSS to an HTML document?

  • Inline CSS: Adding styles directly to an HTML element with the style attribute.
  • Internal CSS: Defining styles within a <style> element inside the HTML document.
  • External CSS: Linking to a separate .css file that contains all the styles.

4. What are the different types of CSS selectors?

  • Element selectors: Select specific HTML elements like <p> or <div>.
  • Class selectors: Select elements with a specific class attribute.
  • ID selectors: Select elements with a unique ID attribute.
  • Descendant selectors: Select elements nested within other elements.
  • Universal selector: Selects all elements on the page.

5. What is the difference between specificity and inheritance in CSS?

  • Specificity: Determines which style rule applies to an element when multiple rules conflict. More specific rules override less specific ones.
  • Inheritance: Styles are inherited by child elements from their parent elements unless overridden by more specific rules.

6. How do you set and modify font styles in CSS?

Use properties like font-family, font-size, font-weight, font-style, and color to define font appearance.

7. Briefly explain the box model in CSS.

The box model defines the dimensions and visual elements of an element, including padding, border, and margin.

8. What are CSS media queries and how are they used?

Media queries allow you to adjust the layout and styles of a webpage based on the viewing device (screen size, orientation, etc.).

9. Explain the difference between float and position in CSS for element layout.

  • Float: Allows elements to “float” beside other elements, with text flowing around them.
  • Position: Allows absolute or relative positioning of elements, independent of the normal document flow.

10. What are some best practices for writing clean and maintainable CSS?

  • Use descriptive class names.
  • Organize your styles logically.
  • Avoid inline styles unless necessary.
  • Use comments to explain your code.
  • Test your code across different browsers.