Interactive First-Principles Rendering Engine
CSS Selectors are patterns used to select HTML elements for styling. The browser evaluates selector specificity to decide which rule wins when multiple rules match the same element.
Three ways to apply CSS (priority order):<div style="color:red"> — highest priority<style> block in <head>.css file via <link> — best practice| Selector | Example | Targets | Specificity |
|---|---|---|---|
| Element | div { } | All <div> elements | 0,0,1 |
| Class | .btn { } | Elements with class="btn" | 0,1,0 |
| ID | #header { } | Element with id="header" | 1,0,0 |
| Descendant | div p { } | <p> inside <div> | 0,1,2 |
| Child | div > p { } | Direct <p> child of <div> | 0,1,2 |
| Adjacent Sibling | h2 + p { } | <p> immediately after <h2> | 0,1,2 |
| Attribute | [type="text"] { } | Elements with type="text" | 0,1,0 |
| Pseudo-class | a:hover { } | Links on hover | 0,1,0 |
| Pseudo-element | p::first-line { } | First line of <p> | 0,0,1 |
| Universal | * { } | Every element | 0,0,0 |
Specificity is computed as a 3-part value: (ID count, Class count, Element count). Inline styles always win. !important overrides everything (use sparingly).
box-sizing Confusion
By default (content-box), width only sets the content width — padding and border add to it. A width:200px div with padding:20px + border:5px is actually 250px wide. Use box-sizing: border-box to include padding and border in the declared width.
content-box: width = content only. border-box: width = content + padding + border.
/* CSS for Box Model Visual */
#targetBox {
background-color: #3b82f6;
color: white;
font-weight: bold;
padding: 20px;
border: 5px solid #fde047;
width: 150px;
margin: 20px;
box-sizing: content-box;
}
/* JavaScript to update values on slider change */
function updateBox() {
const pad = document.getElementById('padInput').value;
const brd = document.getElementById('brdInput').value;
const mar = document.getElementById('marInput').value;
const wid = document.getElementById('widInput').value;
document.getElementById('padVal').innerText = pad + 'px';
document.getElementById('brdVal').innerText = brd + 'px';
document.getElementById('marVal').innerText = mar + 'px';
document.getElementById('widVal').innerText = wid + 'px';
const target = document.getElementById('targetBox');
const useBorderBox = document.getElementById('boxSizingToggle').checked;
target.style.padding = pad + 'px';
target.style.borderWidth = brd + 'px';
target.style.width = wid + 'px';
target.style.margin = mar + 'px';
target.style.boxSizing = useBorderBox ? 'border-box' : 'content-box';
}Toggle between unstyled HTML and the same HTML with CSS applied. This demonstrates why CSS is essential for visual design.
Name: John Doe | Branch: CSE | Semester: 5
CSS provides multiple ways to specify colors: named colors, HEX, RGB, RGBA, HSL, HSLA. The background property is a shorthand for background-color, image, repeat, position, and size.
font-family — Typeface (e.g., system-ui, serif, monospace)
font-size — Size in px, em, rem, %
font-weight — Thickness (normal: 400, bold: 700)
line-height — Vertical spacing between lines
text-align — left, center, right, justify
text-decoration — underline, line-through, none
display: Changes the fundamental behavior of the node (block, inline, none).float: Removes the element from normal flow, pushing it left or right. Text wraps around it.clear: Forces an element to drop below any floated elements (resolves layout breaking).overflow: Dictates what happens when content is larger than its parent container's dimensions.<!-- HTML Structure -->
<div class="layout-stage">
<span>Some preceding inline text. </span>
<div class="layout-item" id="interactiveLayoutBox">TARGET ELEMENT</div>
<span> This is subsequent text. </span>
<div style="clear: both;">...</div>
</div>
/* CSS Display Property Values */
/* block - full width, starts on new line */
/* inline - content width, flows inline */
/* inline-block - flows inline, respects width/height */
/* none - removed from layout */
/* JavaScript to switch display/float */
function updateLayout() {
const target = document.getElementById('interactiveLayoutBox');
const displayVal = document.querySelector('input[name="display"]:checked').value;
const floatVal = document.querySelector('input[name="float"]:checked').value;
target.style.display = displayVal;
target.style.float = floatVal;
}Grid handles rows AND columns simultaneously. Define a grid container with display: grid, then place items using grid-template:
.dashboard {
display: grid;
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
Items can span multiple tracks:
.sidebar { grid-row: 1 / -1; } /* Full height */
.header { grid-column: 2 / -1; } /* Span remaining columns */
Flexbox handles a single axis (row OR column). Use it for navigation bars, card rows, centering:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.nav a:last-child { margin-left: auto; } /* Push to right */
Unlike media queries that respond to the viewport, container queries respond to a parent element's size. This enables truly reusable components:
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { flex-direction: row; }
}
Browser support for container queries is over 90% as of 2025. Use them instead of media queries for component-level responsiveness.