Scribd
Upload
11 views

CSS Interview Questions

Uploaded by

Aryan Bade
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

CSS Interview Questions

Uploaded by

Aryan Bade
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Interview Questions

1. What is CSS?
Answer: CSS (Cascading Style Sheets) is a stylesheet language used
to describe the presentation of a document written in HTML or XML.
It controls the layout, colors, fonts, and overall appearance of web
pages.
2. What is the difference between class selectors and ID
selectors in CSS?
Answer: Class selectors are used to select multiple elements and are
denoted by a period (.), e.g., .classname. ID selectors are used to
select a single unique element and are denoted by a hash (#), e.g.,
#idname.
3. How can you include CSS in a web page?
Answer: CSS can be included in three ways:
Inline CSS: Using the style attribute within HTML elements.
Internal CSS: Using a <style> tag within the <head> section of an
HTML document.
External CSS: Using a <link> tag to link an external CSS file within
the <head> section.
4. What is the box model in CSS?
Answer: The box model consists of four areas: content, padding,
border, and margin. It defines how elements are structured and spaced
on a web page.
5. What are pseudo-classes in CSS?
Answer: Pseudo-classes are keywords added to selectors that specify
a special state of the selected elements. For example, :hover applies a
style when the user hovers over an element.
6. How does the CSS float property work?
Answer: The float property is used to position an element to the left or
right within its container, allowing text and inline elements to wrap
around it. The possible values are left, right, none, and inherit.
7. What is the difference between absolute, relative, fixed, and
sticky positioning in CSS?
Answer:
Absolute: The element is positioned relative to the nearest positioned
ancestor or the initial containing block.
Relative: The element is positioned relative to its normal position in
the document flow.
Fixed: The element is positioned relative to the browser window and
does not move when the page is scrolled.
Sticky: The element toggles between relative and fixed positioning
depending on the scroll position.
8. What is Flexbox in CSS?
Answer: Flexbox (Flexible Box Layout) is a layout model that allows
you to design complex layouts more efficiently. It is a one-
dimensional layout method for arranging items in rows or columns,
providing control over the alignment, direction, order, and size of the
items.
9. What is CSS Grid Layout?
Answer: CSS Grid Layout is a two-dimensional layout system for the
web. It allows developers to create complex and responsive layouts
using rows and columns.
10. How do you create a responsive design in CSS?
Answer: Responsive design can be achieved using media queries,
flexible grid layouts, flexible images, and ensuring the viewport is
properly configured. Media queries allow styles to be applied based
on the screen size, orientation, and other properties of the viewing
device.
11. What are CSS preprocessors and name a few?
Answer: CSS preprocessors are scripting languages that extend CSS
by allowing variables, nested rules, and functions. They need to be
compiled into regular CSS before being used in a web project.
Examples include SASS (Syntactically Awesome Stylesheets), LESS,
and Stylus.
12. Explain the concept of CSS specificity.
Answer: CSS specificity determines which styles are applied to an
element when there are conflicting rules. It is calculated based on the
number of type selectors, class selectors, and ID selectors in a rule.
Inline styles have the highest specificity, followed by IDs,
classes/attributes, and element selectors.
13. What is the z-index property and how does it work?
Answer: The z-index property determines the stack order of
positioned elements (elements with position values of absolute,
relative, fixed, or sticky). Elements with a higher z-index value will
appear in front of those with lower values.
14. How do you use CSS transitions and animations?
Answer: CSS transitions allow you to change property values
smoothly (over a given duration) from one state to another.
Animations are more complex and allow you to create keyframes that
define styles at different points during the animation sequence.
/* Transition Example */
.example {
transition: background-color 0.5s ease-in-out;
}

/* Animation Example */
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
.animate {
animation: example 3s infinite;
}
15. What are CSS variables and how do you use them?
Answer: CSS variables, also known as custom properties, allow you
to store values that you can reuse throughout your stylesheet. They
are defined with a -- prefix and accessed using the var() function.
:root {
--main-color: #3498db;
}
.example {
color: var(--main-color);
}

You might also like