CSS
Basic CSS Interview Questions and Answers
1. What is CSS and different types of CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML elements on a webpage
There are three types of CSS:
- Inline CSS
- Internal CSS
- External CSS.
2. What is the difference between classes and IDs in CSS?
- Classes can be applied to multiple elements.
- while IDs must be unique and applied to a single element per page.
3. What is the difference between relative, absolute, and fixed positioning in CSS?
- Relative positioning moves elements based on their normal position.
- Absolute removes them from the document flow.
- Fixed keeps them in a fixed position relative to the viewport.
4. What is the Box Model in CSS?
The CSS Box Model consists of four parts: content, padding, border, and margin.
5. What are pseudo-classes in CSS?
Pseudo-classes define a special state of an element, such as :hover, :focus, or :nth-child().
6. What is the difference between Flexbox and CSS Grid?
Flexbox is one-dimensional and is used for aligning items in a row or column. CSS Grid is two-dimensional, allowing layout control in both rows and columns. Flexbox is best for smaller layouts like navigation bars, while Grid is more suitable for full-page layouts.
7. What is the difference between "em", "rem", "px", and "%" in CSS?
- px is an absolute unit, meaning it does not scale.
- em is relative to the font size of its parent.
- rem is relative to the root font size. % is relative to the parent element's size and is commonly used for layout responsiveness.
8. What is the difference between inline, inline-block, and block elements?
Answer: Inline elements do not start on a new line and only take up as much width as necessary (e.g., span). Inline-block elements behave like inline elements but allow setting width and height. Block elements (e.g., div, p) take up the full width of the container and start on a new line.
9. What are media queries in CSS?
Media queries allow CSS styles to adapt based on screen size, resolution, or device type. They use the @media rule and are essential for responsive web design.
Example:
@media (max-width: 600px) { body { background-color: lightgray; } } applies styles when the screen width is 600px or smaller.
10. What is z-index in CSS?
z-index controls the stack order of overlapping elements. Higher values appear in front of lower values.
11. What is the difference between min-width, max-width, and width?
- Width sets a fixed width
- Min-width sets the minimum width an element can have.
- Max-width sets the maximum width.
12. What is the difference between transition and animation in CSS?
- A transition allows smooth changes between two states over a period. It only works when a property value changes.
- An animation can create complex motion effects by defining keyframes and does not require user interaction.
13. What is the difference between grid-template-areas and grid-template-columns?
- grid-template-areas allows defining a layout using named areas, making it more readable.
- grid-template-columns defines the width of columns explicitly using values like percentages or fractions.
14. How does object-fit work in CSS?
- The object-fit property defines how an image or video should be resized to fit its container.
- Values include cover (fills container while maintaining aspect ratio), contain (fits inside while keeping aspect ratio), and fill (stretches to fit).
15. What are CSS variables?
CSS variables allow storing reusable values.
Example::
root { --main-color: blue; } and use it as color: var(--main-color);.
16. What is a responsive design?
Responsive design ensures a website adapts to different screen sizes using flexible grids, images, and media queries.
Example of Responsive Design
Box 1
Box 2
Box 3
17. What is the difference between "nth-child()" and "nth-of-type()"?
- nth-child() selects based on position among all children.
- while nth-of-type() selects based on position within elements of the same type.
18. What is the difference between opacity and rgba?
- opacity applies transparency to the entire element.
- While rgba() applies transparency only to the background color.
19. What is the difference between inline and internal CSS?
- Inline CSS is written inside an element's style attribute.
- While internal CSS is inside a <style> block within the head section.
20. What is the difference between CSS Grid’s "auto-fill" and "auto-fit"?
- auto-fill adds columns to fill available space.
- While auto-fit resizes columns to fit the container.
21. What is the difference between CSS Grid’s "auto-fill" and "auto-fit" ?
- auto-fill adds columns to fill available space.
- While auto-fit resizes columns to fit the container.
22. What is the difference between hover and active states?
The
:hover state applies when a user hovers over an element, while :active applies when an element is clicked.
23. What is the purpose of the overflow property?
The overflow property controls how content is handled when it overflows its container. Values include visible, hidden, scroll, and auto.
24. What is the difference between inline, internal, and external CSS?
Inline CSS is applied directly within an element's style attribute. Internal CSS is defined within a style tag in the HTML document. External CSS is stored in a separate file and linked using link.
25. What is the difference between "visibility: hidden" and "display: none"?
visibility: hidden hides the element but it still takes up space in the layout. display: none removes the element completely from the document flow, so it does not take up any space.
