CSS interview questions

Preview Questions

1. What is the difference between inline, internal, and external CSS?

   CSS can be added to a webpage in three different ways — inline, internal, and external. Inline CSS is written directly inside an HTML tag using the style attribute. It affects only that particular element and is usually...

2. What is the difference between class and id selectors?

   In CSS, both class and id selectors are used to style HTML elements, but they differ in how and where they are used. A class selector is defined using a dot (.) and can be applied to multiple elements on a page. It is...

3. Why do we use universal (*) selector?

   The universal selector in CSS, represented by an asterisk (*), is used to select all elements on a webpage. It applies the same style rules to every HTML element without having to mention them individually. For example,...

4. Explain the difference between relative, absolute, fixed, and sticky.

   In CSS, the position property is used to control how elements are placed on a webpage, and it has different values like relative, absolute, fixed, and sticky. An element with relative positioning is positioned relative...

5. What’s the use of ::before and ::after pseudo-elements?

   In CSS, the ::before and ::after pseudo-elements are used to add content before or after an element’s actual content without needing to change the HTML structure. They are often used for decorative purposes, icons,...

6. What does overflow: hidden, scroll, and auto mean?

   In CSS, the overflow property controls what happens when the content inside an element is too large to fit in its container. overflow: hidden means any extra content that doesn’t fit will be cut off and not visible —...

7. Explain the CSS Box Model.

   The CSS Box Model is a fundamental concept that describes how every HTML element on a webpage is represented as a rectangular box. This box is made up of four layers — content, padding, border, and margin. - The content...

8. How can you center a div horizontally and vertically?

   There are several ways to center a both horizontally and vertically in CSS, but the most common and modern method is by using Flexbox. You can set the parent container to display: flex, then use justify-content:...