Advanced CSS Interview Questions

/in /by

1. Name different ways to position some aspects in CSS.

Ans: The position property defines the positioning method used for an element. The five possible values are static, relative, absolute, fixed, and sticky. Elements can then be positioned using the top, right, bottom, and left properties, which take effect based on the value of the position property.

2. When should you use translate () instead of absolute positioning?

Ans: translate() is a CSS transform function that moves elements without triggering layout reflow or repaint. When you change properties like opacity or transform, the browser avoids costly reflows and instead uses the GPU for rendering, improving performance. In contrast, changes to absolute positioning rely on the CPU and can trigger reflow. Using translate() is more efficient—it results in faster paint times and maintains the element’s original space in the document flow, unlike absolute positioning changes which alter layout structure.

3. How can you optimize the webpage for prints?

Ans: A typical website consists of distinct sections such as the header, footer, sidebar, navigation bar, and main content area. Most styling and layout adjustments are primarily focused on the main content area. To ensure effective print output without compromising the website’s integrity, follow these practices:

  • Use CSS page breaks to control how content appears on printed pages.

  • Create a dedicated print stylesheet to optimize formatting specifically for print.

  • Size your layout appropriately for standard paper dimensions.

  • Avoid using unnecessary HTML tables, as they can interfere with clean print formatting.

4. What are mixins?

Ans: A mixin is similar to a function, but instead of returning a single value, it outputs multiple lines of Sass code that compile directly into CSS styles. While functions return a value used within a CSS property or passed to another mixin or function, mixins are used to include reusable style blocks with or without parameters.

5. What is meant by CSS working under the hood?

Ans: When a browser displays a document, it combines style information (CSS) and document content (HTML) in two stages:

  1. Conversion of HTML and CSS into the Document Object Model (DOM) – The browser parses the HTML and CSS to build a structured representation of the page.

  2. Rendering the DOM – The browser uses the DOM to display the content visually on the screen.

6. Differentiate between the use of ID selector and class selector.

Ans: ID Selector:

html
<style>
#right {
text-align: right;
color: blue;
}
</style>

CSS Class Selector:

html
<style>
.right {
text-align: right;
color: blue;
}
</style>

Explanation:

  • #right targets an element with the ID right.

  • .right targets elements with the class right.

7. What do you understand by pseudo-elements?

Ans: Pseudo-elements allow you to apply special effects to selectors without adding extra HTML markup. They help insert content or style parts of elements—like the first line or first letter—when additional HTML isn’t feasible, making styling more efficient and non-intrusive.

8. Tell us about CSS float property.

Ans: The float property in CSS positions an element, such as an image, to the left or right, allowing text to wrap around it. It does not affect the properties of preceding elements.

9. Differentiate between logical and physical tags.

Ans: Logical tags primarily emphasize the meaning of content and are older than physical tags. While physical tags are commonly used for styling, logical tags are less frequently applied for aesthetic purposes.

10. What does the CSS overflow property do?

Ans: The overflow property in CSS controls how content that exceeds an element’s box is handled. It determines whether the overflow is clipped or if scrollbars are added. Available values include:

  • visible – Content is not clipped and may overflow the element’s box.

  • hidden – Overflowing content is clipped and not visible.

  • scroll – Content is clipped, but scrollbars are always shown to view the rest.

  • auto – Scrollbars appear only when the content overflows.

11. How media types in CSS work?

Ans: The four types of media properties are: all, print, speech, and screen.
Example of using the print media type:

css
@media print {
h2 {
background-color: blue;
}
}

12. What are the differences between overflow-x and overflow-y in CSS?

Ans: The overflow-x and overflow-y properties differ as follows:

  • overflow-x controls how content overflows horizontally (left to right).

  • overflow-y controls how content overflows vertically (top to bottom).

These properties provide precise control over content overflow in each direction individually.

13. What are the types of Floating properties?

Ans: Types of Floating Properties in CSS

Property Value Description
left Floats the element to the left of its containing block.
right Floats the element to the right of its containing block.
none Default value. The element does not float.
inherit The element inherits the float property from its parent.

Example:

css
.element-left {
float: left;
}.element-right {
float: right;
}

.element-none {
float: none;
}

14. Is it possible to overlap elements in CSS, and how?

Ans: Overlapping Elements in CSS:

In CSS, elements can be made to overlap by setting the position property to relative, absolute, or fixed. Once positioned, the stacking order—which determines which element appears on top—is controlled using the z-index property.

Syntax:

css
z-index: auto | <number> | initial | inherit;

  • auto: Default stacking based on HTML order.

  • <number>: A positive or negative integer to set explicit stacking order.

  • initial: Sets the property to its default value.

  • inherit: Inherits the value from its parent.

15. How does CSS image reflection effect work?

Ans:  CSS Image Reflection Effect

CSS image reflection is a visual effect that displays a mirrored version of an image, usually below the original, to simulate a reflection on surfaces like glass or water. This can be achieved using CSS properties like transform, opacity, filter, or even box-reflect (WebKit-specific), or by creating a reflected version using pseudo-elements or duplicated HTML.

Example using transform and opacity (Simple Reflection):

html
<div class="image-container">
<img src="image.jpg" alt="Original Image">
<img src="image.jpg" alt="Reflection" class="reflect">
</div>
css
image-container {
position: relative;
display: inline-block;
}.

image-container img {
display: block;
width: 100%;
}.

reflect {
position: absolute;
top: 100%; /* Position directly below the original image */
left: 0;
transform: scaleY(-1); /* Flip vertically */
opacity: 0.4; /* Semi-transparent to mimic reflection */
filter: blur(2px); /* Optional blur for realism */
}

16. How does the filter: blur property enhance the realism of a CSS image reflection?

Ans: Applies a blur effect to the reflection, simulating the appearance of a realistic reflection on water or glass.

17. What is the use of the @import rule?

Ans: Using @import to Include CSS Files

One CSS file can be included in another using the @import rule. This allows you to organize stylesheets modularly and conditionally load them based on media queries (e.g., screen size or device type). The @charset declaration, if present, must appear at the very top and be followed immediately by any @import rules.

Key Points about @import:

  • Allows importing external stylesheets into the current stylesheet.

  • Supports media queries, enabling conditional imports based on screen size or device type.

  • All @import statements must be placed at the top of the CSS file, before any other rules.

Syntax:

css
@import url("stylesheet.css");

With Media Queries:

css
@import url("stylesheet.css") screen and (max-width: 600px);

18. What are CSS counters properties?

Ans: CSS Counter Properties

CSS counter properties are used to create and manage numerical values for automatic numbering or sequencing in a document. They are particularly useful for generating ordered lists, section numbering, or custom bullet points.

Main CSS Counter Properties:

  1. counter-reset
    Resets a counter to a specified value (default is 0).
    Syntax:

    css
    counter-reset: myCounter;

  2. counter-increment
    Increments the value of a counter.
    Syntax:

    css
    counter-increment: myCounter;

  3. content
    Displays the value of a counter using counter() or counters() functions.
    Syntax:

    css
    content: counter(myCounter);

These properties work together to initialize, update, and display counter values within HTML elements, enabling dynamic and automatic numbering in CSS-based layouts.

19. What is pagination in CSS?

Ans: In CSS, pagination is used to divide content into separate pages by assigning specific page numbers.

20. What is the use of the universal selector in CSS?

Ans: Universal Selector:

The * selector, also known as the universal selector, is used to select all elements in an HTML document. It applies styles to every element, including those nested inside others.

Syntax:

css
* {
/* CSS properties */
}

Example:

css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

21. What are attribute selectors in CSS?

Ans: To select elements based on a specific attribute or attribute value, use the CSS Attribute Selector. It’s a powerful way to group and style HTML elements that share common attributes.

22. What are the different types of pagination in CSS?

Ans: Types of Pagination in CSS

Type of Pagination Description
Simple Pagination Basic pagination with standard navigation links.
Active & Hoverable Pagination Adds hover effects and highlights the active page for better user feedback.
Rounded Active & Hoverable Pagination buttons are rounded and include active and hover styles.
Hoverable Transition Effect Includes smooth transition effects on hover for a polished look.
Bordered Pagination Each pagination button has a visible border for separation and emphasis.
Rounded Border Pagination Similar to bordered pagination but with rounded corners for softer aesthetics.
Centered Pagination Pagination items are centered within the parent container.
Space Between Pagination Pagination items are spaced out evenly with space between them.
Pagination Size Variants Pagination can be adjusted to display small, medium, or large-sized buttons.

23. What are the different types of attribute selectors in CSS?

Ans: Types of Attribute Selectors in CSS

Selector Description
[attribute] Selects all elements that have the specified attribute, regardless of its value.
[attribute="value"] Selects elements where the attribute value exactly matches the specified value.
[attribute~="value"] Selects elements where the attribute contains a space-separated list of values, one of which is the specified value.
`[attribute =”value”]`
[attribute^="value"] Selects elements where the attribute value starts with the specified value.
[attribute$="value"] Selects elements where the attribute value ends with the specified value.
[attribute*="value"] Selects elements where the attribute value contains the specified value anywhere within it.

24. What are CSS Animations?

Ans: CSS Animations is a web design technique used to change the appearance and behavior of elements by animating their motion or display. It involves the use of CSS properties and keyframes.

25. How can you make a website responsive via CSS?

Ans: Media queries play a crucial role in responsive web design. They allow a webpage’s layout to adapt based on screen size or media type. By checking properties like viewport size, device width and height, orientation, and resolution, media queries apply appropriate styles when conditions are met. This ensures an optimal viewing experience across all devices.

26. Give a syntax for CSS Animations.

Ans: @keyframes Rule Syntax

css
@keyframes animationName {
from {
/* Initial state */
}
to {
/* Final state */
}
}

Applying Animation to an Element

css
selector {
animation: animationName duration timing-function delay iteration-count direction;
}

Example

css
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}.element {
animation: slide 2s ease-in-out 0s infinite;
}

27. How can you use the shorthand transition property in CSS?

Ans: You can combine all four individual transition properties into a single declaration using the CSS shorthand transition property. The order of the values is important and should follow this sequence:

Syntax:

css
transition: <property-name> <duration> <timing-function> <delay>;

28. What are the four main CSS properties used for creating transitions?

Ans: The four main CSS properties used for creating transitions are:

Property Description Values
transition-property Defines the CSS property to animate none, all, specific property name (e.g., width)
transition-duration Sets how long the transition takes Time units like s, ms
transition-timing-function Specifies the speed curve of the transition ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()
transition-delay Delays the start of the transition Time units like s, ms