Loading…
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.
The position property changes how an element interacts with the document flow. Understanding the relationship between these three values is critical for layout design.
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 */
}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 Type | Score Value | Example |
|---|---|---|
| Inline Style | 1000 | style="color: red" |
| ID Selector | 100 | #navbar |
| Class / Pseudo-class | 10 | .btn, :hover |
| Element / Tag | 1 | div, 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.
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>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 (:).
:hover, :active (clicked), :focus (selected via keyboard).:first-child, :last-child, :nth-child(even).: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;
}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.
content property./* 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.
3 questions · no sign-up, nothing stored
Progress is stored in this browser only - no sign-up, nothing sent anywhere.