${t("loadingFallbackText")}
CSS (Cascading Style Sheets) is a stylesheet language that controls the visual presentation of HTML documents. While HTML defines the structure and content, CSS handles colors, typography, spacing, and layout. The "cascading" in CSS means rules can override each other based on specificity—allowing you to set defaults and then refine them for specific elements.
Introduced in 1996 to separate content from presentation, CSS enables one stylesheet to style multiple HTML pages, keeping design consistent and maintainable. Modern CSS includes powerful layout systems like Flexbox and Grid, custom properties (variables), and animations—all without JavaScript.
CSS uses selectors to target HTML elements and apply styles. The most common selector is the class selector (.classname), which targets elements with a specific class attribute. You can also use element selectors (p, div), ID selectors (#id), and combinators to select nested elements.
Properties define what aspect of the element to style. Common properties include color for text color, background for backgrounds, padding for internal spacing, and margin for external spacing. Each property accepts specific value types like colors, lengths, or keywords.
.button {
background: steelblue;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.button:hover {
background: darkslateblue;
}Every HTML element is rendered as a rectangular box with four distinct layers. The content area holds your text or images. padding creates space inside the element between the content and border. The border wraps around the padding. Finally, margin creates space outside the element, separating it from neighbors.
By default, width only sets the content width. Adding padding and border increases the total size. Use box-sizing: border-box to include padding and border in the declared width, making layouts much more predictable.
.card {
width: 300px;
padding: 1rem;
border: 2px solid gray;
margin: 1rem;
box-sizing: border-box;
}
/* Total width stays 300px */Flexbox is a one-dimensional layout system for arranging items in rows or columns. Apply display: flex to a container to enable it. Child elements become flex items that can grow, shrink, and align automatically.
Control alignment with justify-content (main axis: flex-start, center, space-between) and align-items (cross axis: stretch, center, flex-end). The gap property adds consistent spacing between items without margins.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.nav-links {
display: flex;
gap: 2rem;
}CSS Grid is a two-dimensional layout system for creating complex row and column layouts. Enable it with display: grid, then define columns using grid-template-columns. The repeat() function creates multiple tracks, and fr units distribute available space proportionally.
Grid excels at page layouts and card grids. Use grid-template-columns: repeat(3, 1fr) for three equal columns, or repeat(auto-fill, minmax(250px, 1fr)) for responsive columns that wrap automatically.
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.responsive-grid {
grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
}CSS supports multiple unit types for different use cases. Use px for fixed sizes, rem for scalable typography (relative to root font size), % for parent-relative sizing, and vh/vw for viewport-relative dimensions. Prefer rem for accessibility—it respects user font preferences.
CSS custom properties (variables) store reusable values. Define them with --name: value in :root for global access, then use them anywhere with var(--name). This makes themes and consistent design systems easy to maintain.
:root {
--primary: steelblue;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--radius: 8px;
}
.card {
background: var(--primary);
padding: var(--spacing-md);
border-radius: var(--radius);
}HTML (HyperText Markup Language) is not a programming language—it's a markup language that describes the structure and content of web documents. Invented by Tim Berners-Lee in 1989, HTML uses tags like <p>, <h1>, and <a> to define paragraphs, headings, and links. The browser reads this markup and renders it as a visual page.
HTML documents form a hierarchical tree called the DOM (Document Object Model). Elements have parent-child relationships: a <ul> contains <li> children, a <form> contains <input> elements. Modern HTML5 includes native interactive elements like <dialog>, <details>, and form validation—features that previously required JavaScript.
HTML5 introduced semantic elements that convey meaning about content structure. Use <header> for introductory content, <nav> for navigation links, <main> for primary content, <article> for self-contained compositions, <section> for thematic groupings, and <footer> for closing content.
Semantic markup improves accessibility—screen readers announce element roles. It also helps SEO as search engines better understand your content hierarchy. Replace generic <div> containers with appropriate semantic elements whenever possible.
<article>
<header>
<h1>Article Title</h1>
<time datetime="2024-01-15">
January 15, 2024
</time>
</header>
<p>Article content...</p>
<footer>
<p>Written by Author</p>
</footer>
</article>HTML forms collect user input with elements like <input>, <select>, <textarea>, and <button>. Always pair inputs with <label> elements using matching for and id attributes—this is crucial for accessibility and usability.
Native validation attributes eliminate JavaScript for common cases: required prevents empty submissions, type="email" validates email format, minlength/maxlength control text length, and pattern accepts custom regex patterns. The browser handles error messages automatically.
<form>
<label for="email">Email</label>
<input type="email" id="email"
name="email" required
placeholder="you@example.com">
<label for="phone">Phone</label>
<input type="tel" id="phone"
pattern="[0-9]{3}-[0-9]{4}">
<button type="submit">Send</button>
</form>Modern HTML includes powerful interactive components that work without JavaScript. The <details> element creates native accordions—click <summary> to toggle visibility. Add the open attribute to start expanded. Multiple details elements create FAQ-style interfaces instantly.
The <dialog> element creates accessible modal dialogs. Call .showModal() in JavaScript to open it with backdrop and focus trapping built-in. Use <datalist> with inputs to provide autocomplete suggestions from a predefined list.
<details>
<summary>What is HTML?</summary>
<p>HTML is the standard markup
language for web pages.</p>
</details>
<dialog id="confirm">
<h2>Confirm Action</h2>
<p>Are you sure?</p>
<button onclick="this.closest('dialog').close()">
Close
</button>
</dialog>Use <table> exclusively for tabular data, never for page layout. Structure tables with <thead> for header rows, <tbody> for data rows, and optionally <tfoot> for summaries. Mark header cells with <th> (not <td>) and add scope="col" or scope="row" for accessibility.
Lists come in three flavors: <ul> for unordered bullet lists, <ol> for numbered sequences, and <dl> for definition lists (term/description pairs). Nest lists for hierarchical content like navigation menus or category trees.
<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget</td>
<td>$9.99</td>
</tr>
</tbody>
</table>Tailwind CSS is a utility-first CSS framework that takes a radically different approach to styling. Instead of writing custom CSS classes like .card or .button, you compose designs using small, single-purpose utility classes directly in your HTML: class="p-4 bg-white rounded shadow".
This approach solves common CSS problems: no more specificity battles, no unused styles, no inventing class names. Tailwind's consistent spacing scale (p-1 through p-12), color palette (blue-500, gray-100), and responsive prefixes (md:, lg:) make building consistent, responsive interfaces fast and predictable.
Tailwind CSS uses small, single-purpose utility classes applied directly in HTML. Instead of writing .btn { background: blue; padding: 1rem; } in a stylesheet, you write class="bg-blue-500 p-4" on the element. Each class does exactly one thing, making styles predictable and composable.
This approach eliminates context-switching between HTML and CSS files. Common utilities include text-lg for font size, font-bold for weight, rounded for border radius, and shadow for box shadows. Hover states use the hover: prefix like hover:bg-blue-600.
<button class="bg-blue-500 text-white
px-4 py-2 rounded-lg
font-semibold shadow
hover:bg-blue-600
active:bg-blue-700">
Click me
</button>Tailwind's spacing scale is consistent and memorable. The pattern is simple: p-4 means padding of 1rem (16px), p-2 is 0.5rem, p-8 is 2rem. The same numbers work for margin (m-4), gap (gap-4), and space utilities. Use directional variants like px-4 (horizontal) or pt-2 (top only).
Width and height follow patterns too: w-full for 100%, w-1/2 for 50%, w-64 for fixed 16rem, h-screen for viewport height. Combine max-w-xl with mx-auto for centered containers with maximum widths.
<div class="max-w-xl mx-auto p-6">
<div class="space-y-4">
<div class="w-full h-32 bg-gray-200
rounded-lg">
Full width card
</div>
<div class="w-1/2 p-4 bg-gray-100">
Half width, padded
</div>
</div>
</div>Tailwind's layout utilities map directly to CSS flexbox and grid. Enable flex with flex, then control direction (flex-row, flex-col), alignment (items-center, justify-between), and wrapping (flex-wrap). The gap-4 utility adds consistent spacing between items.
For grid layouts, use grid with column definitions like grid-cols-3 for three equal columns or grid-cols-[200px_1fr] for custom track sizes. The col-span-2 utility makes items span multiple columns.
<nav class="flex justify-between
items-center p-4">
<a href="/" class="font-bold">Logo</a>
<ul class="flex gap-6">
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">Wide</div>
<div>Normal</div>
</div>Tailwind uses mobile-first responsive prefixes. Unprefixed utilities apply to all screen sizes. Add sm: (640px+), md: (768px+), lg: (1024px+), or xl: (1280px+) prefixes to apply styles at specific breakpoints and above.
Build responsive layouts by starting with mobile styles, then adding larger-screen overrides. For example, flex-col md:flex-row stacks items vertically on mobile and horizontally on medium screens. Use hidden md:block to show/hide elements at different sizes.
<div class="flex flex-col md:flex-row
gap-4 p-4">
<aside class="w-full md:w-64
bg-gray-100 p-4">
Sidebar (top on mobile)
</aside>
<main class="flex-1">
Main content
</main>
</div>
<p class="text-sm md:text-base lg:text-lg">
Responsive typography
</p>