Top CSS Interview Questions(2025)

author image Hirely
at 07 Jan, 2025
  • Software Development
  • Questions

    • Question: What is the difference between em and rem in CSS?

    Answer:

    Both em and rem are relative units of measurement in CSS, typically used for font sizes, margins, padding, and other spacing properties. They allow for scalable and responsive designs, but they differ in terms of what they are relative to.

    1. em (Relative to Parent Element’s Font Size)

    • The em unit is **relative to the font size of the current element or its parent element.
    • When you set a property value in em, it is calculated relative to the font size of the parent element (or the element itself if no parent value is provided).
    Example of em:
    /* Base font size of the body is 16px */
body {
    font-size: 16px;
}

/* This element's font size will be 2 times the parent's font size (16px * 2 = 32px) */
h1 {
    font-size: 2em;
}

/* This element's font size will be 1.5 times the font size of its parent (32px * 1.5 = 48px) */
h2 {
    font-size: 1.5em;
}

    In the example above:

    • The h1 element has a font size of 32px (2 * 16px).
    • The h2 element has a font size of 48px (1.5 * 32px).

    2. rem (Relative to Root Element’s Font Size)

    • The rem unit is **relative to the font size of the root element (<html>).
    • By default, the font size of the <html> element is often set to 16px, but it can be changed. When you use rem, you are always calculating based on the root’s font size.
    Example of rem:
    /* Base font size of the root element (html) is 16px */
html {
    font-size: 16px;
}

/* This element's font size will be 2 times the root font size (16px * 2 = 32px) */
h1 {
    font-size: 2rem;
}

/* This element's font size will be 1.5 times the root font size (16px * 1.5 = 24px) */
h2 {
    font-size: 1.5rem;
}

    In the example above:

    • The h1 element has a font size of 32px (2 * 16px), based on the root element’s font size.
    • The h2 element has a font size of 24px (1.5 * 16px), again based on the root element’s font size.

    Key Differences:

    1. Reference Point:

      • em is relative to the parent element’s font size.
      • rem is relative to the root element’s font size (typically <html>).

    2. Cascading Effect:

      • em values are affected by the font size of the parent element, which means they can cascade and compound as you move deeper into the DOM.
      • rem is not affected by parent elements. It always uses the root element’s font size as the base, making it more predictable and easier to manage for consistency.

    3. Use Case:

      • Use em when you want the font size or spacing to scale relative to its parent or the current element’s font size. This can be useful for nested components where each element scales relative to the parent.
      • Use rem when you want more uniformity and consistency in your design, since it will always be based on the root element’s font size.

    Example of Differences in Cascading:

    /* Root font size is 16px */
html {
    font-size: 16px;
}

/* Body font size is 2em (relative to html, so 16px * 2 = 32px) */
body {
    font-size: 2em;
}

/* This element's font size will be 1.5em, so 32px * 1.5 = 48px */
h1 {
    font-size: 1.5em;
}

/* This element's font size will be 2rem (16px * 2 = 32px, no matter the body size) */
h2 {
    font-size: 2rem;
}

    In this example:

    • h1 will be 48px because it is based on body’s font-size of 32px.
    • h2 will be 32px because it is based on the root element’s font-size of 16px.

    Summary:

    • em is relative to the parent element’s font size, which can cause compounding effects as you nest elements.
    • rem is relative to the root element’s font size and is more predictable for consistent scaling across the entire document.

    Question: What is the purpose of CSS Flexbox?

    Answer:

    CSS Flexbox (short for Flexible Box Layout) is a layout model designed to provide a more efficient way to arrange elements within a container, especially when dealing with dynamic and responsive designs. It allows items within a container to be aligned, distributed, and resized in a more flexible manner than traditional layout methods like float or inline-block.

    Flexbox is particularly useful when you need to:

    1. Distribute space dynamically between items.
    2. Align items (vertically and horizontally) with ease.
    3. Create responsive layouts that adjust to various screen sizes.
    4. Control the size of items depending on the available space.

    Key Features of Flexbox:**

    1. Flex Container:

      • The parent element of the flex items is called the flex container. It’s defined using display: flex; or display: inline-flex;.
      • The flex container controls the layout of its children (flex items), distributing space and aligning them accordingly.

    2. Flex Items:

      • The direct children of a flex container are called flex items. These items are automatically arranged in a row or column depending on the container’s settings.

    3. Main Axis and Cross Axis:

      • Flexbox works by defining two axes:
        • Main Axis: The axis along which flex items are laid out. By default, it’s horizontal (row), but you can change it to vertical (column) using flex-direction.
        • Cross Axis: The axis perpendicular to the main axis (vertical if the main axis is horizontal, and vice versa).

    4. Flexbox Properties:

      • For the Flex Container:

        • display: flex; or display: inline-flex; (defines the flex container).
        • flex-direction: Specifies the direction of the main axis (row, column, row-reverse, column-reverse).
        • justify-content: Aligns items along the main axis (flex-start, flex-end, center, space-between, space-around).
        • align-items: Aligns items along the cross axis (flex-start, flex-end, center, baseline, stretch).
        • align-content: Aligns multiple lines of items (when wrapping) along the cross axis.
        • flex-wrap: Determines whether items should wrap onto new lines (nowrap, wrap, wrap-reverse).

      • For the Flex Items:

        • flex-grow: Defines the ability for an item to grow relative to the other items if there’s extra space.
        • flex-shrink: Defines the ability for an item to shrink relative to other items if there’s not enough space.
        • flex-basis: Defines the initial size of an item before any growing or shrinking.
        • flex: A shorthand for setting flex-grow, flex-shrink, and flex-basis in one property.
        • align-self: Allows an individual flex item to override the align-items property and align itself independently.

    Advantages of Using Flexbox:

    • Alignment and Centering: Flexbox makes it easy to align and center items both vertically and horizontally without requiring complex CSS tricks.
    • Flexible Layouts: Flexbox is ideal for responsive designs where you want elements to automatically adjust to the available space.
    • No More Floating Elements: Flexbox eliminates the need for using float for layout purposes, simplifying the structure and avoiding common layout issues.
    • Automatic Distribution of Space: Flexbox allows for dynamic resizing of elements based on the available space, making it perfect for adaptive interfaces.

    Example of Flexbox Layout:

    .container {
  display: flex;
  justify-content: space-between; /* Distribute items evenly */
  align-items: center; /* Vertically center items */
}

.item {
  flex: 1; /* Each item takes up equal space */
}

    In the example:

    • The .container is a flex container with its items aligned using justify-content and align-items.
    • The .item elements are flex items that each take up equal space within the container, due to the flex: 1; declaration.

    Summary:

    The purpose of CSS Flexbox is to provide an efficient and flexible way to create complex layouts and align elements without relying on traditional layout methods like floats or positioning. Flexbox enables responsive designs by allowing items to adapt based on the available space and provides simple and effective tools for aligning and distributing content within a container.

    Read More

    If you can’t get enough from this article, Aihirely has plenty more related information, such as CSS interview questions, CSS interview experiences, and details about various CSS job positions. Click here to check it out.

    Tags
    Share

    Related Posts

    Trace Job opportunities

    Hirely, your exclusive interview companion, empowers your competence and facilitates your interviews.

    Get Started Now