Top CSS Interview Questions(2024)

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

    • Question: How do you apply CSS to an HTML document?

    Answer:

    There are three main ways to apply CSS to an HTML document: Inline CSS, Internal CSS, and External CSS. Each method has its use cases, advantages, and drawbacks.

    1. Inline CSS

    Inline CSS is used to apply CSS styles directly within an HTML element using the style attribute.

    Example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Welcome to Inline CSS</h1>
</body>
</html>
    • Pros: Quick and easy for small, one-off changes.
    • Cons: Difficult to maintain for larger projects, styles are scattered across the HTML elements.

    2. Internal CSS

    Internal CSS is placed within the <style> tags in the <head> section of the HTML document. It is used for styling a single document.

    Example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Welcome to Internal CSS</h1>
</body>
</html>
    • Pros: Convenient for styling a single HTML page, allows grouping of all styles in one place.
    • Cons: The styles are only applied to that specific document, and styles can become bloated if the page grows large.

    3. External CSS

    External CSS is the most common method, where CSS rules are placed in a separate .css file and linked to the HTML document using the <link> tag.

    Example:

    styles.css (External CSS file):

    /* styles.css */
body {
    background-color: lightgray;
}

h1 {
    color: red;
    text-align: center;
}

    HTML Document:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to the external CSS file -->
</head>
<body>
    <h1>Welcome to External CSS</h1>
</body>
</html>
    • Pros: Separation of concerns; CSS can be reused across multiple HTML pages, making it easier to maintain.
    • Cons: Requires an additional HTTP request to load the external file (can slightly increase page load time).

    Summary:

    • Inline CSS: Directly within an HTML element using the style attribute.
    • Internal CSS: Within a <style> block in the <head> of the HTML document.
    • External CSS: Linked to an HTML document through a separate .css file.

    Best Practice:

    • For large projects, external CSS is the most efficient and maintainable option, as it keeps styles separate from content and can be reused across multiple pages.

    Question: What are CSS media queries?

    Answer:

    CSS media queries are used to apply different styles to an HTML document based on the characteristics of the device or viewport, such as the width, height, orientation, resolution, and more. They are commonly used for responsive web design, where the layout and style of the page change dynamically depending on the screen size or device type.

    Syntax of Media Queries:

    A media query consists of the @media rule, followed by a condition (media feature) and the CSS styles that should be applied if that condition is met.

    General Syntax:

    @media (condition) {
    /* CSS rules here */
}

    Example:

    /* Default styles */
body {
    font-size: 16px;
    background-color: white;
}

/* Styles for screens wider than 600px (larger screens) */
@media (min-width: 600px) {
    body {
        font-size: 18px;
        background-color: lightblue;
    }
}

/* Styles for screens narrower than 600px (smaller screens) */
@media (max-width: 599px) {
    body {
        font-size: 14px;
        background-color: lightgray;
    }
}

    In this example:

    • The default styles apply to all screen sizes.
    • If the screen width is 600px or greater, the text size increases and the background changes to light blue.
    • If the screen width is less than 600px, the text size is reduced and the background changes to light gray.

    Common Media Query Features:

    • min-width: Targets devices with a minimum width (usually for responsive designs targeting larger screens).
    • max-width: Targets devices with a maximum width (typically used for mobile-first designs).
    • width / height: Specifies the width or height of the viewport.
    • orientation: Targets either portrait or landscape orientations.
    • resolution: Specifies the resolution of the device, typically used for high-DPI (dots per inch) screens (e.g., Retina displays).

    Example for Landscape and Portrait:

    /* For portrait orientation */
@media (orientation: portrait) {
    body {
        background-color: lightgreen;
    }
}

/* For landscape orientation */
@media (orientation: landscape) {
    body {
        background-color: lightcoral;
    }
}

    Mobile-first Design:

    In modern web development, it is common to follow a mobile-first approach. This means you start by writing the styles for small screens (mobile devices) and then use media queries to adjust the design for larger screens.

    Example:

    /* Mobile-first styles (default for small screens) */
body {
    font-size: 14px;
}

/* Tablet and larger devices */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* Desktop and larger devices */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}

    Summary:

    • CSS media queries are used to apply styles based on device characteristics (screen size, resolution, orientation, etc.).
    • They are fundamental in creating responsive web designs that adapt to different devices.
    • Media queries help improve usability and user experience across a wide range of devices, from mobile phones to desktops.

    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