Reference Guide

HTML5 & CSS Reference Guide

HTML5 Document Structure
Semantic HTML5 Elements
Common HTML Elements
HTML Forms
HTML Tables
Multimedia Elements
CSS Basics
CSS Selectors
CSS Box Model
CSS Display & Position
Flexbox
CSS Grid
Responsive Design
Accessibility
Common Patterns
Troubleshooting Guide

HTML5 Document Structure

Basic Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Essential Meta Tags

<!-- Character encoding - ALWAYS include first -->
<meta charset="UTF-8">

<!-- Viewport for responsive design - REQUIRED -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Page description for SEO -->
<meta name="description" content="Brief page description">

<!-- Author -->
<meta name="author" content="Your Name">

Linking Resources

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<!-- External JavaScript -->
<script src="script.js" defer></script>

Semantic HTML5 Elements

Page Structure

<header>     <!-- Site/page header -->
<nav>        <!-- Navigation links -->
<main>       <!-- Main content (only ONE per page) -->
<article>    <!-- Self-contained content -->
<section>    <!-- Thematic grouping -->
<aside>      <!-- Sidebar/related content -->
<footer>     <!-- Site/page footer -->

Complete Example

<body>
    <header>
        <h1>Site Title</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Article content...</p>
        </article>
        
        <aside>
            <h3>Related Links</h3>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2026 Your Name</p>
    </footer>
</body>

Other Semantic Elements

<figure>         <!-- Self-contained content (images, diagrams) -->
    <img src="photo.jpg" alt="Description">
    <figcaption>Caption text</figcaption>
</figure>

<time datetime="2026-01-24">January 24, 2026</time>
<mark>Highlighted text</mark>
<details>
    <summary>Click to expand</summary>
    <p>Hidden content</p>
</details>

Common HTML Elements

Text Elements

<!-- Headings (h1 most important, h6 least) -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

<!-- Paragraphs and breaks -->
<p>Paragraph text</p>
<br>  <!-- Line break -->
<hr>  <!-- Horizontal rule -->

<!-- Text formatting -->
<strong>Important text (bold)</strong>
<em>Emphasized text (italic)</em>
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

<!-- Code and preformatted -->
<code>const x = 10;</code>
<pre>Preserves    spaces
and line breaks</pre>

<!-- Quotations -->
<blockquote>Long quotation</blockquote>
<q>Short inline quote</q>

Lists

<!-- Unordered List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

<!-- Description List -->
<dl>
    <dt>Term</dt>
    <dd>Definition</dd>
</dl>

<!-- Nested Lists -->
<ul>
    <li>Item 1
        <ul>
            <li>Sub-item 1.1</li>
            <li>Sub-item 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

Links

<!-- Basic link -->
<a href="https://example.com">Link Text</a>

<!-- Link to another page -->
<a href="about.html">About Us</a>

<!-- Link to section on same page -->
<a href="#section-id">Jump to Section</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank">External Link</a>

<!-- Email link -->
<a href="mailto:[email protected]">Email Us</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

<!-- Download link -->
<a href="document.pdf" download>Download PDF</a>

Images

<!-- Basic image (alt is REQUIRED) -->
<img src="image.jpg" alt="Description of image">

<!-- Image with size -->
<img src="image.jpg" alt="Description" width="500" height="300">

<!-- Responsive image -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">

<!-- Picture element for responsive images -->
<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>

HTML Forms

Basic Form Structure

<form action="/submit" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <button type="submit">Submit</button>
</form>

Text Input Types

<!-- Regular text -->
<input type="text" name="name" placeholder="Enter name">

<!-- Email (validates email format) -->
<input type="email" name="email" required>

<!-- Password (hides input) -->
<input type="password" name="password" minlength="8">

<!-- Search -->
<input type="search" name="search">

<!-- URL -->
<input type="url" name="website">

<!-- Telephone -->
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- Multi-line text -->
<textarea name="message" rows="5" cols="40"></textarea>

Number and Date Inputs

<!-- Number -->
<input type="number" name="age" min="18" max="100" step="1">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" value="50">

<!-- Date -->
<input type="date" name="birthdate">

<!-- Time -->
<input type="time" name="appointment">

<!-- Date and Time -->
<input type="datetime-local" name="meeting">

<!-- Month -->
<input type="month" name="month">

<!-- Week -->
<input type="week" name="week">

Selection Inputs

<!-- Radio Buttons (single selection) -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<!-- Checkboxes (multiple selection) -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

<!-- Dropdown Select -->
<select name="country" id="country">
    <option value="">-- Select --</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

<!-- Multiple Select -->
<select name="languages" multiple size="5">
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
</select>

<!-- Datalist (autocomplete) -->
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

Other Input Types

<!-- Color picker -->
<input type="color" name="color" value="#ff0000">

<!-- File upload -->
<input type="file" name="resume">

<!-- Multiple files -->
<input type="file" name="photos" multiple accept="image/*">

<!-- Hidden input -->
<input type="hidden" name="user_id" value="12345">

Form Validation Attributes

<!-- Required field -->
<input type="text" name="username" required>

<!-- Minimum/maximum length -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Min/max values (for numbers) -->
<input type="number" name="age" min="18" max="100">

<!-- Pattern (regular expression) -->
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- Placeholder text -->
<input type="email" name="email" placeholder="[email protected]">

<!-- Title (tooltip and validation message) -->
<input type="text" pattern="[A-Z]{2}[0-9]{4}" 
       title="Format: Two uppercase letters followed by 4 digits">

Button Types

<!-- Submit button -->
<button type="submit">Submit Form</button>
<input type="submit" value="Submit">

<!-- Reset button -->
<button type="reset">Clear Form</button>

<!-- Regular button (needs JavaScript) -->
<button type="button" onclick="doSomething()">Click Me</button>

Complete Form Example

<form action="/register" method="POST">
    <h2>Registration Form</h2>
    
    <!-- Text Input -->
    <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" 
               required minlength="3" maxlength="20">
    </div>
    
    <!-- Email -->
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <!-- Password -->
    <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" 
               required minlength="8">
    </div>
    
    <!-- Radio Buttons -->
    <fieldset>
        <legend>Gender:</legend>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
    </fieldset>
    
    <!-- Checkbox -->
    <div>
        <input type="checkbox" id="terms" name="terms" required>
        <label for="terms">I agree to the terms</label>
    </div>
    
    <!-- Submit -->
    <button type="submit">Register</button>
</form>

HTML Tables

Basic Table

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>

Table with All Sections

<table>
    <caption>Table Title</caption>
    
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <th scope="row">Row 1</th>
            <td>Data</td>
        </tr>
        <tr>
            <th scope="row">Row 2</th>
            <td>Data</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>Sum</td>
        </tr>
    </tfoot>
</table>

Spanning Cells

<!-- Colspan (span multiple columns) -->
<tr>
    <td colspan="2">Spans 2 columns</td>
    <td>Normal cell</td>
</tr>

<!-- Rowspan (span multiple rows) -->
<tr>
    <td rowspan="2">Spans 2 rows</td>
    <td>Cell 1</td>
</tr>
<tr>
    <td>Cell 2</td>
</tr>

Multimedia Elements

Video

<!-- Basic video -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Your browser doesn't support video. <a href="video.mp4">Download</a></p>
</video>

<!-- Video with all attributes -->
<video controls autoplay muted loop poster="thumbnail.jpg" width="640">
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <p>Your browser doesn't support audio.</p>
</audio>

iframe (Embedding)

<!-- Basic iframe -->
<iframe src="https://example.com" width="800" height="600" title="Description">
</iframe>

<!-- YouTube embed -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="Video title"
        frameborder="0" 
        allowfullscreen>
</iframe>

<!-- Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=..." 
        width="600" height="450" 
        style="border:0;" 
        allowfullscreen 
        loading="lazy">
</iframe>

CSS Basics

Three Ways to Add CSS

1. External CSS (BEST)

<!-- In HTML file -->
<link rel="stylesheet" href="styles.css">

/* In styles.css file */
body {
    font-family: Arial, sans-serif;
}

2. Internal CSS

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>

3. Inline CSS (Avoid)

<p style="color: blue; font-size: 16px;">Text</p>

CSS Syntax

selector {
    property: value;
    property: value;
}

/* Example */
h1 {
    color: navy;
    font-size: 32px;
    margin-bottom: 20px;
}

CSS Comments

/* Single line comment */

/**
 * Multi-line
 * comment
 */

CSS Variables

:root {
    --primary-color: #007bff;
    --spacing: 16px;
    --font-main: Arial, sans-serif;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing);
    font-family: var(--font-main);
}

CSS Selectors

Basic Selectors

/* Element selector */
p { color: black; }

/* Class selector */
.highlight { background-color: yellow; }

/* ID selector */
#header { font-size: 24px; }

/* Universal selector */
* { margin: 0; padding: 0; }

Combining Selectors

/* Multiple selectors (comma) */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

/* Element with class */
p.special {
    color: red;
}

/* Element with ID */
div#container {
    width: 80%;
}

Relationship Selectors

/* Descendant selector (space) - ANY descendant */
nav a {
    color: white;
}

/* Child selector (>) - DIRECT child only */
div > p {
    margin: 10px;
}

/* Adjacent sibling (+) - IMMEDIATELY after */
h1 + p {
    font-weight: bold;
}

/* General sibling (~) - ALL siblings after */
h1 ~ p {
    color: gray;
}

Attribute Selectors

/* Has attribute */
[type] { border: 1px solid gray; }

/* Exact match */
[type="text"] { background: lightyellow; }

/* Contains */
[href*="example"] { color: green; }

/* Starts with */
[href^="https"] { color: blue; }

/* Ends with */
[href$=".pdf"] { background: url('pdf-icon.png'); }

Pseudo-classes

/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* Position-based */
li:first-child { font-weight: bold; }
li:last-child { border: none; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(even) { background: white; }
li:nth-child(3) { color: red; }

/* Form states */
input:focus { outline: 2px solid blue; }
input:disabled { opacity: 0.5; }
input:checked { /* checked checkbox/radio */ }
input:valid { border-color: green; }
input:invalid { border-color: red; }

/* Other */
:not(.special) { /* everything except .special */ }
:empty { /* elements with no children */ }

Pseudo-elements

/* First letter */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

/* First line */
p::first-line {
    font-variant: small-caps;
}

/* Before and after */
.note::before {
    content: "Note: ";
    font-weight: bold;
}

.external-link::after {
    content: " ↗";
}

Specificity (Order of Priority)

!important (avoid!)
Inline styles
IDs
Classes, attributes, pseudo-classes
Elements, pseudo-elements

/* Specificity calculation: IDs - Classes - Elements */
p { color: black; }              /* 0-0-1 */
.text { color: blue; }           /* 0-1-0 */
#special { color: red; }         /* 1-0-0 */
p.text { color: green; }         /* 0-1-1 */
#special.text { color: purple; } /* 1-1-0 */

CSS Box Model

Box Model Components

┌─────────── Margin ────────────┐
│ ┌───────── Border ──────────┐ │
│ │ ┌─────── Padding ───────┐ │ │
│ │ │      CONTENT          │ │ │
│ │ └───────────────────────┘ │ │
│ └───────────────────────────┘ │
└───────────────────────────────┘

Width and Height

div {
    width: 300px;
    height: 200px;
    max-width: 100%;
    min-height: 400px;
}

Padding

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Horizontal | Bottom */
padding: 10px 20px 15px;

/* Top | Right | Bottom | Left (clockwise) */
padding: 10px 20px 15px 5px;

/* Individual sides */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

Border

/* All-in-one */
border: 2px solid black;

/* Individual properties */
border-width: 2px;
border-style: solid; /* solid, dashed, dotted, double, none */
border-color: black;

/* Individual sides */
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double orange;

/* Border radius */
border-radius: 10px;
border-radius: 10px 20px 30px 40px; /* TL TR BR BL */
border-radius: 50%; /* Circle */

Margin

/* Same syntax as padding */
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 15px;
margin: 10px 20px 15px 5px;

/* Individual sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Centering a block element */
margin: 0 auto;

/* Negative margins */
margin-top: -10px; /* Pulls element up */

Box Sizing

/* Default: width doesn't include padding/border */
box-sizing: content-box;

/* RECOMMENDED: width includes padding/border */
box-sizing: border-box;

/* Best practice: apply to all elements */
* {
    box-sizing: border-box;
}

Size Calculations

Without border-box:

Total Width = width + padding-left + padding-right + border-left + border-right
Total Height = height + padding-top + padding-bottom + border-top + border-bottom

With border-box:

Total Width = width
Total Height = height
(padding and border included)

CSS Display & Position

Display Property

/* Block: full width, new line */
display: block;

/* Inline: flows with text, no width/height */
display: inline;

/* Inline-block: flows inline, respects width/height */
display: inline-block;

/* None: removes from page completely */
display: none;

/* Flex: enables flexbox */
display: flex;

/* Grid: enables CSS Grid */
display: grid;

Visibility

/* Invisible but takes up space */
visibility: hidden;

/* Visible (default) */
visibility: visible;

Position Property

/* Static: normal flow (default) */
position: static;

/* Relative: offset from normal position */
position: relative;
top: 20px;
left: 30px;

/* Absolute: relative to nearest positioned ancestor */
position: absolute;
top: 0;
right: 0;

/* Fixed: relative to viewport, stays on scroll */
position: fixed;
top: 0;
width: 100%;

/* Sticky: relative until scroll threshold, then fixed */
position: sticky;
top: 0;

Z-index (Stacking Order)

/* Only works with positioned elements */
.background {
    position: relative;
    z-index: 1;
}

.foreground {
    position: absolute;
    z-index: 100; /* Higher = on top */
}

Common Positioning Patterns

Centering with Absolute:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Full Screen Overlay:

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

Badge on Corner:

.container {
    position: relative;
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
}

Flexbox

Flex Container

.container {
    display: flex;
}

Flex Direction

flex-direction: row;         /* Default: left to right */
flex-direction: row-reverse; /* Right to left */
flex-direction: column;      /* Top to bottom */
flex-direction: column-reverse; /* Bottom to top */

Justify Content (Main Axis)

justify-content: flex-start;    /* Start (default) */
justify-content: flex-end;      /* End */
justify-content: center;        /* Center */
justify-content: space-between; /* Even space between */
justify-content: space-around;  /* Even space around */
justify-content: space-evenly;  /* Truly even spacing */

Align Items (Cross Axis)

align-items: stretch;     /* Fill height (default) */
align-items: flex-start;  /* Top */
align-items: flex-end;    /* Bottom */
align-items: center;      /* Center */
align-items: baseline;    /* Text baseline */

Flex Wrap

flex-wrap: nowrap;       /* Single line (default) */
flex-wrap: wrap;         /* Wrap to multiple lines */
flex-wrap: wrap-reverse; /* Wrap in reverse */

Gap (Spacing)

gap: 20px;         /* Gap between all items */
column-gap: 20px;  /* Horizontal gap */
row-gap: 10px;     /* Vertical gap */

Flex Items

Flex Grow:

flex-grow: 0; /* Don't grow (default) */
flex-grow: 1; /* Grow equally with others */
flex-grow: 2; /* Grow twice as much */

Flex Shrink:

flex-shrink: 1; /* Can shrink (default) */
flex-shrink: 0; /* Don't shrink */

Flex Basis:

flex-basis: auto;  /* Based on content (default) */
flex-basis: 200px; /* Start at 200px */
flex-basis: 0;     /* Ignore content size */

Flex Shorthand:

flex: 1;           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
flex: 0 0 200px;   /* Don't grow, don't shrink, 200px */
flex: 2 1 300px;   /* Grow 2x, can shrink, start at 300px */

Align Self:

align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;

Order:

order: 0; /* Default */
order: 1; /* Appears after order: 0 */
order: -1; /* Appears before order: 0 */

Common Flexbox Patterns

Horizontal Navigation:

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
}

Centered Content:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Sidebar Layout:

.container {
    display: flex;
}

.sidebar {
    flex: 0 0 250px; /* Fixed width */
}

.main {
    flex: 1; /* Fills remaining space */
}

Equal Cards:

.card-container {
    display: flex;
    gap: 20px;
}

.card {
    flex: 1; /* All cards equal width */
}

CSS Grid

Grid Container

.container {
    display: grid;
}

Grid Template Columns

/* Fixed widths */
grid-template-columns: 200px 300px 200px;

/* Fractional units (fr) */
grid-template-columns: 1fr 2fr 1fr;

/* Repeat */
grid-template-columns: repeat(3, 1fr);

/* Auto-fit (responsive) */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* Mix */
grid-template-columns: 200px 1fr 300px;

Grid Template Rows

grid-template-rows: 100px 200px 100px;
grid-template-rows: auto 1fr auto; /* Header, content, footer */

Gap

gap: 20px;         /* Both row and column */
column-gap: 30px;
row-gap: 20px;

Grid Template Areas

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header  header"
        "sidebar content aside"
        "footer  footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Grid Items

Grid Column:

/* Span from line 1 to line 3 */
grid-column: 1 / 3;

/* Span 2 columns */
grid-column: span 2;

/* Start at column 2, span 3 columns */
grid-column: 2 / span 3;

Grid Row:

grid-row: 1 / 3;     /* Span from row 1 to 3 */
grid-row: span 2;    /* Span 2 rows */

Grid Area (Shorthand):

/* row-start / column-start / row-end / column-end */
grid-area: 1 / 1 / 3 / 3;

Alignment

Justify Items (Horizontal):

justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch; /* Default */

Align Items (Vertical):

align-items: start;
align-items: end;
align-items: center;
align-items: stretch; /* Default */

Justify Content (Grid in Container):

justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Align Content:

align-content: start;
align-content: end;
align-content: center;
align-content: space-between;

Common Grid Patterns

Basic Page Layout:

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
    gap: 20px;
}

Image Gallery:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

12-Column Grid:

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.full-width {
    grid-column: span 12;
}

.half-width {
    grid-column: span 6;
}

.third-width {
    grid-column: span 4;
}

Responsive Design

Viewport Meta Tag (REQUIRED)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries Syntax

/* Basic media query */
@media (min-width: 768px) {
    /* Styles for screens 768px and wider */
}

Common Breakpoints

/* Mobile-first approach (RECOMMENDED) */

/* Extra small devices (default, no media query needed) */
.container {
    width: 100%;
    padding: 10px;
}

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

Media Query Features

/* Width range */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablets only */
}

/* Height */
@media (min-height: 600px) {
    /* Taller screens */
}

/* Orientation */
@media (orientation: landscape) {
    /* Landscape mode */
}

@media (orientation: portrait) {
    /* Portrait mode */
}

/* High resolution screens */
@media (min-resolution: 2dppx) {
    /* Retina displays */
}

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: white;
    }
}

Responsive Images

/* Make all images responsive */
img {
    max-width: 100%;
    height: auto;
}

Responsive Typography

/* Mobile */
body {
    font-size: 14px;
}

h1 {
    font-size: 24px;
}

/* Tablet */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 32px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
    
    h1 {
        font-size: 48px;
    }
}

Responsive Grid

.grid {
    display: grid;
    gap: 20px;
    
    /* Mobile: 1 column */
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

Hiding Elements

/* Hide on mobile, show on desktop */
.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

/* Hide on desktop, show on mobile */
.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

Accessibility

Semantic HTML

<!-- ✓ GOOD: Use semantic elements -->
<header>, <nav>, <main>, <article>, <aside>, <footer>

<!-- ✗ BAD: Using only divs -->
<div class="header">, <div class="nav">

Alt Text

<!-- ✓ GOOD: Descriptive alt text -->
<img src="dog.jpg" alt="Golden retriever playing in the park">

<!-- ✓ GOOD: Decorative image -->
<img src="decoration.png" alt="">

<!-- ✗ BAD: No alt or useless alt -->
<img src="dog.jpg">
<img src="dog.jpg" alt="image">

Form Labels

<!-- ✓ GOOD: Label associated with input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- ✗ BAD: No label -->
<input type="email" name="email" placeholder="Email">

Heading Hierarchy

<!-- ✓ GOOD: Logical hierarchy -->
<h1>Page Title</h1>
    <h2>Section</h2>
        <h3>Subsection</h3>

<!-- ✗ BAD: Skipping levels -->
<h1>Title</h1>
    <h4>Section</h4>

Link Text

<!-- ✓ GOOD: Descriptive link text -->
<a href="report.pdf">Download Q4 2025 Sales Report (PDF, 2MB)</a>

<!-- ✗ BAD: Generic link text -->
<a href="report.pdf">Click here</a>

Color Contrast

/* ✓ GOOD: High contrast (4.5:1 minimum) */
color: #000000;
background-color: #FFFFFF;

/* ✗ BAD: Low contrast */
color: #CCCCCC;
background-color: #FFFFFF;

Focus Styles

/* ✗ BAD: Removing focus outline */
*:focus {
    outline: none;
}

/* ✓ GOOD: Custom focus style */
button:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

/* ✓ BETTER: Only for keyboard users */
button:focus-visible {
    outline: 2px solid blue;
}

Skip Links

<a href="#main-content" class="skip-link">Skip to main content</a>

<nav><!-- Navigation --></nav>

<main id="main-content">
    <!-- Content -->
</main>

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
}

.skip-link:focus {
    top: 0;
}

ARIA Attributes

<!-- ARIA Labels -->
<button aria-label="Close dialog">×</button>

<!-- ARIA Described By -->
<input type="text" aria-describedby="username-hint">
<span id="username-hint">Must be 3-20 characters</span>

<!-- ARIA Live Regions -->
<div aria-live="polite">
    <!-- Dynamic content -->
</div>

<!-- ARIA States -->
<button aria-pressed="false">Toggle</button>
<button aria-expanded="false">Expand</button>

Keyboard Accessibility

<!-- ✓ GOOD: Button is focusable -->
<button onclick="doSomething()">Click</button>

<!-- ✗ BAD: Div is not focusable -->
<div onclick="doSomething()">Click</div>

<!-- ✓ FIX: Add tabindex and role -->
<div onclick="doSomething()" tabindex="0" role="button">Click</div>

Common Patterns

Centering

Horizontal Center (Block):

.element {
    width: 800px;
    margin: 0 auto;
}

Horizontal Center (Text):

.element {
    text-align: center;
}

Vertical & Horizontal (Flexbox):

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Vertical & Horizontal (Grid):

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

Vertical & Horizontal (Absolute):

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Horizontal Navigation:

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

Card Grid

<div class="card-grid">
    <div class="card">
        <h3>Card Title</h3>
        <p>Card content</p>
    </div>
    <!-- More cards -->
</div>

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Hero Section

<section class="hero">
    <div class="hero-content">
        <h1>Welcome</h1>
        <p>Subtitle text</p>
        <a href="#cta" class="button">Get Started</a>
    </div>
</section>

.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url('hero-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.button {
    display: inline-block;
    padding: 12px 30px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

Sticky Header

header {
    position: sticky;
    top: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

<div class="modal">
    <div class="modal-content">
        <h2>Modal Title</h2>
        <p>Modal content</p>
        <button class="close">Close</button>
    </div>
</div>

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
}

Troubleshooting Guide

CSS Not Working

1. Check file path

<!-- Make sure path is correct -->
<link rel="stylesheet" href="styles.css">
<!-- If CSS is in a css folder: -->
<link rel="stylesheet" href="css/styles.css">

2. Check specificity

/* More specific selector wins */
.text { color: blue; }      /* Less specific */
#special { color: red; }    /* More specific - wins */

3. Check for typos

/* ✗ BAD */
colr: blue;  /* Typo */
background-color: blu;  /* Typo */

/* ✓ GOOD */
color: blue;
background-color: blue;

4. Clear browser cache

Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

Element Not Showing

1. Check display property

.element {
    display: block; /* Make sure not 'none' */
}

2. Check visibility

.element {
    visibility: visible; /* Make sure not 'hidden' */
}

3. Check if hidden by parent

/* Parent might have overflow: hidden */
.parent {
    overflow: visible;
}

4. Check z-index

/* Element might be behind another */
.element {
    position: relative;
    z-index: 10;
}

Layout Issues

1. Box model problems

/* Use border-box */
* {
    box-sizing: border-box;
}

2. Margin collapse

/* Vertical margins collapse - use padding instead */
.element {
    padding-bottom: 20px; /* Instead of margin-bottom */
}

3. Overflow issues

/* Content overflowing? */
.element {
    overflow: auto; /* or hidden, scroll */
}

Responsive Issues

1. Viewport not set

<!-- Add this to <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Images too large

img {
    max-width: 100%;
    height: auto;
}

3. Fixed widths

/* ✗ BAD */
.container {
    width: 1200px;
}

/* ✓ GOOD */
.container {
    max-width: 1200px;
    width: 100%;
}

Validation Errors

Use validators:

HTML: https://validator.w3.org/
CSS: https://jigsaw.w3.org/css-validator/

Common HTML errors:

<!-- ✗ BAD: Unclosed tags -->
<p>Text

<!-- ✓ GOOD: Properly closed -->
<p>Text</p>

<!-- ✗ BAD: Improperly nested -->
<p><strong>Text</p></strong>

<!-- ✓ GOOD: Properly nested -->
<p><strong>Text</strong></p>

Quick Tips

Performance

Minimize HTTP requests
Compress images
Use CSS instead of images when possible
Minify CSS and HTML for production
Use lazy loading for images: <img loading="lazy">

Best Practices

Always use semantic HTML
External CSS over inline/internal
Mobile-first responsive design
Validate your code
Comment your code
Use consistent naming conventions
Keep CSS organized (by component or section)
Test in multiple browsers
Test with keyboard navigation
Check color contrast

Browser DevTools Shortcuts

F12 - Open DevTools
Ctrl+Shift+C - Element selector
Ctrl+Shift+M - Device toolbar (responsive mode)
Ctrl+Shift+I - Inspect element

Resources

MDN Web Docs - developer.mozilla.org
W3Schools - w3schools.com
CSS-Tricks - css-tricks.com
Can I Use - caniuse.com (browser compatibility)
W3C Validators - validator.w3.org

Regular Expression Patterns

Common Form Patterns

<!-- Phone: (123) 456-7890 -->
<input pattern="\([0-9]{3}\) [0-9]{3}-[0-9]{4}">

<!-- Phone: 123-456-7890 -->
<input pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- ZIP Code: 12345 -->
<input pattern="[0-9]{5}">

<!-- ZIP+4: 12345-6789 -->
<input pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Username: alphanumeric, 3-16 chars -->
<input pattern="[a-zA-Z0-9]{3,16}">

<!-- License Plate: ABC-1234 -->
<input pattern="[A-Z]{3}-[0-9]{4}">

<!-- Credit Card: 1234-5678-9012-3456 -->
<input pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}">

<!-- Date: MM/DD/YYYY -->
<input pattern="(0[1-9]|1[0-2])/(0[1-9]|[12][0-9]|3[01])/[0-9]{4}">

<!-- Time: HH:MM (24-hour) -->
<input pattern="([01][0-9]|2[0-3]):[0-5][0-9]">

<!-- Hex Color: #ABC123 -->
<input pattern="#[0-9A-Fa-f]{6}">

<!-- Strong Password: min 8 chars, 1 uppercase, 1 lowercase, 1 number -->
<input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

Color Reference

Named Colors (Selection)

white, black, gray, silver
red, maroon, pink
blue, navy, teal, cyan
green, lime, olive
yellow, gold, orange
purple, magenta, violet
brown, tan, beige

Color Formats

/* Named colors */
color: red;

/* Hex */
color: #FF0000;
color: #F00; /* Shorthand */

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (with opacity) */
color: rgba(255, 0, 0, 0.5);

/* HSL (Hue, Saturation, Lightness) */
color: hsl(0, 100%, 50%);

/* HSLA (with opacity) */
color: hsla(0, 100%, 50%, 0.5);

Units Reference

Absolute Units

px   - Pixels
pt   - Points (1pt = 1/72 inch)
cm   - Centimeters
mm   - Millimeters
in   - Inches

Relative Units

%    - Percent (relative to parent)
em   - Relative to element's font size
rem  - Relative to root font size
vw   - 1% of viewport width
vh   - 1% of viewport height
vmin - 1% of smaller viewport dimension
vmax - 1% of larger viewport dimension

When to Use

/* Font sizes */
font-size: 16px;  /* Absolute */
font-size: 1rem;  /* Relative to root */
font-size: 1.2em; /* Relative to parent */

/* Widths */
width: 800px;     /* Fixed */
width: 80%;       /* Relative to parent */
width: 100vw;     /* Relative to viewport */

/* Heights */
height: 500px;    /* Fixed */
height: 100vh;    /* Full viewport height */

PreviousVideo NextQuick Reference

Last updated 5 hours ago

Good morning

hashtagHTML5 & CSS Reference Guide

hashtagTable of Contents

hashtagHTML5 Document Structure

hashtagBasic Template

hashtagEssential Meta Tags

hashtagLinking Resources

hashtagSemantic HTML5 Elements

hashtagPage Structure

hashtagComplete Example

hashtagOther Semantic Elements

hashtagCommon HTML Elements

hashtagText Elements

hashtagLists

hashtagLinks

hashtagImages

hashtagHTML Forms

hashtagBasic Form Structure

hashtagText Input Types

hashtagNumber and Date Inputs

hashtagSelection Inputs

hashtagOther Input Types

hashtagForm Validation Attributes

hashtagButton Types

hashtagComplete Form Example

hashtagHTML Tables

hashtagBasic Table

hashtagTable with All Sections

hashtagSpanning Cells

hashtagMultimedia Elements

hashtagVideo

hashtagAudio

hashtagiframe (Embedding)

hashtagCSS Basics

hashtagThree Ways to Add CSS

hashtagCSS Syntax

hashtagCSS Comments

hashtagCSS Variables

hashtagCSS Selectors

hashtagBasic Selectors

hashtagCombining Selectors

hashtagRelationship Selectors

hashtagAttribute Selectors

hashtagPseudo-classes

hashtagPseudo-elements

hashtagSpecificity (Order of Priority)

hashtagCSS Box Model

hashtagBox Model Components

hashtagWidth and Height

hashtagPadding

hashtagBorder

hashtagMargin

hashtagBox Sizing

hashtagSize Calculations

hashtagCSS Display & Position

hashtagDisplay Property

hashtagVisibility

hashtagPosition Property

hashtagZ-index (Stacking Order)

hashtagCommon Positioning Patterns

hashtagFlexbox

hashtagFlex Container

hashtagFlex Direction

hashtagJustify Content (Main Axis)

hashtagAlign Items (Cross Axis)

hashtagFlex Wrap

hashtagGap (Spacing)

hashtagFlex Items

hashtagCommon Flexbox Patterns

hashtagCSS Grid

hashtagGrid Container

hashtagGrid Template Columns

hashtagGrid Template Rows

hashtagGap

hashtagGrid Template Areas

hashtagGrid Items

hashtagAlignment

hashtagCommon Grid Patterns

hashtagResponsive Design

hashtagViewport Meta Tag (REQUIRED)