CSS (Cascading Style Sheets) transforms raw HTML nodes into structured graphical layouts. When multiple CSS rules target the same element, the browser resolves conflicts using the Cascade Algorithm based on three criteria: Importance (e.g., !important), Specificity, and Source Order (later rules override earlier ones).
The Specificity Weight Tuple (Inline, ID, Class/Attribute/Pseudo-class, Element/Pseudo-element):
style="color: red;"). Highest normal priority.#nav. High specificity; use sparingly to avoid selector locking..btn, [type="text"], or :hover. The workhorse of modern scalable CSS.h1, p, div, ::before. Lowest specificity weight.* matches all nodes with zero specificity contribution.Crucial Rule: Specificity is not base-10! Ten classes (0,0,10,0) will NEVER override a single ID (0,1,0,0).
/* Specificity: (0, 0, 0, 1) - Element only */
button { background-color: #94a3b8; color: #ffffff; }
/* Specificity: (0, 0, 1, 1) - 1 Class + 1 Element */
button.btn-primary { background-color: #3b82f6; }
/* Specificity: (0, 1, 1, 1) - 1 ID + 1 Class + 1 Element -> WINS! */
#hero-section button.btn-primary { background-color: #1d4ed8; }
/* Combinator Selectors:
A B -> Descendant (any level deep)
A > B -> Direct Child (immediate child only)
A + B -> Adjacent Sibling (immediately follows)
A ~ B -> General Sibling (any sibling following) */
nav > ul > li { display: inline-block; }
h2 + p { font-size: 15px; font-weight: 500; }• Modern Color Models:
- Hexadecimal: #3b82f6 (Red, Green, Blue in base-16).
- RGB / RGBA: rgb(59 130 246 / 0.8) (Channel levels 0-255 + Alpha channel transparency 0 to 1).
- HSL / HSLA: hsl(217deg 91% 60%) (Hue [0-360°], Saturation [0-100%], Lightness [0-100%]). Highly recommended for programmatic palette generation.
• Backgrounds: Multiple layered backgrounds, gradients (linear-gradient(), radial-gradient()), background-size: cover | contain, and fixed parallax backgrounds.
• Typography:
- System Font Stacks vs. Web Fonts: @font-face downloads WOFF2 compressed binary glyphs from servers or CDNs (Google Fonts).
- Font Units: px (absolute pixels), rem (root em: relative to root <html> font-size—essential for accessibility zooming), and em (relative to current parent element font-size).
- Vertical Rhythm: line-height (recommended 1.5–1.7 for body text readability) and letter-spacing.
.glass-card {
/* Layered linear gradient with HSL alpha backdrop */
background: linear-gradient(135deg, hsla(217, 91%, 60%, 0.15), hsla(270, 90%, 65%, 0.05));
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
/* Typography Best Practices */
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem; /* 16px scalable root reference */
line-height: 1.65; /* Unitless proportional leading */
letter-spacing: -0.01em; /* Modern optical kerning */
color: #0f172a;
}Every element rendered on a screen is treated by the browser engine as a rectangular box consisting of four concentric layers from outside to inside:
width and height.The box-sizing Revolution:
• box-sizing: content-box (Browser Default): Total Width = width + padding-left + padding-right + border-left + border-right. Adding padding expands the element and breaks grid layouts!
• box-sizing: border-box (Industrial Standard): Total Width = declared width. Padding and borders are absorbed inward, keeping dimensions predictable.
Industry Best Practice: Apply *, *::before, *::after { box-sizing: border-box; } universally across all projects.
• Display Property:
- block: Takes 100% available container width, begins on a new line (e.g., <div>, <p>). Respects width, height, margin, and padding.
- inline: Sits within text flow; takes only content width (e.g., <span>, <a>). Ignores width, height, and vertical margins.
- inline-block: Flows horizontally like inline text, but respects width, height, and vertical margins.
- none: Removes node completely from visual DOM rendering (distinct from visibility: hidden which retains physical layout space).
• The 5 Positioning Schemes (position):
static (Default): Normal document flow; offsets (top, left, z-index) have NO effect.relative: Remains in normal flow, but offset relative to its original resting position without disturbing surrounding elements. Acts as the coordinate anchor for absolute descendants.absolute: Removed entirely from normal flow. Positioned relative to its nearest positioned ancestor (an ancestor with position other than static).fixed: Removed from flow and locked strictly relative to the browser viewport. Remains immobilized during page scroll.sticky: Hybrid behavior; behaves as relative within its parent container until reaching a viewport scroll threshold (e.g., top: 0), where it sticks like fixed until the parent ends.Flexbox (Flexible Box Layout) is designed for 1-dimensional layouts (arranging elements along a single row OR single column at a time):
display: flex: Turns the element into a flex container and its direct children into flex items.flex-direction: row | column.row: Main Axis is horizontal (left $\rightarrow$ right); Cross Axis is vertical (top $\rightarrow$ bottom).column: Main Axis is vertical; Cross Axis is horizontal.justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly.align-items: stretch | flex-start | center | flex-end | baseline.flex: <flex-grow> <flex-shrink> <flex-basis>.flex-grow: Factor determining how remaining free space is distributed.flex-shrink: Factor determining how item contracts when space overflows.flex-basis: Initial ideal dimension before space distribution (e.g., 250px or auto)..navbar {
display: flex;
justify-content: space-between; /* Spreads brand left and links right */
align-items: center; /* Centers items on cross-axis */
padding: 1rem 2rem;
}
.cards-row {
display: flex;
flex-wrap: wrap; /* Wraps cards to next line on small screens */
gap: 1.5rem; /* Clean uniform gutters between flex items */
}
.card-item {
flex: 1 1 280px; /* grow: 1, shrink: 1, base width: 280px */
}While Flexbox solves 1-D flow, CSS Grid coordinates true 2-dimensional layouts controlling rows and columns simultaneously:
display: grid: Enables grid formatting context on container.fr): Represents a fraction of available space inside the grid container (e.g., 1fr 2fr splits space into 1/3 and 2/3).grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));grid-template-areas..dashboard-grid {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 70px 1fr 50px;
grid-template-areas:
"sidebar header"
"sidebar content"
"sidebar footer";
min-height: 100vh;
gap: 16px;
}
.aside-nav { grid-area: sidebar; }
.top-bar { grid-area: header; }
.main-body { grid-area: content; }
.bottom-bar { grid-area: footer; }Responsive Web Design (RWD) ensures layouts adapt fluidly across mobile phones, tablets, laptops, and ultra-wide desktop monitors.
min-width media queries to progressively enhance the layout as viewport screen real estate widens.@media (min-width: 640px): Small tablets / large smartphones.@media (min-width: 768px): Tablets portrait / iPad standard.@media (min-width: 1024px): Laptops and desktop screens.@media (min-width: 1280px): Large high-resolution monitors.font-size: clamp(1.2rem, 2.5vw, 2.5rem);/* 1. Base Mobile Styles (Default: Single column) */
.layout-container {
display: flex;
flex-direction: column;
padding: 1rem;
}
/* 2. Tablet Enhancement (>= 768px) */
@media (min-width: 768px) {
.layout-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
gap: 1.5rem;
}
}
/* 3. Desktop Enhancement (>= 1024px) */
@media (min-width: 1024px) {
.layout-container {
grid-template-columns: 280px 1fr 320px; /* 3 columns on desktop */
max-width: 1200px;
margin: 0 auto;
}
}Unlike preprocessor variables (Sass/SCSS) which compile away into static values at build time, native CSS Custom Properties live inside the browser DOM at runtime:
--brand-color: #3b82f6;).:root to be globally inherited by all elements.color: var(--brand-color, #000000);.[data-theme="dark"] attribute recalculates colors across 10,000 components in a single repaint frame without rewriting selector rules!/* Global Light Mode Defaults */
:root {
--bg-canvas: #ffffff;
--text-primary: #0f172a;
--accent-color: #3b82f6;
}
/* Instant Dark Mode Override */
[data-theme="dark"] {
--bg-canvas: #0f172a;
--text-primary: #f8fafc;
--accent-color: #60a5fa;
}
body {
background-color: var(--bg-canvas);
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}Smooth 60 FPS / 120 FPS web animations require understanding browser rendering stages:
width, height, margin, top forces the browser to recalculate element geometry across the whole page!color, background recalculates pixel rasterization.transform (translate, scale, rotate) and opacity bypasses both Layout and Paint, delegating rendering directly to the device GPU compositor thread!transition: Smooth interpolation between an initial state and a triggered state (e.g., on :hover).@keyframes: Multi-stage self-running animation cycles with granular percentage keyframes (0% to 100%)./* 1. Hardware Accelerated Hover Button */
.animated-btn {
background-color: #3b82f6;
color: #ffffff;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
.animated-btn:hover {
transform: translateY(-3px) scale(1.02); /* GPU Composite */
box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);
}
/* 2. Infinite Pulsing Radar Keyframes */
@keyframes pulseRadar {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
.radar-ring {
animation: pulseRadar 1.8s infinite cubic-bezier(0.25, 1, 0.5, 1);
}• Pseudo-Classes (Single Colon :): Target an element during a specific dynamic state or position in DOM hierarchy:
- User Action: :hover (pointer hovered), :active (mouse button pressed down), :focus-visible (keyboard tab focus ring).
- Structural Position: :first-child, :last-child, :nth-child(2n) (targets even rows in tables), :not(.disabled).
• Pseudo-Elements (Double Colon ::): Create and insert virtual cosmetic nodes into the DOM tree without modifying HTML markup:
- ::before: Injects virtual child node immediately before element content. Requires content: "" to render.
- ::after: Injects virtual child node immediately after element content. Commonly used for decorative underlines, tooltips, or clearfix.
- ::placeholder: Styles input placeholder text.
- ::selection: Styles text highlighted by the user's cursor drag.
/* 1. Animated Decorative Underline using ::after */
.nav-link {
position: relative;
text-decoration: none;
color: #0f172a;
}
.nav-link::after {
content: ""; /* Mandatory for pseudo-elements */
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background-color: #3b82f6;
transform: scaleX(0); /* Hidden by default */
transform-origin: bottom right;
transition: transform 0.3s ease;
}
.nav-link:hover::after {
transform: scaleX(1); /* Expands smoothly across width */
transform-origin: bottom left;
}
/* 2. Zebra Striping Table Rows with :nth-child */
tbody tr:nth-child(even) {
background-color: #f8fafc;
}The following production stylesheet integrates all Unit 3 concepts: CSS custom properties (theming), modern box model resets, Flexbox navigation, 2-D responsive auto-fit CSS Grid, GPU-accelerated micro-interactions, and mobile-first media queries.
/* ========================================================
DEVASCENT DESIGN SYSTEM — CORE TOKENS & RESET
======================================================== */
:root {
--primary: #3b82f6;
--primary-glow: rgba(59, 130, 246, 0.25);
--card-bg: #ffffff;
--card-border: #e2e8f0;
--text-main: #0f172a;
--text-muted: #64748b;
--radius-lg: 12px;
}
/* 1. Global Box-Sizing & Margin Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 2. App Container (Flexbox & Responsive Shell) */
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--card-border);
}
/* 3. Responsive 2D Auto-Fit Grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
padding: 1.5rem;
}
/* 4. Metric Card with GPU Transitions */
.metric-card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: 1.25rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
}
.metric-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -6px var(--primary-glow);
}
/* 5. Mobile-First Media Query Overrides */
@media (max-width: 640px) {
.metrics-grid {
grid-template-columns: 1fr; /* Stacks into 1 column on phones */
padding: 1rem;
}
}content-box (the default), declared width and height only apply to the content area; any padding and borders are added on top, increasing the element's actual rendered footprint. In border-box, padding and borders are absorbed inside the declared width and height, preventing unintended layout breakage.
(Inline, ID, Class/Attribute/Pseudo-class, Element/Pseudo-element). A selector with a higher category weight always overrides lower categories regardless of count (e.g., 1 ID beats 20 classes). If specificity scores are identical, the tie is broken by Source Order (the rule declared later in the stylesheet wins).
position: absolute is positioned relative to its closest non-static ancestor and scrolls with the page, whereas position: fixed is positioned strictly relative to the browser viewport and remains stationary during page scrolling.
left or height triggers expensive CPU Layout (Reflow) and Paint cycles across the document. In contrast, transform and opacity can be offloaded to the device GPU compositor layer, running smoothly at 60 FPS without recalculating layout geometry.
:hover, :focus) targets an existing element in a specific dynamic state or structural position. A pseudo-element (double colon, e.g., ::before, ::after) creates a virtual cosmetic node that does not physically exist in the HTML document.