HTML & CSS Cheatsheet

A quick reference guide to commonly used HTML elements and CSS selectors/properties.

HTML Elements Cheatsheet

Basic Structure

Element	Description
`<html>`	Root element of an HTML document.
`<head>`	Contains metadata and links to external resources.
`<body>`	Contains the visible content of the document.

Text Elements

Element	Description
`<p>`	Defines a paragraph.
`<h1> - <h6>`	Defines headings, from largest (`<h1>`) to smallest (`<h6>`).
`<a>`	Defines a hyperlink.
`<strong>`	Indicates strong importance.
`<em>`	Indicates emphasized text.
`<mark>`	Highlights text.
`<span>`	Used for grouping inline content.
`<code>`	Denotes a fragment of code.

Media Elements

Element	Description
`<img>`	Embeds an image.
`<video>`	Embeds a video file.
`<audio>`	Embeds an audio file.

Form Elements

Element	Description
`<form>`	Defines a form.
`<input>`	Defines an input field.
`<button>`	Defines a clickable button.
`<label>`	Labels an input field.

CSS Selectors & Properties Cheatsheet

Selectors

Selector	Description
`*`	Universal selector, matches all elements.
`element`	Type selector, matches specific HTML elements (e.g., `div`).
`.class`	Class selector, matches elements with a specific class.
`#id`	ID selector, matches an element with a specific ID.
`element, element`	Group selector, matches multiple elements.
`element element`	Descendant selector, matches children of a specific element.

Properties

Property	Description
`color`	Sets the text color.
`background-color`	Sets the background color.
`font-size`	Sets the size of the text.
`margin`	Sets the outer spacing around an element.
`padding`	Sets the inner spacing inside an element.
`border`	Sets the border around an element.