HTML & CSS REVIEWER

PART 01

HTML

1.1 Document Structure

Tag	Description
<!DOCTYPE html>	Declares the document as HTML5
<html>	Root element of the page
<head>	Contains metadata (not visible on page)
<title>	Sets the browser tab title
<meta charset="UTF-8">	Sets character encoding
<meta name="viewport" ...>	Makes page responsive on mobile
<meta name="description" ...>	SEO description
<link rel="stylesheet">	Links an external CSS file
<script src="app.js">	Links/embeds JavaScript
<body>	Contains all visible page content

1.2 Text & Headings

Tag	Description
<h1>–<h6>	Headings, largest (h1) to smallest (h6)
<p>	Paragraph
<br>	Line break (self-closing)
<hr>	Horizontal rule / divider
<strong>	Bold, semantically important text
<b>	Bold, no semantic meaning
<em>	Italic, semantically emphasized
<i>	Italic, no semantic meaning
<small>	Smaller text
<mark>	Highlighted text
<del> / <ins>	Strikethrough (deleted) / underlined (inserted) text
<sub> / <sup>	Subscript / superscript
<code>	Inline code snippet
<pre>	Preformatted text (preserves whitespace)
<blockquote> / <q>	Block quotation / inline short quotation
<abbr title="...">	Abbreviation with tooltip
<span>	Generic inline container

1.3 Lists

Tag	Description
<ul>	Unordered (bulleted) list
<ol>	Ordered (numbered) list
<li>	List item
<dl>	Description list
<dt>	Term in a description list
<dd>	Description / definition of the term

1.4 Links & Navigation

Tag / Attribute	Description
<a href="url">	Hyperlink
target="_blank"	Opens link in a new tab
rel="noopener noreferrer"	Security best practice with target="_blank"
href="#id"	Links to an element on the same page
href="mailto:x@y.com"	Opens default email client
href="tel:+123"	Initiates a phone call on mobile
<nav>	Semantic navigation container

1.5 Images & Media

Tag	Description
<img src alt>	Embeds an image; alt is required for accessibility
<figure> / <figcaption>	Groups media with a caption / the caption itself
<picture> / <source>	Container for multiple responsive image sources
<audio controls>	Embeds audio with playback controls
<video controls>	Embeds video with playback controls
<iframe src="...">	Embeds another page / document
srcset / sizes	Attributes for responsive image resolution switching

1.6 Tables

Tag	Description
<table>	Table container
<thead> / <tbody> / <tfoot>	Groups header / body / footer content
<tr>	Table row
<th>	Header cell (bold, centered by default)
<td>	Standard data cell
colspan="2" / rowspan="2"	Merges cells across columns / rows
<caption>	Table title / caption

1.7 Forms

Tag / Attribute	Description
<form action method>	Form container; method = GET or POST
<input type="text">	Single-line text field
type="email / password / number"	Validated email / masked / numeric input
type="checkbox / radio"	Checkbox toggle / radio button (single choice within a name group)
type="date / file / range"	Date picker / file upload / slider control
type="submit / hidden"	Submits the form / invisible data sent with it
<textarea>	Multi-line text input
<select> / <option>	Dropdown container / item inside it
<optgroup label>	Groups related <option>s
<label for="id">	Accessible label tied to an input's id
<fieldset> / <legend>	Groups related controls / caption for the group
<button type=...>	Clickable button (submit / button / reset)
placeholder / required / disabled / readonly	Hint text / mandatory / disabled / visible-not-editable field
value / name	Default value / key used when data is submitted
min / max / step / pattern	Constraints and custom validation pattern
autocomplete / autofocus	Browser autofill behavior / focuses field on load
<datalist>	Autocomplete suggestions for an input

1.8 Semantic Layout Elements

Tag	Description
<header> / <footer>	Introductory / footer content for page or section
<main>	The main unique content of the page (one per page)
<section>	Thematic grouping of content
<article>	Self-contained, independently distributable content
<aside>	Tangential content (sidebars, callouts)
<div>	Generic block container, no semantic meaning
<details> / <summary>	Collapsible widget / its visible heading
<dialog>	Native modal / dialog box
<template>	Hidden content cloned via JavaScript

1.9 Global Attributes

Work on almost any tag.

Attribute	Description
id / class	Unique identifier / space-separated list of CSS classes
style / title	Inline CSS / tooltip text on hover
data-*	Custom data attribute (e.g. data-user-id="5")
hidden	Hides the element
tabindex	Controls keyboard tab order
contenteditable / draggable	Makes content editable / enables drag-and-drop
lang	Language of the element's content
aria-* / role	Accessibility attributes / ARIA role for assistive tech

PART 02

CSS

2.1 Ways to Add CSS

/* Inline:   <p style="color:red;">text</p>            */
/* Internal: <style> p { color:red; } </style> in head  */
/* External: <link rel="stylesheet" href="style.css">   */

2.2 Selectors

Selector	Example	Description
Universal	*	Selects everything
Type	p	Selects all <p> elements
Class	.box	Selects elements with class="box"
ID	#main	Selects the element with id="main"
Grouping	h1, h2	Applies rule to multiple selectors
Descendant	div p	Any <p> inside a <div>, any depth
Child	div > p	Direct <p> children of <div> only
Adjacent sibling	h1 + p	The <p> immediately after an <h1>
General sibling	h1 ~ p	All <p> siblings after an <h1>
Attribute	[type="text"]	Elements with matching attribute value
Attribute contains	[class*="btn"]	Attribute value contains a substring
Attribute starts	[href^="https"]	Attribute value starts with a string
Attribute ends	[src$=".png"]	Attribute value ends with a string
:hover / :focus / :active	a:hover	Mouse-over / focused / being-clicked states
:first-child / :last-child	li:first-child	First / last child of its parent
:nth-child(n)	li:nth-child(2n)	Matches by formula / position (e.g. even items)
:not(x)	p:not(.intro)	Excludes elements matching x
:checked / :disabled	input:checked	Checked checkboxes/radios / disabled form elements
::before / ::after	.box::before	Inserts generated content before / after element
::placeholder / ::first-line	input::placeholder	Styles placeholder text / the first line of a block

2.3 Box Model

Property	Description
width / height	Size of the content box
padding	Space between content and border
border	Line around the padding (width style color)
margin	Space outside the border, between elements
box-sizing: border-box	Makes width/height include padding & border (recommended default)
box-shadow: x y blur spread color	Drop shadow outside (or inset) the box
outline	Line drawn outside the border, doesn't affect layout

2.4 Display & Positioning

Property / Value	Description
display: block / inline / inline-block	Full-width new line / flows with text / inline but respects box size
display: none	Removes element from layout entirely
display: flex / grid	Enables flexbox / grid layout on children
visibility: hidden	Hides element but keeps its space
position: static	Default; normal document flow
position: relative	Offset relative to its normal position
position: absolute	Positioned relative to nearest positioned ancestor
position: fixed	Positioned relative to the viewport, stays on scroll
position: sticky	Toggles between relative and fixed on scroll
top / right / bottom / left	Offsets used with non-static position
z-index	Stacking order (higher = on top)
overflow: hidden / scroll / auto	Controls content that exceeds its box
float / clear	Legacy text-wrap around element / stops the wrapping

2.5 Flexbox — Container

Property	Description
display: flex	Activates flexbox
flex-direction	row \| row-reverse \| column \| column-reverse
justify-content	Aligns items on the main axis (flex-start, center, space-between…)
align-items	Aligns items on the cross axis (stretch, center, flex-start…)
align-content	Aligns multiple lines when wrapping
flex-wrap	nowrap \| wrap \| wrap-reverse
gap	Space between flex items

2.6 Flexbox — Items

Property	Description
flex-grow / flex-shrink	How much an item grows / shrinks relative to siblings
flex-basis	Starting size before growing/shrinking
flex: 1	Shorthand — item grows/shrinks to fill space equally
align-self	Overrides align-items for a single item
order	Changes visual order without changing HTML

2.7 Grid — Container

Property	Description
display: grid	Activates grid layout
grid-template-columns	Defines columns, e.g. 1fr 1fr 1fr or repeat(3, 1fr)
grid-template-rows	Defines row sizes
grid-template-areas	Named layout regions as a text map
gap / row-gap / column-gap	Space between grid cells
justify-items / align-items	Horizontal / vertical alignment of items in their cell
justify-content / align-content	Aligns the whole grid horizontally / vertically

2.8 Grid — Items

Property	Description
grid-column: 1 / 3	Item spans from column line 1 to 3
grid-row: 1 / 2	Item spans from row line 1 to 2
grid-column: span 2	Item spans 2 columns
grid-area: name	Places item into a named template area
justify-self / align-self	Aligns a single item within its cell

2.9 Typography

Property	Description
font-family	Typeface stack, e.g. "Helvetica", Arial, sans-serif
font-size	Text size (px, em, rem, %)
font-weight	Boldness (normal, bold, 100–900)
font-style	normal \| italic \| oblique
line-height	Space between lines of text
letter-spacing	Space between characters
text-align	left \| right \| center \| justify
text-decoration	underline \| line-through \| none
text-transform	uppercase \| lowercase \| capitalize
text-shadow: x y blur color	Shadow behind text
white-space: nowrap	Prevents text from wrapping
text-overflow: ellipsis	Adds "…" to clipped overflow text
word-break	Controls how words break at line ends

2.10 Colors & Backgrounds

Property	Description
color	Text color
background-color	Element's background color
background-image: url(...)	Sets a background image
background-size: cover / contain	How the background image scales
background-position / -repeat	Positions / repeats the background image
opacity	Transparency of the whole element (0–1)
Color formats	#hex, rgb(), rgba(), hsl(), named colors (red)
linear-gradient(dir, c1, c2)	Linear color gradient, used with background
radial-gradient(c1, c2)	Circular / elliptical gradient

2.11 Borders & Radius

Property	Description
border: 1px solid black	Shorthand for width, style, color
border-radius	Rounds corners (50% makes a circle)
border-top / -right / -bottom / -left	Style a single side
border-collapse: collapse	Merges table borders into one line

2.12 Transitions & Animation

Property	Description
transition: property duration timing delay	Animates a property change smoothly
transition-timing-function	ease, linear, ease-in-out, cubic-bezier(...)
transform: translate(x,y)	Moves an element
transform: scale(n)	Resizes an element
transform: rotate(deg) / skew(deg)	Rotates / skews an element
@keyframes name {...}	Defines an animation sequence
animation: name duration timing count	Applies a @keyframes animation
animation-iteration-count: infinite	Loops the animation forever
animation-direction: alternate	Plays forward then backward

2.13 Units & Values

Unit	Description
px	Absolute pixel value
%	Relative to the parent element
em	Relative to the parent's font size
rem	Relative to the root (<html>) font size
vw / vh	1% of viewport width / height
vmin / vmax	1% of the smaller / larger viewport dimension
fr	Fractional unit, used in CSS Grid
auto	Browser calculates the value
calc(100% - 20px)	Computes a value from mixed units

2.14 Responsive Design

/* Media query: applies styles under a condition */
@media (max-width: 768px) {
  .container { flex-direction: column; }
}

Concept	Description
@media (max-width: Npx)	Styles apply when viewport ≤ N px (mobile-first breakpoint)
@media (min-width: Npx)	Styles apply when viewport ≥ N px
@media (orientation: landscape)	Targets landscape / portrait orientation
Mobile-first approach	Write base styles for small screens, then add min-width overrides
<meta name="viewport">	Required in HTML for media queries to work correctly on mobile

2.15 CSS Variables (Custom Properties)

:root {
  --main-color: #3498db;
  --spacing: 16px;
}
.box {
  color: var(--main-color);
  padding: var(--spacing);
}

2.16 Pseudo-classes Quick Reference

Pseudo-class	Description
:root	Targets the document's root element (<html>)
:first-of-type / :last-of-type	First / last sibling of a specific tag type
:nth-of-type(n)	Matches by position among siblings of the same tag
:only-child	Element is the only child of its parent
:empty	Element has no children / content
:target	Element matches the URL's current #fragment
:enabled / :disabled	Form elements based on interactive state
:valid / :invalid	Form elements based on validation state
:placeholder-shown	Input currently showing its placeholder

2.17 Common Shorthand Cheatsheet

margin: 10px;                  /* all sides */
margin: 10px 20px;             /* top/bottom  left/right */
margin: 10px 20px 30px 40px;   /* top right bottom left (clockwise) */

font: italic bold 16px/1.5 Arial, sans-serif;
/* style weight size/line-height family */

background: #fff url(bg.png) no-repeat center/cover;

border: 2px dashed red;        /* width style color */

PART 03

Modern & Advanced CSS

3.1 Modern Selectors

Selector	Example	Description
:is()	:is(h1, h2, h3){color:navy;}	Matches any selector in the list (reduces repetition)
:where()	:where(h1, h2){margin:0;}	Like :is() but has zero specificity
:has()	div:has(img)	Selects a parent if it contains a matching child ("parent selector")
:focus-visible	button:focus-visible	Focus styles only for keyboard navigation, not mouse clicks
:focus-within	form:focus-within	Matches a container if any child inside it has focus
:nth-last-child(n)	li:nth-last-child(2)	Counts from the end instead of the start
:in-range / :out-of-range	input:in-range	Number input value within / outside its min/max
:default	input:default	The default option / checkbox on page load
:read-only / :read-write	—	Matches editable vs. non-editable form fields

3.2 Useful CSS Functions

Function	Example	Description
clamp(min, preferred, max)	font-size: clamp(1rem, 2vw, 2rem);	Fluid value that never goes below/above the limits
min()	width: min(90%, 600px);	Uses whichever value is smallest
max()	width: max(50%, 300px);	Uses whichever value is largest
calc()	width: calc(100% - 40px);	Math with mixed units
var()	color: var(--main, blue);	Reads a custom property, with optional fallback
repeat()	repeat(3, 1fr)	Repeats a grid track pattern
minmax()	minmax(100px, 1fr)	Sets a min and max size for a grid track
env()	env(safe-area-inset-top)	Reads device safe-area values (notches, etc.)
attr()	content: attr(data-label);	Pulls an HTML attribute's value into CSS content

3.3 @-Rules

Rule	Description
@media	Conditional styles based on viewport / device
@supports (display: grid) {...}	Applies styles only if the browser supports a feature
@font-face {...}	Loads a custom web font
@import url(...)	Imports another stylesheet (best avoided for performance)
@keyframes	Defines animation steps
@container (min-width: 400px) {...}	Styles based on a parent container's size, not the viewport
@layer name {...}	Groups styles into cascade layers to control specificity order
@page	Styles for printed pages
@charset "UTF-8";	Declares the stylesheet's character encoding

3.4 Grid: Advanced

Property / Value	Description
subgrid	Child grid inherits the parent's track sizing
grid-auto-flow: dense	Fills gaps in the grid automatically
grid-auto-rows / -columns	Sizes implicitly-created tracks
place-items: center	Shorthand for align-items + justify-items
place-content: center	Shorthand for align-content + justify-content
place-self: center	Shorthand for align-self + justify-self

3.5 Visual Effects

Property	Description
filter: blur(5px)	Blurs the element
filter: brightness(1.2)	Adjusts brightness
filter: grayscale(100%)	Converts to grayscale
filter: drop-shadow(x y blur color)	Shadow that follows transparent shapes (unlike box-shadow)
backdrop-filter: blur(10px)	Blurs whatever is behind a transparent element (frosted-glass)
mix-blend-mode	Blends an element with what's beneath it (multiply, screen, overlay…)
clip-path: circle(50%)	Clips the element into a custom shape
aspect-ratio: 16 / 9	Forces an element to maintain a width-to-height ratio
object-fit: cover	Controls how <img>/<video> content fills its box
object-position	Positions the content within object-fit
resize: both	Lets the user manually resize an element (e.g. <textarea>)
cursor: pointer	Changes the mouse cursor on hover
user-select: none	Prevents text selection
pointer-events: none	Element ignores mouse/touch clicks
scroll-behavior: smooth	Smooth scrolling for anchor links
scroll-snap-type / -align	Snaps scrolling to fixed positions (carousels)
will-change: transform	Hints the browser to optimize for an upcoming animation

3.6 Print Styles

@media print {
  nav, footer, .no-print { display: none; }
  body { color: black; background: white; }
}

PART 04

SVG & Canvas Basics

Tag / Property	Description
<svg width height viewBox>	Container for scalable vector graphics
<circle cx cy r>	Draws a circle
<rect x y width height rx>	Draws a rectangle (rx = rounded corners)
<line x1 y1 x2 y2>	Draws a straight line
<path d="M...L...">	Draws a custom shape/path using path commands
<polygon points="...">	Draws a closed multi-point shape
<text x y>	Renders text inside SVG
fill / stroke	Fill color / outline color of an SVG shape
stroke-width	Thickness of the outline
<canvas id width height>	2D/3D drawing surface controlled via JavaScript
getContext("2d")	JS API entry point for drawing on a <canvas>

PART 05

Accessibility (ARIA) Essentials

Attribute / Tag	Description
alt	Text alternative for images (use alt="" for decorative images)
aria-label="..."	Accessible name when there's no visible text
aria-labelledby="id"	Points to another element that labels this one
aria-describedby="id"	Points to an element with extra descriptive text
aria-hidden="true"	Hides purely decorative content from screen readers
aria-live="polite"	Announces dynamic content updates to screen readers
aria-expanded="true/false"	State of a collapsible element (accordion, dropdown)
aria-checked / aria-disabled	State of a custom checkbox/switch / marks disabled for assistive tech
role="button"	Tells assistive tech how to treat a non-semantic element
role="alert"	Announces important, time-sensitive messages immediately
tabindex="0" / "-1"	Adds to natural tab order / removes but allows programmatic focus
Skip link	<a href="#main">Skip to content</a> placed first in <body>
Focus outline	Never fully remove outline on :focus without a visible replacement

PART 06

CSS Frameworks Overview

6.1 Bootstrap — Component / Utility Hybrid

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-md-6">Half width on medium+ screens</div>
    <div class="col-md-6">Half width on medium+ screens</div>
  </div>
</div>

<button class="btn btn-primary">Click me</button>
<div class="alert alert-danger">Error message</div>

Class Pattern	Description
container / container-fluid	Responsive centered wrapper / full-width wrapper
row / col-*	12-column grid system
col-md-6, col-lg-4	Column width at specific breakpoints
btn btn-primary / -secondary / -danger	Pre-styled buttons
d-flex, d-none, d-block	Display utilities
justify-content-center, align-items-center	Flex alignment utilities
m-, p- (e.g. mt-3, px-2)	Margin/padding spacing utilities (0–5 scale)
text-center, text-danger	Text alignment / color utilities
card, card-body, card-title	Card component structure
navbar, nav-link	Navigation bar components

6.2 Tailwind CSS — Utility-First

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center justify-between p-4 bg-white shadow-md rounded-lg">
  <h2 class="text-xl font-bold text-gray-800">Title</h2>
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    Click me
  </button>
</div>

Class Pattern	Description
flex, grid, block, hidden	Display utilities
items-center, justify-between	Flex/grid alignment
p-4, px-2, py-6, m-4	Padding/margin (numeric scale, 1 unit = 0.25rem)
text-sm / lg / xl / 2xl	Font size scale
font-bold / medium / light	Font weight
bg-{color}-{shade}	Background color, e.g. bg-blue-500
text-{color}-{shade}	Text color
rounded, rounded-full, rounded-lg	Border radius
shadow, shadow-md, shadow-lg	Box shadow presets
hover: focus: active: prefix	State-based variants, e.g. hover:bg-blue-600
sm: md: lg: xl: prefix	Responsive breakpoint variants
w-full, h-screen	Width/height utilities
gap-4, space-x-2	Spacing between flex/grid children
transition, duration-300	Animation utilities

6.3 Other Notable Frameworks

Framework	Description
Bulma	CSS-only, Flexbox-based, no JavaScript required
Foundation	Enterprise-grade responsive framework, similar to Bootstrap
Materialize / Material UI	Implements Google's Material Design system
Semantic UI	Human-friendly class names (ui button, ui segment)
Skeleton	Minimal boilerplate framework for small projects
Pico.css	Classless framework — styles semantic HTML with no classes needed
Chakra UI / Shadcn UI	Component libraries typically paired with React

PART 07

Class & Div Naming Conventions

7.1 BEM (Block, Element, Modifier)

<div class="card card--featured">
  <h2 class="card__title">Title</h2>
  <p class="card__text">Description text</p>
  <button class="card__button card__button--disabled">Buy</button>
</div>

Part	Syntax	Description
Block	.card	Standalone, reusable component
Element	.card__title	A part of the block (double underscore)
Modifier	.card--featured	A variant/state of the block (double hyphen)

7.2 Utility-First Naming (Tailwind-style)

Classes describe a single style rule directly on the element (p-4, text-lg, flex) instead of naming the component. Fast to write, but HTML can get class-heavy.

7.3 Common Semantic / Structural Class Names

Class Name Convention	Typical Use
.container / .wrapper	Centers and constrains content width
.row / .col	Grid layout structure
.header / .footer / .sidebar	Layout landmarks
.btn, .btn-primary, .btn-outline	Button styling variants
.card, .card-header, .card-body	Card-style UI components
.active, .disabled, .is-open, .is-hidden	JS-toggled state classes
.visually-hidden / .sr-only	Visually hides content but keeps it for screen readers
.clearfix	Legacy fix for collapsing floated containers
.text-, .bg-, .mt-*	Utility naming pattern (property-value abbreviation)

7.4 Naming Best Practices

Prefer lowercase, hyphen-separated class names (main-nav, not MainNav or main_nav).
Name classes by purpose/role (.error-message) rather than appearance (.red-text) so they still make sense if the style changes.
Keep specificity low — favor classes over IDs for styling; reserve IDs for JS hooks/anchors/accessibility.
Pick one methodology (BEM, utility-first, or a framework's convention) and stay consistent across the project.

PART 08

CSS Preprocessors (Sass / SCSS)

// Variables
$primary-color: #3498db;

// Nesting
.card {
  padding: 1rem;
  &:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2); }
  .title { font-weight: bold; }
}

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box { @include flex-center; }

// Partials & imports
@use "variables";

// Functions/operations
.item { width: 100px + 20px; }

Feature	Description
$variable	Reusable value (Sass) — native CSS uses --variable instead
&	References the parent selector when nesting
@mixin / @include	Reusable style blocks
@extend	Inherits styles from another selector
@if / @else	Conditional logic inside stylesheets
@each, @for	Loops for generating repetitive styles
@use / @forward	Modern module import system (replaces @import)

Quick Tips

Always pair <img> with a meaningful alt attribute for accessibility.
Use semantic tags (<header>, <nav>, <main>, <footer>) instead of generic <div>s — it helps SEO and screen readers.
Set box-sizing: border-box globally to make sizing predictable.
Prefer rem for font sizes so text scales with user/browser settings.
Use Flexbox for 1-dimensional layouts; use Grid for 2-dimensional layouts.
Mobile-first CSS (base styles + min-width media queries) tends to produce cleaner responsive code.