Web Development Reference

HTML & CSS Cheat Sheets

Converted into the same previous HTML reference format, with left navigation, responsive tables, formatted code elements, and the original cheat-sheet images preserved for visual reference.

Included: HTML basic tags, text formatting, headings, comments, links, images, tables, lists, forms, media and layouts, plus a comprehensive CSS property/selector reference covering syntax, selectors, backgrounds, borders, text, flexbox, grid, transitions, transforms, animations and more.

HTML Cheat Sheet

HTML Basic Tags

Element / Property	Description
`<!DOCTYPE>`	Defines the type of the document.
`<html>...</html>`	Root of an HTML document.
`<head>...</head>`	Container for all the metadata about an HTML document.
`<title>...</title>`	Defines the title for the document.
`<meta />`	Defines metadata like character set, viewport, keywords, page description, author, etc.
`<base />`	Specifies the default URL for all links on a page.
`<link />`	Defines links to external sources.
`<style>...</style>`	Defines style for a document.
`<script>...</script>`	Defines client-side scripts.
`<noscript>...</noscript>`	Specifies alternate content if the browser does not support scripts.
`<body>...</body>`	Represents the main body of a document.

HTML Text Formatting

Element / Property	Description
`<p>...</p>`	Paragraph
`<br />`	Single line break
`<hr />`	Horizontal Rule
`<b>...</b>`	Bold Text
`<i>...</i>`	Italic Text
`<small>...</small>`	Smaller Text
`<mark>...</mark>`	Marked / Highlighted Text
`<del>...</del>`	Deleted Text
`<ins>...</ins>`	Inserted Text
`<strong>...</strong>`	Important Text
`<em>...</em>`	Emphasized Text
`<sub>...</sub>`	Subscript
`<sup>...</sup>`	Superscript
`<blockquote>...</blockquote>`	Block Quotation
`<q>...</q>`	Inline Quotation
`<abbr>...</abbr>`	Abbreviations / Acronyms
`<address>...</address>`	Address
`<cite>...</cite>`	Citation
`<bdo>...</bdo>`	Changes text direction
`<code>...</code>`	Programming Code
`<pre>...</pre>`	Preformatted Text
`<samp>...</samp>`	Sample output of a program
`<kbd>...</kbd>`	Keyboard Input
`<var>...</var>`	Variable
`<dfn>...</dfn>`	Definition
`<meter>...</meter>`	Scalar Measurement
`<progress>...</progress>`	Progress bar
`<u>...</u>`	Underlined Text

HTML Headings

Element / Property	Description
`<h1>...</h1>`	Heading One
`<h2>...</h2>`	Heading Two
`<h3>...</h3>`	Heading Three
`<h4>...</h4>`	Heading Four
`<h5>...</h5>`	Heading Five
`<h6>...</h6>`	Heading Six

HTML Comments

Element / Property	Description
`<!-- Single Line comment -->`	Single-line comment
`<!-- ... -->`	Multiple-lines comment

HTML Links

Element / Property	Description
`<a>...</a>`	Hyperlink

HTML Images

Element / Property	Description
`<img />`	Image
`<map>...</map>`	Image Map with clickable area
`<area />`	Clickable Area in <map>
`<picture>...</picture>`	Group of pictures
`<figure>...</figure>`	Figures / Diagrams / Illustrations
`<figcaption>...</figcaption>`	Caption for <figure>
`<canvas>...</canvas>`	Graphics
`<svg>...</svg>`	SVG graphics

HTML Tables

Element / Property	Description
`<table>...</table>`	Table
`<tr>...</tr>`	Table Row
`<th>...</th>`	Table Header Cell
`<td>...</td>`	Table Data
`<caption>...</caption>`	Table Caption
`<thead>...</thead>`	Group of header contents
`<tbody>...</tbody>`	Group of body contents
`<tfoot>...</tfoot>`	Group of footer contents
`<colgroup>...</colgroup>`	Group of columns
`<col />`	Column in a <colgroup>

HTML Lists

Element / Property	Description
`<ul>...</ul>`	Unordered List
`<li>...</li>`	List Item
`<ol>...</ol>`	Ordered List
`<dl>...</dl>`	Description List
`<dt>...</dt>`	Terms of the description list
`<dd>...</dd>`	Describe each term of the description list

HTML Forms

Element / Property	Description
`<form>...</form>`	HTML Form
`<input />`	Input Field
`<label>...</label>`	Label for an input element
`<button>...</button>`	Clickable button
`<textarea>...</textarea>`	Multiline Text Input
`<select>...</select>`	Drop down list
`<option>...</option>`	An option in a dropdown list
`<optgroup>...</optgroup>`	Groups related options in dropdown list
`<fieldset>...</fieldset>`	Groups related elements in a form
`<legend>...</legend>`	Caption for <fieldset> element
`<datalist>...</datalist>`	List of options
`<output>...</output>`	Result

HTML Frames, Audio, Video & Others

Element / Property	Description
`<iframe>...</iframe>`	Inline Frame
`<audio>...</audio>`	Audio
`<video>...</video>`	Video
`<source />`	Resources for <audio>, <video> and <picture> elements
`<track />`	Text track for <audio> and <video> elements
`<embed />`	Container for external applications
`<object>...</object>`	Embedded Object
`<param />`	Parameter for <object>

HTML Layouts

Element / Property	Description
`<div>...</div>`	Division / Section / Block Container for HTML elements
`<span>...</span>`	Inline container for HTML elements
`<header>...</header>`	Header content of a document
`<main>...</main>`	Main content of a document
`<footer>...</footer>`	Footer content of a document
`<nav>...</nav>`	Navigation Links
`<section>...</section>`	Section in a document
`<article>...</article>`	Article in a document
`<aside>...</aside>`	Side content in a document
`<details>...</details>`	Additional details that user can hide or view on demand
`<summary>...</summary>`	Heading for <details> element
`<dialog>...</dialog>`	Dialog Box

CSS Cheat Sheet

CSS Introduction

Element / Property	Description
`CSS`	Styles used for Cascading Style Sheets; CSS is used to style HTML pages and control presentation.

CSS Syntax

Element / Property	Description
`Selector { property: value; }`	A CSS rule consists of a selector and one or more declarations.

CSS Insertion

Element / Property	Description
`External CSS`	Using a <link> element to connect an external stylesheet.
`Internal CSS`	Using a <style> element inside the HTML document.
`Inline CSS`	Defining CSS directly using the style attribute of an HTML element.

CSS Comments

Element / Property	Description
`/* Single Line Comment */`	CSS comments are written between /* and */ and are ignored by the browser.

CSS Margins

Element / Property	Description
`margin`	Sets the margin on all sides.
`margin-top / margin-bottom / margin-right / margin-left`	Sets the margin for an individual side.

CSS Padding

Element / Property	Description
`padding`	Sets padding on all sides.
`padding-top / padding-bottom / padding-right / padding-left`	Sets padding for an individual side.

CSS Visibility

Element / Property	Description
`visibility`	Controls whether an element is visible: visible, hidden, collapse, or inherit.
`display`	Controls whether and how an element is displayed, such as inline, block, grid, flex, none, etc.

CSS Outline

Element / Property	Description
`outline-style`	Controls outline style such as dotted, dashed, solid, double, groove, ridge, inset, outset, none, inherit.
`outline-color`	Sets outline color.
`outline-width`	Sets outline width.
`outline-offset`	Sets the space between outline and border.
`outline`	Shorthand for outline style, width and color.

CSS Table

Element / Property	Description
`table-layout`	Controls table layout: auto, fixed, initial, inherit.
`caption-side`	Controls caption position: top, bottom, initial, inherit.
`empty-cells`	Controls display of empty cells: show, hide, initial, inherit.
`border-spacing`	Controls spacing between table cells.
`border-collapse`	Controls whether table borders are collapsed or separated.

CSS Text

Element / Property	Description
`color`	Sets text color.
`font-family`	Sets font family.
`font-size`	Sets font size.
`font-style`	normal, italic, oblique, inherit.
`font-variant`	normal, small-caps, inherit.
`font-weight`	normal, bold, bolder, lighter or numeric weights.
`font`	Shorthand for font properties.
`text-align`	left, right, center, justify, initial, inherit.
`vertical-align`	baseline, length, sub, super, top, middle, bottom, etc.
`text-align-last`	Controls alignment of the last line.
`direction`	Controls text direction: ltr or rtl.
`text-decoration-line`	underline, overline, line-through, blink, none.
`text-decoration-style`	solid, double, dotted, dashed, wavy, initial, inherit.
`text-decoration-color`	Sets decoration color.
`text-decoration-thickness`	Controls decoration thickness.
`text-decoration`	Shorthand for text decoration.
`text-transform`	none, capitalize, uppercase, lowercase, initial, inherit.
`text-indent`	Sets indentation of the first line.
`line-height`	Sets line height.
`letter-spacing`	Controls spacing between letters.
`word-spacing`	Controls spacing between words.
`white-space`	normal, nowrap, pre, pre-line, pre-wrap, initial, inherit.
`text-shadow`	Adds shadow to text.
`word-break`	normal, break-all, keep-all, break-word.
`word-wrap`	normal, break-word.
`writing-mode`	horizontal-tb, vertical-rl, vertical-lr.
`text-overflow`	clip, ellipsis, initial, inherit.
`text-justify`	auto, inter-word, inter-character, none, initial, inherit.

CSS Selectors

Element / Property	Description
`Name Selector`	p { }
`ID Selector`	#id { }
`Class Selector`	.class { }
`Universal Selector`	* { }
`Group Selector`	p, div, span { }
`Descendant Selector`	div p { }
`Child Selector`	div > p { }
`Adjacent Sibling Selector`	div + p { }
`General Sibling Selector`	div ~ p { }
`Pseudo Class Selector`	:hover, :focus, :checked, :visited, :enabled, :disabled, :first-child, :last-child, :only-child, :nth-child(), :first-of-type, :last-of-type, :nth-of-type(), etc.

CSS Background

Element / Property	Description
`background-color`	Sets background color or transparent.
`background-image`	Specifies one or more background images.
`background-repeat`	repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
`background-position`	Controls image position: left/right/top/bottom/center or percentages/lengths.
`background-size`	auto, cover, contain, length, percentage.
`background-attachment`	scroll, fixed, local, initial, inherit.
`background-clip`	border-box, padding-box, content-box, initial, inherit.
`background-origin`	padding-box, border-box, content-box.
`background-blend-mode`	Controls blending mode of background layers.
`background`	Shorthand background property.

CSS Borders

Element / Property	Description
`border`	Sets border width, style and color.
`border-top / right / bottom / left`	Controls a particular border side.
`border-style`	dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.
`border-width`	thin, medium, thick or length.
`border-color`	Sets border color.
`border-radius`	Rounds corners.
`border-top-left-radius / ...`	Controls individual corner radii.
`border-image`	Uses an image as a border.
`border-image-source`	Specifies border image source.
`border-image-slice`	Specifies how the border image is sliced.
`border-image-width`	Specifies border image width.
`border-image-outset`	Specifies distance border image extends beyond border.
`border-image-repeat`	repeat, stretch, round, space.

CSS Dimensions

Element / Property	Description
`height / width`	auto, length, %, initial, inherit.
`max-height / max-width`	none, length, %, initial, inherit.
`min-height / min-width`	length, %, initial, inherit.

CSS Lists

Element / Property	Description
`list-style-type`	disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, etc.
`list-style-image`	Specifies an image as the list marker.
`list-style-position`	inside, outside, initial, inherit.
`list-style`	Shorthand for list properties.

CSS Positions

Element / Property	Description
`position`	static, absolute, fixed, relative, sticky, initial, inherit.
`top / bottom / left / right`	Offset positioned elements.
`float`	none, left, right, initial, inherit.
`clear`	none, left, right, both, initial, inherit.
`clip`	auto, shape, initial, inherit.
`z-index`	Controls stacking order.

CSS Shadow

Element / Property	Description
`box-shadow`	Adds one or more shadows around a box.
`text-shadow`	Adds shadow around text.

CSS Overflow

Element / Property	Description
`overflow`	visible, hidden, scroll, auto, initial, inherit.
`overflow-x / overflow-y`	Controls overflow in the horizontal or vertical direction.
`overflow-wrap`	Controls whether long words can be broken.

CSS Columns

Element / Property	Description
`column-count`	Number of columns.
`column-gap`	Gap between columns.
`column-width`	Width of columns.
`column-span`	Whether an element spans all columns.
`column-fill`	auto, balance, initial, inherit.
`column-rule-style`	none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
`column-rule-color`	Sets column rule color.
`column-rule-width`	Sets column rule width.
`column-rule`	Shorthand for column rule.
`columns`	Shorthand for column-width and column-count.

CSS Transition

Element / Property	Description
`transition-property`	none, all, initial, inherit or selected property.
`transition-duration`	Time in seconds or milliseconds.
`transition-delay`	Delay before transition starts.
`transition-timing-function`	linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(), steps(), etc.
`transition`	Shorthand transition property.

CSS 2D / 3D

Element / Property	Description
`transform`	none or transform functions such as translate, rotate, scale, skew, matrix, perspective.
`transform-origin`	Sets the origin for transforms.
`transform-style`	flat or preserve-3d.
`perspective`	Sets perspective for 3D transforms.
`perspective-origin`	Sets the perspective origin.
`backface-visibility`	Controls visibility of the back face.

CSS Animation

Element / Property	Description
`animation-name`	Specifies the @keyframes name.
`animation-duration`	Specifies animation duration.
`animation-delay`	Specifies animation delay.
`animation-direction`	normal, reverse, alternate, alternate-reverse.
`animation-iteration-count`	Number of times animation runs; infinite for unlimited.
`animation-play-state`	paused, running.
`animation-fill-mode`	none, forwards, backwards, both.
`animation-timing-function`	Timing function used by the animation.
`animation`	Shorthand for animation properties.

CSS Flexible

Element / Property	Description
`order`	Controls visual order of flex items.
`flex-basis`	Initial main size of a flex item.
`flex-grow`	Controls how much an item grows.
`flex-shrink`	Controls how much an item shrinks.
`flex`	Shorthand for flex-grow, flex-shrink and flex-basis.
`align-content`	Controls cross-axis alignment of flex lines.
`align-items`	Controls alignment of flex items.
`align-self`	Overrides align-items for a particular item.
`justify-content`	Controls distribution along the main axis.

CSS Grids

Element / Property	Description
`grid`	Shorthand grid property.
`grid-template-columns / rows`	Defines columns and rows.
`grid-template-areas`	Defines named grid areas.
`grid-template`	Shorthand for grid template properties.
`grid-column / grid-row`	Controls grid item placement.
`grid-column-start / end`	Defines grid column start/end lines.
`grid-row-start / end`	Defines grid row start/end lines.
`grid-gap / row-gap / column-gap`	Controls gaps between grid tracks.
`grid-area`	Assigns an item to a named grid area.
`grid-auto-columns / rows / flow`	Controls automatically created grid tracks and placement.
`justify-items / align-items / place-items`	Controls alignment of grid items.
`justify-content / align-content / place-content`	Controls grid alignment inside the container.

CSS Miscellaneous

Element / Property	Description
`all`	Resets or controls all properties: initial, inherit, unset.
`box-sizing`	content-box or border-box.
`break-after / break-before / break-inside`	Controls page/column/region breaking.
`image-rendering`	auto, smooth, high-quality, pixelated, crisp-edges.
`object-fit`	fill, contain, cover, none, scale-down.
`object-position`	Controls position of replaced content.
`opacity`	Sets opacity.
`resize`	none, both, horizontal, vertical, initial, inherit.
`tab-size`	Controls tab width.
`user-select`	Controls whether text can be selected.