Intermediate CSS Interview Questions

/in /by

1. Define z-index.

Ans: Z-index is a common topic in CSS interview questions. It controls the stacking order of overlapping elements. By default, its value is 0, but it can accept positive or negative integers. Elements with a higher z-index are stacked above those with a lower value. It accepts the following values: auto, a number (e.g., 1, -1), initial, and inherit.

2. What are the benefits of CSS Sprites?

Ans: With CSS sprites, loading multiple images is efficient. Blinking issues are eliminated, and assets are not downloaded in advance unless required.

3. How can you target h3 and h2 with the same styling?

Ans: * Multiple elements can be targeted by separating them with a comma */
h2, h3 {
color: red;
}
This CSS rule applies the color: red; style to both <h2> and <h3> elements.

4. Name media types allowed by CSS.

Ans: The different media types allowed by CSS include:

  1. all – Suitable for all devices.

  2. print – Intended for paged material and documents viewed on a printed medium.

  3. screen – Intended primarily for screens (e.g., desktops, tablets, smartphones).

  4. speech – Intended for screen readers that read the content aloud.

  5. braille – For braille tactile feedback devices.

  6. embossed – For paged braille printers.

  7. handheld – Intended for handheld devices (largely deprecated).

  8. projection – For projected presentations (like slides).

  9. tty – For media using a fixed-pitch character grid, such as teletypes and terminals.

  10. tv – For television-type devices.

Notes:

  • Terms like audio, visual, grip media, and bitmap are not valid CSS media types.

  • Some older media types like handheld, tty, and tv are obsolete or rarely used in modern web development.

  • Modern CSS uses media features (like prefers-reduced-motion, color, hover, etc.) within @media queries to handle device capabilities rather than focusing solely on media types.

5. How can you use CSS to control image repetition?

Ans: The background-repeat property is used to control whether and how a background image repeats.
Example:

css
h3 {
background-image: url("example.jpg");
background-repeat: no-repeat;
}

Note:
Use no-repeat (not none) to prevent the background image from repeating.

6. Tell us about the property used for image scroll controlling.

Ans: The background-attachment property defines whether a background image stays fixed in place or scrolls along with the content.
Example (fixed background image):

css
body {
background-image: url('background.jpg');
background-attachment: fixed;
}

7. Name some font-related CSS attributes.

Ans: The font-related attributes include font-style, font-variant, font-weight, font-family, font-size, and others.

8. Define contextual selectors.

Ans: In CSS, contextual selectors allow developers to apply styles based on the relationship between elements in the document structure. Styles can be defined directly for specific HTML tags or created as reusable classes that are then assigned to elements.

9. Explain responsive web design.

Ans: Responsive Design is an approach to web development that utilizes flexible layouts, images, and CSS media queries to ensure optimal viewing experiences. It allows web pages to automatically adapt their layout and content based on the user’s screen size and orientation.

10. Tell us about the general CSS nomenclature.

Ans: In CSS, styling rules are written using property-value pairs. Each declaration ends with a semicolon and is enclosed within curly braces. These rules are associated with a selector, forming a style block that can be applied to elements in an HTML page.

11. What are the limitations of CSS?

Ans: CSS Limitations and Considerations:

  • CSS does not always ensure full compatibility across all browsers, so it’s important to choose style selectors carefully.

  • The parent selector is not supported in CSS, meaning you cannot select a parent element based on its child.

  • Some selectors may cause cross-browser inconsistencies due to limited support or differing behavior.

  • CSS cannot be used to make network requests or retrieve external web pages.

12. How to include CSS in the webpage?

Ans: You can add CSS styles to your HTML page in several ways:

  • External Style Sheet: Use a <link> tag in the <head> section to include an external CSS file.

  • Standalone CSS File: Write your CSS rules in a separate file and link it to your HTML using the <link> tag.

  • Inline CSS: Add styles directly to HTML elements using the style attribute.

  • @import Rule: Import another CSS file into an existing stylesheet using the @import rule.

13. What are the different types of Selectors in CSS?

Ans: 1. Universal Selector (*)

Selects all elements on the page.

css
* {
margin: 0;
padding: 0;
}

2. Element Type Selector (e.g., p, h1)

Selects all elements of a specific type.

css
p {
color: gray;
}

3. ID Selector (#id)

Targets a single unique element with the specified ID.

css
#header {
background-color: blue;
}

4. Class Selector (.class)

Selects all elements with a specified class.

css
.card {
border: 1px solid #ccc;
}

5. Descendant Combinator (space)

Selects elements that are nested inside another element.

css
div p {
font-size: 14px;
}

6. Child Combinator (>)

Selects elements that are a direct child of a specific parent.

css
ul > li {
list-style-type: square;
}

7. General Sibling Combinator (~)

Selects elements that are siblings and appear after a specified element.

css
h2 ~ p {
color: green;
}

8. Adjacent Sibling Combinator (+)

Selects the first sibling that comes immediately after a specified element.

css
h2 + p {
font-weight: bold;
}

9. Attribute Selector ([attr=value])

Targets elements with a specific attribute and value.

css
input[type="text"] {
border: 1px solid black;
}

14. What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?

Ans: CSS preprocessors are tools that extend the capabilities of standard CSS by allowing the use of advanced features like variables, functions, mixins, and nested rules within stylesheets.

  • Sass (Syntactically Awesome Style Sheets) uses the .sass extension and relies on indentation instead of curly braces and semicolons. It enhances readability and simplifies syntax.

  • Less (Leaner Style Sheets) uses the .less extension. It integrates easily with JavaScript projects via NPM or the less.js file. Variables in Less are declared using the @ symbol.

  • Stylus offers maximum flexibility in syntax. It supports both traditional CSS and minimal syntax—omitting braces, colons, and semicolons. Variables can be defined without needing @ or $.

Developers use Sass, Less, and Stylus to add structure, reusability, and maintainability to vanilla CSS.

15. What is VH/VW (viewport height/ viewport width) in CSS?

Ans: VH and VW are CSS units used in responsive design to represent a percentage of the viewport’s height (VH) and viewport’s width (VW), respectively.

  • 1VH equals 1% of the viewport height. For example, if the browser height is 1000px, then 1VH = 10px.

  • 1VW equals 1% of the viewport width. So if the browser width is 1200px, then 1VW = 12px.

These units allow elements to scale dynamically with the browser size, making them ideal for responsive layouts.

16. What is the Difference between reset vs normalized CSS? How do they differ?

Ans: Reset CSS removes all default browser styles such as padding, margin, and font sizes by applying a uniform baseline to all elements.

Normalize CSS preserves useful default styles but makes them consistent across different browsers and fixes browser-specific bugs.

17. What is the difference between inline, inline-block, and block?

Ans: Block elements such as <div> and <p> start on a new line and take up the full width available, stretching across the entire row.

Inline elements like <a>, <span>, <strong>, and <img> do not start on a new line. They appear on the same line as surrounding content and tags.

Inline-block elements behave like inline elements in that they appear on the same line, but unlike standard inline elements, they support setting width, height, padding, and margin.

18. Is it important to test the webpage in different browsers?

Ans: Yes, this is one of the most important steps when designing a webpage or making changes to it for the first time. Testing your website regularly across different browsers ensures compatibility, as browsers frequently update and may render pages differently.

19. What are Pseudo classes?

Ans: Pseudo-classes are not pseudo-elements but rather special keywords added to selectors that specify a particular state of the selected elements. They do not exist in the normal document tree but allow styling elements under specific conditions. Common pseudo-classes used with anchor (<a>) tags include :link, :visited, :hover, :active, and :focus.

For example, to change the text color of a link when the mouse hovers over it:

css
/* Mouse over link */
a:hover {
color: #FF00FF; /* Corrected hex code */
}

In this example, the anchor text turns magenta (#FF00FF) when hovered.

20. How do you specify units in the CSS? What are the different ways to do it?

Ans: CSS primarily uses four measurement units: px, em, pt, and percentage (%).

  • px (pixels): Used for precise control of layout and spacing. Ideal for sharp, fixed dimensions. Common values include 1px or multiples thereof.

  • em: A relative unit based on the font size of the parent element. By default, 1em = 16px in most browsers. For easier scaling, developers often set the base font size to 10px.

  • pt (points): A print-oriented unit where 1pt = 1/72 inch. Typically used in print stylesheets.

  • % (percentage): A relative unit that scales elements based on their parent. For font sizing, percentages are relative to the body’s font size, so setting a base body size is essential.

21. Does margin-top or margin-bottom have an effect on inline elements?

Ans: No, margin-top and margin-bottom generally do not affect inline elements, as these elements do not occupy vertical space in the normal flow.

22. What property is used for changing the font face?

Ans: The font-family property is used to specify the typeface (font) that should be applied to an element in the DOM, controlling how the text appears visually.

23. What are the differences between adaptive design and responsive design?

Ans: Adaptive Design

  • Focuses on developing a website with multiple fixed layout sizes.

  • Provides greater control over the design, allowing tailored layouts for different screen sizes.

  • Building an effective adaptive design is time-consuming and requires extensive effort, as it must account for various user environments and scenarios.

  • Commonly uses six standard screen widths: 320px, 480px, 760px, 960px, 1200px, and 1600px.

Responsive Design

  • Focuses on displaying content relative to the available browser space.

  • Offers less precise control over the layout compared to adaptive design.

  • Quicker to build and automatically adjusts to any screen size, eliminating layout issues.

  • Utilizes CSS media queries to adapt the layout based on device characteristics and viewport dimensions.

24. How are the CSS selectors matched against the elements by the browser?

Ans: Initially, the browser filters DOM elements based on key selectors, traversing them upward to identify matching parent elements. It then locates all <span> elements in the DOM and continues traversing their parent nodes to check for matches with <p> (paragraph) elements. Once all matching parent elements are identified, the matching process stops, and the browser applies a black color to the relevant content.

25. How is the border-box different from the content box?

Ans: Border boxes include the content, padding, and border when calculating the element’s total height and width. In contrast, content boxes are the default value for the box-sizing property, where only the content’s width and height are considered. Padding and border are added outside the defined dimensions, which can affect the final size of the element.

26. How is opacity specified in CSS3?

Ans: Opacity measures the transparency level of content, ranging from 0 (completely transparent) to 1 (fully opaque). A value of 1 means the content is completely opaque. However, in some older internet browsers, full opacity might not be supported directly. For example, if 60% opacity is applied to a <div> using the opacity property, and browser compatibility issues arise, you may need to use the filter property (as a polyfill) to achieve the same effect.

27. What is cascading in CSS?

Ans: Cascading refers to the process by which the browser determines which CSS style declarations to apply, based on their specificity, importance, and order of appearance.

28. When does DOM reflow occur?

Ans: DOM reflow occurs when elements in the DOM are inserted, moved, updated, removed, animated, or when page content and styles are modified.

29. Different Box Sizing Property?

Ans: content-box, padding-box, andborder-box

  1. width: 200px;
    padding: 20px;
    border: 10px solid;
    Box Model             Final Rendered Width
    content-box          200 + 40 + 20 = 260px
    padding-box         200 + 20 = 220px
    border-box            Exactly 200px total

30. How do you center align a div inside another div?

Ans: A div inside another div A is center aligned with the help of aligning div property to content via HTML script and CSS to the element in the DOM.

31. What is the grid system?

Ans: The CSS Grid system is a powerful layout technique for creating two-dimensional designs using both columns and rows.

32. What are the different ways to hide the element using CSS?

Ans: HTML or CSS element to use all three properties: display: none, visibility: hidden, and position: absolute. This can be useful for debugging or ensuring an element is fully hidden from both layout and accessibility (though combining all three is usually redundant).

CSS Example:

css
.hidden-element {
display: none;
visibility: hidden;
position: absolute;
}

HTML Example:

html
<div class="hidden-element">
This content is hidden.
</div>

Note:

  • display: none removes the element from the layout flow.

  • visibility: hidden hides the element but it still takes up space (not applicable if display: none is used).

  • position: absolute takes the element out of the normal flow and allows manual positioning, but with display: none, it won’t render anyway.

33. What does the: root pseudo-class refer to?

Ans: The :root pseudo-class is a CSS Level 3 selector that targets the highest-level parent element in the DOM, typically the <html> element.

34. What does Accessibility (a11y) mean?

Ans: Accessibility ensures that the system is usable by everyone, including individuals with physical disabilities. For example, the website should support text-to-speech functionality, implemented through suitable software or hardware solutions.

35. How do I restore the default value of a property?

Ans: The keyword initial is used to restore a CSS property to its default value as defined by the CSS specification.

36. Difference between CSS grid vs flexbox?0

Ans: CSS Grid Layout is a two-dimensional layout system that works with both rows and columns, making it ideal for creating large-scale layouts.

Flexbox is a one-dimensional layout system that works either in a row or a column, and is best suited for arranging components within an application.

37. How does Calc work?

Ans: can be used to perform mathematical operations between two or more values to determine a CSS property. For example, to specify the width of an element by adding two values, you can write:

css
.foo {
width: calc(100px + 50px);
}

38. What do CSS Custom properties variables mean?

Ans: CSS custom properties are user-defined variables that store specific values, allowing for reusable and cascading styles across a stylesheet.

39. What is the difference between CSS variables and pre-processor (SASS, LESS, Stylus) variables?

Ans: CSS variables don’t require a preprocessor. They follow the cascade, can be inherited, and are accessible and dynamically changeable via JavaScript.
In contrast, preprocessor variables (like in Sass or LESS) don’t cascade and are resolved at compile time, not at runtime.

40. What does * { box-sizing: border-box; } do? What are its advantages?

Ans: Box-sizing: When set to border-box, the element’s width and height include the content, padding, and border. This ensures the total size of the element stays within the specified dimensions, making layout calculations more predictable.

41. What does !important mean in CSS?

Ans: The !important style in CSS has the highest precedence and overrides any cascaded properties, regardless of specificity.

42. What is progressive rendering? How do you implement progressive rendering on the website? What are its advantages?

Ans: Progressive rendering is the process of improving webpage performance by speeding up content display. This includes implementing lazy loading for images using the Intersection Observer API, which loads images as they enter the viewport.

43. Does style1.css have to be downloaded and parsed before style2.css can be fetched?

Ans: No, the CSS file will be downloaded by the browser in order to render styles on the HTML page.

44. How to determine if the browser supports a certain feature?

Ans: The @supports rule in CSS is used to detect whether the browser supports a specific CSS feature or property.

45. How does absolute positioning work?

Ans: Absolute positioning is used to place an element independently of the normal document flow, meaning it does not occupy space in the layout. The element is positioned relative to the nearest positioned ancestor (an ancestor with a position other than static). If no such ancestor exists, it is positioned relative to the initial containing block (usually the viewport). The top, right, bottom, and left properties define the element’s final position.

46. Does this property work overflow: hidden?

Ans: The overflow: hidden property is used to clip the content that exceeds the container’s bounds, making it invisible. However, if we want to allow users to scroll and view the overflowing content, we should use overflow: auto or overflow: scroll instead. This ensures that scrollbars appear when the content exceeds the container size, rather than hiding it.