Quick Reference

HTML5 & CSS Quick Reference Guide

HTML5 Quick Reference
CSS Quick Reference
Flexbox Cheat Sheet
Grid Cheat Sheet
Responsive Design
Common Patterns
Accessibility Checklist
Troubleshooting Guide

HTML5 Quick Reference

Basic Document Structure

<!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 here -->
</body>
</html>

Semantic HTML5 Elements

Element

Purpose

Example Use

<header>

Introductory content

Site header, article header

<nav>

Navigation links

Main menu, breadcrumbs

<main>

Primary content

Main page content (one per page)

<article>

Self-contained content

Blog post, news article

<section>

Thematic grouping

Chapter, tab panel

<aside>

Tangential content

Sidebar, related links

<footer>

Footer information

<figure>

Self-contained media

Image with caption

<figcaption>

Caption for figure

Image description

<time>

Date/time

<time datetime="2026-01-24">

Common HTML Elements

Text Elements

<h1> to <h6>          <!-- Headings (h1 is highest) -->
<p>                   <!-- Paragraph -->
<br>                  <!-- Line break -->
<hr>                  <!-- Horizontal rule -->
<strong>              <!-- Important text (bold) -->
<em>                  <!-- Emphasized text (italic) -->
<mark>                <!-- Highlighted text -->
<small>               <!-- Smaller text -->
<del>                 <!-- Deleted text -->
<ins>                 <!-- Inserted text -->
<sub>                 <!-- Subscript -->
<sup>                 <!-- Superscript -->
<code>                <!-- Code snippet -->
<pre>                 <!-- Preformatted text -->
<blockquote>          <!-- Block quotation -->

Lists

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

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

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

Links

<a href="page.html">Link</a>
<a href="#section">Anchor link</a>
<a href="https://example.com" target="_blank">External link</a>
<a href="mailto:[email protected]">Email</a>
<a href="tel:+1234567890">Phone</a>
<a href="file.pdf" download>Download</a>

Images

<img src="image.jpg" alt="Description" width="500" height="300">

HTML Forms Reference

Form Structure

<form action="/submit" method="POST">
    <!-- Form fields -->
    <button type="submit">Submit</button>
</form>

Input Types Quick Reference

Input Type

Usage

Example

text

Single-line text

Name, username

email

Email address

[email protected]

password

Password field

••••••••

number

Numeric input

Age, quantity

tel

Phone number

123-456-7890

url

Website URL

https://...

date

Date picker

2026-01-24

time

Time picker

14:30

datetime-local

Date & time

2026-01-24T14:30

color

Color picker

#ff0000

range

Slider

0-100

file

File upload

Browse files

checkbox

Multiple choice

☑ Option

radio

Single choice

◉ Option

hidden

Hidden field

Not visible

Common Form Elements

<!-- Text Input with Label -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5"></textarea>

<!-- Select Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">Select...</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
</select>

<!-- Checkbox -->
<label>
    <input type="checkbox" name="agree" value="yes" required>
    I agree to terms
</label>

<!-- Radio Buttons -->
<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>

<!-- Buttons -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>

Validation Attributes

Attribute

Purpose

Example

required

Field must be filled

<input required>

minlength

Minimum text length

minlength="8"

maxlength

Maximum text length

maxlength="20"

min

Minimum number

min="18"

max

Maximum number

max="100"

pattern

Regular expression

pattern="[0-9]{3}-[0-9]{4}"

placeholder

Example text

placeholder="John Doe"

title

Tooltip/validation msg

title="8+ characters"

Common Patterns

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

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

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

<!-- Strong Password -->
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

HTML Tables

<table>
    <caption>Table Title</caption>
    <thead>
        <tr>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Header</th>
            <td>Data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </tfoot>
</table>

Multimedia Elements

<!-- Video -->
<video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser doesn't support video.
</video>

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

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

CSS Quick Reference

CSS Syntax

selector {
    property: value;
    property: value;
}

How to Add CSS

<!-- External (BEST) -->
<link rel="stylesheet" href="styles.css">

<!-- Internal -->
<style>
    p { color: blue; }
</style>

<!-- Inline (AVOID) -->
<p style="color: blue;">Text</p>

CSS Selectors

Selector

Example

Selects

Element

p

All <p> elements

Class

.classname

All elements with class="classname"

#idname

Element with id="idname"

Universal

*

All elements

Group

h1, h2, h3

All h1, h2, and h3 elements

Descendant

div p

<p> inside <div>

Child

div > p

<p> direct child of <div>

Adjacent sibling

h1 + p

<p> immediately after <h1>

Attribute

[type="text"]

Elements with type="text"

Pseudo-class

a:hover

Link on hover

Pseudo-element

p::first-line

First line of paragraph

CSS Specificity

Priority (lowest to highest):

Element selectors: p (0,0,1)
Class selectors: .class (0,1,0)
ID selectors: #id (1,0,0)
Inline styles: style="" (1,0,0,0)
!important (avoid!)

Common CSS Properties

Colors & Backgrounds

color: #FF0000;                    /* Hex */
color: rgb(255, 0, 0);             /* RGB */
color: rgba(255, 0, 0, 0.5);       /* RGBA with opacity */
color: hsl(0, 100%, 50%);          /* HSL */

background-color: #ffffff;
background-image: url('image.jpg');
background-size: cover;            /* cover | contain | 100% */
background-position: center;       /* top | center | bottom | left | right */
background-repeat: no-repeat;      /* repeat | repeat-x | repeat-y | no-repeat */
background-attachment: fixed;      /* scroll | fixed */

/* Shorthand */
background: #fff url('bg.jpg') no-repeat center/cover;

Text & Fonts

font-family: Arial, sans-serif;
font-size: 16px;                   /* px | em | rem | % */
font-weight: bold;                 /* normal | bold | 100-900 */
font-style: italic;                /* normal | italic | oblique */
line-height: 1.5;                  /* Spacing between lines */
text-align: left;                  /* left | center | right | justify */
text-decoration: underline;        /* none | underline | line-through */
text-transform: uppercase;         /* uppercase | lowercase | capitalize */
letter-spacing: 2px;
word-spacing: 5px;

/* Shorthand */
font: bold 16px/1.5 Arial, sans-serif;

Box Model

/* Content */
width: 300px;
height: 200px;
max-width: 100%;
min-height: 500px;

/* Padding */
padding: 10px;                     /* All sides */
padding: 10px 20px;                /* Top/bottom Left/right */
padding: 10px 20px 15px;           /* Top Left/right Bottom */
padding: 10px 15px 20px 25px;      /* Top Right Bottom Left (clockwise) */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

/* Border */
border: 2px solid black;
border-width: 2px;
border-style: solid;               /* solid | dashed | dotted | double | none */
border-color: black;
border-radius: 10px;               /* Rounded corners */

/* Margin */
margin: 20px;                      /* Same syntax as padding */
margin: 0 auto;                    /* Center horizontally */

/* Box Sizing */
box-sizing: border-box;            /* Include padding and border in width */

Display & Visibility

display: block;                    /* Block-level element */
display: inline;                   /* Inline element */
display: inline-block;             /* Inline but respects width/height */
display: none;                     /* Hidden, no space */
display: flex;                     /* Flexbox */
display: grid;                     /* Grid */

visibility: hidden;                /* Hidden but takes space */
opacity: 0.5;                      /* 0 (transparent) to 1 (opaque) */

Position

position: static;                  /* Default */
position: relative;                /* Relative to normal position */
position: absolute;                /* Relative to positioned ancestor */
position: fixed;                   /* Relative to viewport */
position: sticky;                  /* Hybrid of relative and fixed */

/* Offset properties (only work with positioned elements) */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;

z-index: 10;                       /* Stacking order */

Common Layout Properties

overflow: hidden;                  /* hidden | visible | scroll | auto */
float: left;                       /* left | right | none (avoid using) */
clear: both;                       /* left | right | both | none */
cursor: pointer;                   /* pointer | default | text | etc. */

CSS Units Reference

Unit

Description

Example

px

Pixels (absolute)

font-size: 16px;

%

Percentage of parent

width: 50%;

em

Relative to parent font-size

margin: 1em;

rem

Relative to root font-size

padding: 2rem;

vw

1% of viewport width

width: 50vw;

vh

1% of viewport height

height: 100vh;

fr

Fractional unit (Grid)

grid-template-columns: 1fr 2fr;

Flexbox Cheat Sheet

Flex Container Properties

.container {
    display: flex;                 /* Enable flexbox */
}

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 alignment)

justify-content: flex-start;       /* Default: items at start */
justify-content: flex-end;         /* Items at end */
justify-content: center;           /* Items centered */
justify-content: space-between;    /* Even space between items */
justify-content: space-around;     /* Even space around items */
justify-content: space-evenly;     /* Truly even spacing */

align-items (cross axis alignment)

align-items: stretch;              /* Default: fill container */
align-items: flex-start;           /* Top (in row) / Left (in column) */
align-items: flex-end;             /* Bottom (in row) / Right (in column) */
align-items: center;               /* Center */
align-items: baseline;             /* Align text baselines */

flex-wrap

flex-wrap: nowrap;                 /* Default: single line */
flex-wrap: wrap;                   /* Wrap to multiple lines */
flex-wrap: wrap-reverse;           /* Wrap in reverse */

gap

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

Flex Item Properties

.item {
    flex-grow: 1;                  /* Grow to fill space (default: 0) */
    flex-shrink: 1;                /* Can shrink (default: 1) */
    flex-basis: 200px;             /* Initial size (default: auto) */
    
    flex: 1;                       /* Shorthand: flex-grow flex-shrink flex-basis */
    /* flex: 1; is same as flex: 1 1 0; */
    
    align-self: center;            /* Override align-items for this item */
    order: 2;                      /* Change visual order (default: 0) */
}

Common Flexbox Patterns

/* Center content horizontally and vertically */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Equal-width columns */
.container {
    display: flex;
}
.item {
    flex: 1;
}

/* Sidebar layout */
.container {
    display: flex;
}
.sidebar {
    flex: 0 0 250px;              /* Fixed width sidebar */
}
.main {
    flex: 1;                       /* Main content fills remaining space */
}

/* Horizontal navigation */
nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
}

Grid Cheat Sheet

Grid Container Properties

.container {
    display: grid;                 /* Enable grid */
}

Define Columns and Rows

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

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

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

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

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

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; }

Gap

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

Alignment

/* Align items within cells */
justify-items: start;              /* left | center | end | stretch */
align-items: start;                /* top | center | end | stretch */

/* Align entire grid within container */
justify-content: center;
align-content: center;

Grid Item Properties

.item {
    /* Span columns */
    grid-column: 1 / 3;            /* From line 1 to line 3 */
    grid-column: span 2;           /* Span 2 columns */
    
    /* Span rows */
    grid-row: 1 / 4;               /* From line 1 to line 4 */
    grid-row: span 2;              /* Span 2 rows */
    
    /* Shorthand */
    grid-area: 2 / 1 / 4 / 3;      /* row-start / col-start / row-end / col-end */
    
    /* Align individual item */
    justify-self: center;
    align-self: center;
}

Common Grid Patterns

/* Equal columns */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Responsive image gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

/* 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;
}

/* 12-column grid system */
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

Responsive Design

Viewport Meta Tag (Required!)

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

Media Queries

/* Mobile first (recommended) */
/* Default styles for mobile */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

Common Breakpoints

Device

Min Width

Example

Extra Small (phones)

< 576px

Default

Small (tablets)

576px

@media (min-width: 576px)

Medium (laptops)

768px

@media (min-width: 768px)

Large (desktops)

992px

@media (min-width: 992px)

Extra Large

1200px

@media (min-width: 1200px)

Media Query Features

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

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

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

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

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

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

Responsive Images

/* Basic responsive image */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive background */
.hero {
    background-image: url('hero-mobile.jpg');
    background-size: cover;
}

@media (min-width: 768px) {
    .hero {
        background-image: url('hero-desktop.jpg');
    }
}

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

Responsive Typography

/* Base */
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; }
}

Common Patterns

Page Layouts

Basic Page Structure

<!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>
    <header>
        <h1>Site Title</h1>
        <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>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Content...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2026 Site Name</p>
    </footer>
</body>
</html>

Centered Container

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Sticky Header

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

Full-Height Hero Section

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
}

Horizontal Navigation

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

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

.nav-horizontal a {
    text-decoration: none;
    padding: 10px 15px;
}

.nav-horizontal a:hover {
    background-color: #f0f0f0;
}

Responsive Navigation

/* Mobile: vertical */
nav ul {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Desktop: horizontal */
@media (min-width: 768px) {
    nav ul {
        flex-direction: row;
        gap: 20px;
    }
}

Card Layouts

Basic Card

<div class="card">
    <img src="image.jpg" alt="Card image">
    <div class="card-content">
        <h3>Card Title</h3>
        <p>Card description...</p>
        <a href="#" class="btn">Read More</a>
    </div>
</div>

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    height: auto;
}

.card-content {
    padding: 20px;
}

Card Grid

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

Button Styles

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #545b62;
}

.btn-large {
    padding: 15px 30px;
    font-size: 18px;
}

Forms

Styled Form

form {
    max-width: 500px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

Accessibility Checklist

HTML Accessibility

Use semantic HTML elements (<header>, <nav>, <main>, <article>, etc.)
All images have alt attributes
Form inputs have associated <label> elements
Use proper heading hierarchy (h1 → h2 → h3, don't skip levels)
Links have descriptive text (not "click here")
Tables use <caption>, <thead>, <th> with scope attribute
Use <button> for buttons, not <div> or <span>
Language is specified: <html lang="en">

CSS Accessibility

Color contrast ratio ≥ 4.5:1 for normal text
Color contrast ratio ≥ 3:1 for large text (18pt+)
Don't use color alone to convey information
Don't remove focus outlines (or provide alternative)
Text can be resized to 200% without breaking layout
Content is readable and functional in high contrast mode

Keyboard Accessibility

All interactive elements are keyboard accessible (Tab key)
Focus order is logical
Focus is visible on all interactive elements
Skip navigation link provided
No keyboard traps (can tab out of all elements)

ARIA (when semantic HTML isn't enough)

<!-- Landmark roles -->
<div role="banner">Header</div>
<div role="navigation">Nav</div>
<div role="main">Main content</div>
<div role="complementary">Sidebar</div>
<div role="contentinfo">Footer</div>

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

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

<!-- States -->
<button aria-pressed="false">Toggle</button>
<button aria-expanded="false">Expand</button>
<div aria-hidden="true">Hidden from screen readers</div>

<!-- Live regions -->
<div aria-live="polite">Updates announced</div>
<div aria-live="assertive">Urgent updates</div>

Accessibility Testing Tools

WAVE: Browser extension for accessibility testing
axe DevTools: Browser extension for detailed accessibility audit
Lighthouse: Built into Chrome DevTools
Screen Readers:
- NVDA (Windows, free)
- JAWS (Windows, paid)
- VoiceOver (Mac/iOS, built-in)
Keyboard Testing: Tab through your site
Color Contrast: WebAIM Contrast Checker

Troubleshooting Guide

Common HTML Issues

Problem

Solution

Page shows HTML code as text

Check DOCTYPE, make sure file is .html

Image not showing

Check file path, file name (case-sensitive)

Form not submitting

Check action attribute, method, button type="submit"

Special characters showing weird

Add <meta charset="UTF-8"> in head

CSS not loading

Check file path, link tag syntax

Validation errors

Use W3C validator, check all tags are closed

Common CSS Issues

Problem

Possible Causes

Solutions

Style not applying

Typo, wrong selector, specificity

Check spelling, use more specific selector

Element not visible

display: none, visibility: hidden, opacity: 0, off-screen

Check display property, position values

Layout broken

Box model issues, float problems

Use box-sizing: border-box, clear floats, use Flexbox/Grid

Text cut off

Overflow hidden, fixed height too small

Check overflow, adjust height, use min-height

Colors not working

Wrong syntax, missing #

Check color format: #FF0000 or rgb(255,0,0)

Margin/padding not working

Inline element, collapsed margins

Use display: block or inline-block

Z-index not working

Element not positioned

Add position: relative (or absolute, fixed)

Centering not working

Wrong method for element type

Block: margin: 0 auto, Flex: justify-content: center

Responsive design broken

No viewport meta tag

Add viewport meta tag to <head>

Debugging with DevTools

Right-click element → Inspect
Check computed styles (see what's actually applied)
Toggle CSS properties on/off to test
Check box model diagram
Look for crossed-out styles (overridden by more specific rule)
Use element selector to pick elements on page
Check console for errors
Test responsive with device toolbar (Ctrl+Shift+M)

CSS Debugging Checklist

/* Temporarily add to see element boundaries */
* {
    outline: 1px solid red;
}

/* Check if element exists */
.my-element {
    background-color: red !important;
}

/* Force specific width/height to test */
.problem-element {
    width: 100px !important;
    height: 100px !important;
    background: red !important;
}

Best Practices Summary

HTML Best Practices

✅ DO:

Use semantic HTML5 elements
Include alt text on all images
Associate labels with form inputs
Use proper heading hierarchy
Validate HTML with W3C validator
Keep HTML clean and indented
Add comments for complex sections
Use lowercase for tags and attributes

❌ DON'T:

Use tables for layout
Use <div> when semantic element exists
Skip heading levels
Use inline styles (except for testing)
Forget closing tags
Use deprecated tags
Omit required attributes

CSS Best Practices

✅ DO:

Use external stylesheets
Use classes for styling
Use box-sizing: border-box
Mobile-first responsive design
Comment your CSS
Group related styles
Use meaningful class names
Validate CSS

❌ DON'T:

Use inline styles
Use IDs for styling (use for JS)
Use !important (except utilities)
Use overly specific selectors
Use deprecated properties
Forget browser prefixes when needed
Use color alone to convey meaning

File Organization

project/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── styles.css
├── images/
│   ├── logo.png
│   └── hero.jpg
└── js/
    └── script.js

Naming Conventions

HTML/CSS:

Use kebab-case: my-class-name
Be descriptive: .btn-primary not .blue-button
BEM (optional): .block__element--modifier

Files:

Lowercase, no spaces: my-page.html
Use hyphens: main-styles.css

Quick Tips

Performance

Minimize HTTP requests
Optimize images before upload
Use CSS instead of images when possible
Combine CSS files
Minify CSS for production

Browser Compatibility

Test in multiple browsers (Chrome, Firefox, Safari, Edge)
Use Can I Use (caniuse.com) to check feature support
Provide fallbacks for older browsers
Use vendor prefixes when needed

Workflow

Write HTML structure first
Add CSS styling second
Test responsiveness
Validate code
Check accessibility
Cross-browser test
Optimize performance

Resources

MDN Web Docs: developer.mozilla.org
W3Schools: w3schools.com
CSS-Tricks: css-tricks.com
Can I Use: caniuse.com
W3C Validator: validator.w3.org
CSS Validator: jigsaw.w3.org/css-validator

Keyboard Shortcuts (DevTools)

Shortcut

Action

F12 or Ctrl+Shift+I

Open DevTools

Ctrl+Shift+C

Element selector

Ctrl+Shift+M

Toggle device toolbar

Ctrl+Shift+J

Console panel

Ctrl+]

Next panel

Ctrl+[

Previous panel

Esc

Toggle console drawer

Regular Expressions (Pattern Attribute)

[0-9]           One digit
[a-z]           One lowercase letter
[A-Z]           One uppercase letter
[a-zA-Z]        One letter (any case)
[a-zA-Z0-9]     One alphanumeric character
.               Any character
{3}             Exactly 3 times
{3,}            3 or more times
{3,16}          Between 3 and 16 times
+               One or more times
*               Zero or more times
?               Zero or one time
^               Start of string
$               End of string
|               OR

Examples:

[0-9]{5}                      ZIP code (12345)
[0-9]{3}-[0-9]{3}-[0-9]{4}   Phone (123-456-7890)
[a-zA-Z0-9]{3,16}            Username (3-16 alphanumeric)
^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$   Strong password

PreviousReference Guide NextSource Code

Last updated 3 hours ago

Good night

hashtagHTML5 & CSS Quick Reference Guide

hashtagTable of Contents

hashtagHTML5 Quick Reference

hashtagBasic Document Structure

hashtagSemantic HTML5 Elements

hashtagCommon HTML Elements

hashtagHTML Forms Reference

hashtagHTML Tables

hashtagMultimedia Elements

hashtagCSS Quick Reference

hashtagCSS Syntax

hashtagHow to Add CSS

hashtagCSS Selectors

hashtagCSS Specificity

hashtagCommon CSS Properties

hashtagCSS Units Reference

hashtagFlexbox Cheat Sheet

hashtagFlex Container Properties

hashtagFlex Item Properties

hashtagCommon Flexbox Patterns

hashtagGrid Cheat Sheet

hashtagGrid Container Properties

hashtagGrid Item Properties

hashtagCommon Grid Patterns

hashtagResponsive Design

hashtagViewport Meta Tag (Required!)

hashtagMedia Queries

hashtagCommon Breakpoints

hashtagMedia Query Features

hashtagResponsive Images

hashtagResponsive Typography

hashtagCommon Patterns

hashtagPage Layouts

hashtagNavigation Patterns

hashtagCard Layouts

hashtagButton Styles

hashtagForms

hashtagAccessibility Checklist

hashtagHTML Accessibility

hashtagCSS Accessibility

hashtagKeyboard Accessibility

hashtagARIA (when semantic HTML isn't enough)

hashtagAccessibility Testing Tools

hashtagTroubleshooting Guide

hashtagCommon HTML Issues

hashtagCommon CSS Issues

hashtagDebugging with DevTools

hashtagCSS Debugging Checklist

hashtagBest Practices Summary

hashtagHTML Best Practices

hashtagCSS Best Practices

hashtagFile Organization

hashtagNaming Conventions

hashtagQuick Tips

hashtagPerformance

hashtagBrowser Compatibility

hashtagWorkflow

hashtagResources

hashtagKeyboard Shortcuts (DevTools)

hashtagRegular Expressions (Pattern Attribute)

HTML5 & CSS Quick Reference Guide

Table of Contents

HTML5 Quick Reference

Basic Document Structure

Semantic HTML5 Elements

Common HTML Elements

HTML Forms Reference

HTML Tables

Multimedia Elements

CSS Quick Reference

CSS Syntax

How to Add CSS

CSS Selectors

CSS Specificity

Common CSS Properties

CSS Units Reference

Flexbox Cheat Sheet

Flex Container Properties

Flex Item Properties

Common Flexbox Patterns

Grid Cheat Sheet

Grid Container Properties

Grid Item Properties

Common Grid Patterns

Responsive Design

Viewport Meta Tag (Required!)

Media Queries

Common Breakpoints

Media Query Features

Responsive Images

Responsive Typography

Common Patterns

Page Layouts

Navigation Patterns

Card Layouts

Button Styles

Forms

Accessibility Checklist

HTML Accessibility

CSS Accessibility

Keyboard Accessibility

ARIA (when semantic HTML isn't enough)

Accessibility Testing Tools

Troubleshooting Guide

Common HTML Issues

Common CSS Issues

Debugging with DevTools

CSS Debugging Checklist

Best Practices Summary

HTML Best Practices

CSS Best Practices

File Organization

Naming Conventions

Quick Tips

Performance

Browser Compatibility

Workflow

Resources

Keyboard Shortcuts (DevTools)

Regular Expressions (Pattern Attribute)