StackScholar

CSS Interview Questions 1-5 (Positioning, Specificity, Basics)

Welcome to the CSS portion of your interview preparation! While Python powers the logic of your application, CSS (Cascading Style Sheets) is what makes it usable and human. Many backend developers underestimate CSS, which makes it a fantastic area for you to stand out.

In this lesson, we are going to tackle the topics that often trip up developers: the invisible logic of positioning and the mathematical rules of specificity. These aren't just about making things look pretty; they are about understanding how the browser rendering engine makes decisions.

1. What is the difference between relative, absolute, and fixed positioning?

The position property changes how an element interacts with the document flow. Understanding the relationship between these three values is critical for layout design.

  • Relative:
    The element remains in the normal document flow. When you move it (using top/left/right/bottom), it moves relative to its original position. Crucially, the space it originally occupied is preserved (it leaves a "ghost" behind). Other elements do not shift to fill the gap.
  • Absolute:
    The element is removed from the normal document flow. The space it occupied collapses. It positions itself relative to its closest positioned ancestor(a parent with position set to anything other than static). If no parent is positioned, it defaults to the body/html.
  • Fixed:
    Like absolute, it is removed from the flow. However, it positions itself relative to the browser viewport (window). It stays in the exact same spot on the screen even when the user scrolls the page (like a sticky navigation bar or a "Back to Top" button).

Here is a practical comparison to help you visualize the difference.

/* 1. Relative: Moves down/right, but keeps its seat reserved */
.box-relative {
  position: relative;
  top: 20px;
  left: 20px;
}

/* 2. Absolute: Flies out of the flow, usually inside a 'relative' parent */
.parent {
  position: relative; /* The anchor */
}
.child-absolute {
  position: absolute;
  top: 0;
  right: 0; /* Sticks to the top-right of .parent */
}

/* 3. Fixed: Stuck to the screen glass */
.navbar-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensures it floats above everything */
}

2. Explain CSS specificity rules.

Specificity is the set of rules the browser uses to decide which style applies when multiple rules target the same element. It is essentially a score calculation. If two selectors conflict, the one with the higher score wins.

The Hierarchy (from highest score to lowest):

Selector TypeScore ValueExample
Inline Style1000style="color: red"
ID Selector100#navbar
Class / Pseudo-class10.btn, :hover
Element / Tag1div, h1

Calculation Example:

  • div p = 1 + 1 = 2
  • .container p = 10 + 1 = 11 (Winner vs div p)
  • #main .content p = 100 + 10 + 1 = 111 (Winner)

The Nuclear Option: The !important declaration overrides all specificity calculations. However, it is considered bad practice because it makes debugging extremely difficult. Use it only as a last resort.

3. Difference between inline, internal, and external CSS.

This question asks about the three ways to insert a style sheet into an HTML document. Interviewers want to know if you understand scalability and maintainability.

1. Inline CSS:
Written directly inside the HTML element using the style attribute.
- Pros: Quick testing, highest specificity (1000).
- Cons: Terrible maintainability, no code reuse, creates messy HTML.

2. Internal CSS:
Written inside a <style> tag within the HTML <head>.
- Pros: Good for single-page templates (like emails) where external files can't be loaded.
- Cons: Cannot share styles across multiple pages.

3. External CSS:
Written in a separate .css file and linked via the <link> tag.
- Pros: The industry standard. Keeps HTML clean, allows caching (faster load times), and enables one file to style the entire website.
- Cons: Requires an extra HTTP request (usually negligible).

<p style="color: red;">Hello</p>

<head>
  <style>
    p { color: blue; }
  </style>
</head>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

4. What are CSS pseudo-classes?

A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. It is not about "what" the element is, but "how" the user is interacting with it or "where" it is in the list.

They are always prefixed with a single colon (:).

  • User Action: :hover, :active (clicked), :focus (selected via keyboard).
  • Tree Structure: :first-child, :last-child, :nth-child(even).
  • Form State: :checked, :disabled, :invalid.
/* Change color when mouse is over the button */
button:hover {
  background-color: blue;
}

/* Style every even row in a table */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Style input when user clicks into it */
input:focus {
  border: 2px solid green;
}

5. What are CSS pseudo-elements?

While pseudo-classes style a state of an existing element, pseudo-elements allow you to style a specific part of an element, or generate new content that doesn't exist in the HTML.

They are technically prefixed with double colons (::) in CSS3 to distinguish them from pseudo-classes, though single colons often still work for backward compatibility.

  • ::before and ::after: Insert cosmetic content before/after the element. Requires the content property.
  • ::first-line: Styles only the first line of a paragraph.
  • ::first-letter: Styles the first letter (drop cap effect).
  • ::placeholder: Styles the placeholder text in an input field.
/* Add a graphical arrow after every link */
a::after {
  content: " →";
  color: grey;
}

/* Make the first letter of a blog post giant */
p.intro::first-letter {
  font-size: 200%;
  color: purple;
}

Sample Output behavior:
If you have a link <a>Read More</a>, the CSS above will make it look like "Read More →" on the screen, even though the arrow is not in your HTML text.

PreviousNext
🚀 Deep Dive With AI Scholar