CSS Introduction
Overview
Cascading Style Sheets (CSS) is the visual language of the web. If HTML provides the raw structural skeleton of a webpage, CSS is the skin, clothing, and makeup. It dictates everything from typography and colors to complex responsive layouts across mobile phones and desktop monitors. CSS works by selecting HTML elements and explicitly declaring how the browser's rendering engine should paint them on the screen.
Syntax
/* A standard CSS Rule consists of a Selector and a Declaration Block */
h1 {
/* Property: Value; */
color: #2563eb;
font-size: 32px;
text-align: center;
}Common Pitfalls
- Forgetting the semi-colon (
;) at the end of a declaration. If you omit the semi-colon, the browser's CSS parser breaks and ignores both the current rule and potentially the next rule, leading to bizarre visual bugs. - Using inline styles (e.g.,
<div style="color: red;">) heavily in production. While frameworks like React and Tailwind blur this line, writing raw inline styles manually makes your code impossible to maintain, caches poorly, and violates the separation of concerns.
Interview Questions
The 'Cascade' is the fundamental algorithm the browser uses to resolve conflicting CSS rules. If two rules target the exact same element (e.g., one says make it red, the other says make it blue), the Cascade uses Specificity, Source Order, and Importance to determine which rule wins.
Real-World Example
Linking an external CSS file to an HTML document.
<!-- Inside the <head> of your index.html -->
<link rel="stylesheet" href="/styles/main.css">Check Your Knowledge
Test your understanding of CSS Introduction with these quick questions.