CSS Interview Questions

28 Questions
HTML & CSS

HTML & CSS

Web DevelopmentFrontend

Question 1

What is CSS?

Answer:

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. It enables the separation of content (HTML) from presentation (CSS), which improves the flexibility, accessibility, and maintainability of web documents.

Key Features of CSS

  1. Separation of Content and Presentation:

    • CSS allows the styling of web pages to be kept separate from the HTML structure. This makes it easier to maintain and update the style of a website without affecting its content.

  2. Styling:

    • CSS defines how HTML elements are displayed. It includes properties for layout, colors, fonts, spacing, and many other stylistic aspects.

  3. Selectors:

    • CSS selectors are used to target HTML elements and apply styles to them. Selectors range from simple element selectors to complex pseudo-class and pseudo-element selectors.

  4. Box Model:

    • The CSS box model describes the rectangular boxes generated for elements in the document tree and is key to layout. It includes properties like margins, borders, padding, and the actual content.

  5. Responsive Design:

    • CSS includes features such as media queries that allow for responsive design, enabling web pages to adapt to different screen sizes and devices.

  6. Cascading and Inheritance:

    • CSS rules can cascade, meaning that multiple styles can apply to the same element. The final appearance of an element is determined by the combination of these rules. Inheritance allows child elements to inherit styles from their parent elements.

  7. Flexbox and Grid Layouts:

    • CSS provides advanced layout modules like Flexbox and Grid, which make it easier to create complex layouts without the need for float or positioning hacks.

Basic Syntax

A CSS rule consists of a selector and a declaration block. The selector targets HTML elements, and the declaration block contains one or more declarations, each with a property and a value.

Example

/* CSS comment */
body {
    background-color: #f0f0f0;
    color: #333;
    font-family: Arial, sans-serif;
}

h1 {
    color: #0066cc;
}

p {
    margin: 20px 0;
    line-height: 1.6;
}
  • Selectors: body, h1, and p are selectors targeting HTML elements.
  • Declarations: Each declaration within the curly braces {} consists of a property (e.g., background-color, color) and a value (e.g., #f0f0f0, #333).

Types of CSS

  1. Inline CSS:

    • CSS can be applied directly within an HTML element using the style attribute.
    <p style="color: red;">This is a red paragraph.</p>

  2. Internal CSS:

    • CSS can be embedded within an HTML document inside a <style> tag in the <head> section.
    <head>
    <style>
        p { color: blue; }
    </style>
</head>

  3. External CSS:

    • CSS can be written in a separate file with a .css extension and linked to an HTML document using the <link> tag.
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Advanced Features

  1. Pseudo-Classes and Pseudo-Elements:

    • Pseudo-classes target elements based on their state (e.g., :hover, :focus).
    • Pseudo-elements target parts of elements (e.g., ::before, ::after).
    a:hover {
    color: red;
}

p::first-line {
    font-weight: bold;
}

  2. Media Queries:

    • Media queries allow you to apply styles based on the media type and conditions such as screen width, height, orientation, etc.
    @media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

  3. CSS Variables:

    • CSS variables (custom properties) allow you to store values that can be reused throughout a stylesheet.
    :root {
    --main-color: #06c;
}

h1 {
    color: var(--main-color);
}

Summary

  • CSS (Cascading Style Sheets): A stylesheet language used for describing the presentation of a document written in HTML or XML.
  • Key Features: Separation of content and presentation, styling, selectors, box model, responsive design, cascading and inheritance, flexbox, and grid layouts.
  • Syntax: Consists of selectors and declaration blocks containing properties and values.
  • Types: Inline CSS, internal CSS, and external CSS.
  • Advanced Features: Pseudo-classes, pseudo-elements, media queries, and CSS variables.

CSS is essential for creating visually appealing and well-structured web pages. By mastering CSS, developers can control the look and feel of websites, ensuring a better user experience.

Recent job openings