HTML/CSS Cheatsheet

HTML: Elements and Structure

Top of Page

Tag/Attribute	Element	Description
<!DOCTYPE html>	Document Type Declaration	Required as the first line in an HTML document. This is an instruction to the browser about what type of document to expect.
<html>	HTML	Root of an HTML document. Should be added after the declaration. Contains all content/structure for an HTML document.
<head>	Head	Contains general information about an HTML page that isn't displayed on the page itself. This information is called metadata and includes things like the title of the HTML document and links to stylesheets.
<title>	Title	Defines the title of an HTML document. Displayed in browser's tab. Can only be contained inside a document's <head> element.
<body>	Body	Represents the content of an HTML document. Content inside these tags are rendered on web browsers.
<div>	Div	Short for "division." Used as a container that divides an HTML document into sections. Can contain flow content such as headings, paragraphs, links, images, etc.
<p>	Paragraph	Contains and displays a block of text.
<span>	Span	Inline container for text and can be used to group text for styling purposes.
<em>	Emphasis	Emphasizes text by italicizing it.
<strong>	Strong	Highlights important, serious, or urgent text by making it bold.
<br> *self-closing tag*	Line Break	Creates a line break in text.
<ul>	Unordered List	Creates a (bullet) list of items in no particular order.
<ol>	Ordered List	Creates a (numbered) list of items in sequential order.
<li>	List Item	Creates list items.
<a>	Anchor	Creates hyperlinks in an HTML document. "href" attribute determines the location the anchor element points to. "target" attribute specifies where a hyperlink should be opened. Can create hyperlinks to different parts of the same HTML document using the "href" attribute with "#" followed by the "id" of the element to link to.
<img> *self-closing tag*	Image	Embeds images in documents. "src" attribute is mandatory and contains the image URL. "alt" attribute creates text that will be displayed if an image fails to render due to an incorrect URL.
<style>	Style	Placed in HTML to allow for CSS styling. "style" attribute can also be used for inline styling.
<link>	Link	Used to link HTML documents to external resources like CSS files. "href" attribute specifies the URL to the external resource. "rel" attribute specifies the relationship of the linked document to the current document. "type" attribute defines the type of content being linked.

HTML: Tables

Top of Page

Tag/Attribute	Element	Description
<table>	Table	Creates a table that represents a 2-D table made of rows and columns.
<thead>	Table Head	Defines the headings of table columns encapsulated in table rows.
<th>	Table Heading	Adds titles to rows and columns of a table and must be enclosed in a table row element.
<tbody>	Table Body	Contains all table data other than table heading and table footer content.
<tr>	Table Row	Adds rows to a table before adding table data and table headings.
<td>	Table Data	Adds a cell of data to a table. Nested inside a table row element.
<colspan>	Column Span	Indicates how many columns that particular cell should span within a table. Nested in table header or table data element.
<rowspan>	Row Span	Indicates how many rows that particular cell should span within a table. Nested in table header or table data element.
<tfoot>	Table Footer	Uses table rows to give footer content or to summarize content at the end of a table.

HTML: Forms

Top of Page

Tag/Attribute	Element	Description
<form>	Form	Used to collect and send information to an external source. "action" attribute determines where the information is sent. "method" attribute determines how the information is sent and processed. When a <form> is submitted, the "name" of the fields that accept input and the "value" of those fields are sent as "name=value" pairs.
<input> *self-closing tag*	Input	Renders a variety of input fields on a webpage form. "type" attribute determines how it gets rendered (i.e., text field, checkbox, button, etc.). "name" attribute is mandatory. "required" attribute specifies that the field must include a value. "min" & "max" attributes are used for Number and Range Inputs to set minimum / maximum acceptable numerical values. "minlength" & "maxlength" attributes are used for Text Inputs and Textareas to set a minimum / maximum number of characters for a text field. "pattern" attribute is assigned to a regular expression, or regex, which is a sequence of characters that make up a search pattern. Can only submit a <form> if the input matches the regex. Text Input (type="text") Renders a single row input field that users can type text inside. Password Input (type="password") Renders a single row input field which allows users to type censored text inside the field. Number Input (type="number") Restricts users to entering only numbers and a few special characters. Can also provide a "step" attribute which creates arrows inside the input field to increase or decrease by the value of the attribute. Range Input (type="range") Creates a slider that acts a selector between a "min" and "max" value. The "step" attribute controls how smoothly the slider works. The smaller the step, the more fluid the movement. Checkbox Input (type="checkbox") Creates a checkbox to give users multiple options and allow them to select any number of options. It is important to use <label> to identify the checkbox. Using the same "name" for each checkbox groups the <input>s together. However, each <input> has a unique "id" to pair with a <label>. Radio Button Input (type="radio") Renders a single radio button to give users only one option to choose from a group. Multiple radio buttons of a related topic are given the same "name" attribute value. It is important to use <label> to identify the radio button. Submit Input (type="submit") Creates a submit button for users to click when they are finished filling out information and want to submit their form. The "value" assigned to the <input> shows up as text on the submit button. If no "value" is given, the button will appeaer with the default text, "Submit".
<label>	Label	Provides identification for a specific <input> based on matching values of the <input>'s "id" attribute and the <label>'s "for" attribute.
<datalist>	Datalist	Used to store a list of <option>s. Using an <input type="text"> element, a text field is created with a basic search/autocomplete functionality. It is important that the <input> has a "list" attribute to pair it to the <datalist> via the "id". The values of "list" and "id" must match. Ideal when providing users a list of pre-defined options, but to also allow them to write alternative inputs as well.
<textarea>	Textarea	Creates a text-box for multi-line input (e.g. a comment section). The element supports the "rows" and "cols" attributes which determine the height and width, respectively, of the element. The "value" of the element is the content in between the opening and closing tags. This "value" renders pre-filled text in the text-box.

HTML: Semantic

Top of Page

Tag/Attribute	Element	Description
<header>	Header	Container usually for either navigational links or introductory content containing <h1> to <h6> headings.
<nav>	Navigation	Used to define a block of navigational links, such as menus and tables of content. Important to note that <nav> can be used inside of a <header> elemente, but can also be used on its own.
<main>	Main	Used to encapsulate the dominant content within a webpage. Tag is separate from the <footer> and <nav> of a web page.
<section>	Section	Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
<article>	Article	Holds content that makes sense on its own. Can hold content such as articles, blogs, comments, magazines, etc.
<aside>	Aside	Used to mark additional information that can enhance another element but isn't required in order to understand the main content. Common uses are for bibliographies, endnotes, comments, pull quotes, editorial sidebars, additional information, etc.
<figure>	Figure	Used to encapsulate media such as an image, illustration, diagram, code snippet, etc., which is referenced in the main flow of the document.
<figcaption>	Figcaption	Used to describe the media in the <figure> tag. Usually goes inside <figure> and is useful for grouping an image with a caption. This is different than using a <p> element to describe the content; if we decide to change the location of <figure>, the <figcaption> will move with the figure, whereas the <p> tag may get displaced.
<audio>	Audio	Used to embed audio content into a document. "src" attribute specifies the URL of the audio file. "controls" attribute automatically displays the audio controls into the browser such as play & mute. "type" attribute specifies what kind of audio is being linked and helps the browser determine if it supports the file.
<video>	Video	Embeds a media player for video playback. "src" attribute is mandatory and contains the video URL. "controls" attribute displays video controls in the media player. "autoplay" attribute automatically plays the video as soon as the page is loaded. "loop" attribute plays the video continously on repeat.
<embed> *self-closing tag*	Embed	Can embed any media content, including videos, audio files, and gifs from an external source.
<footer>	Footer	Content at the bottom of the subject information. Contains information such as contact info, copyright info, terms of use, site map, etc.

CSS: Selectors and Visual Rules

Top of Page

Selector	Examples	Description
Tag Name	h1, header, p, div	The word or character between HTML angle brackets.
Class Name	.top, .title, .container	This selects the class attribute associated with an HTML element (if specified). A "class" attribute is selected by prepending a "." before the "class" name. It's possible to add multiple classes to an HTML element's "class" attribute by separating them with a space. This enables us to mix and match CSS classes to create many unique styles without writing a custom class for every style combination needed.
ID Name	#large-title, #job-title	Selects elements based on their "id" attribute. This is used to uniquely style an HTML element, no matter what classes are applied to it. An "id" attribute is selected by prepending a "#" before the "id" name. IDs are the most specific selector in CSS, followed by classes, and finally, tags. This means any style within the ID selector's body would override all other styles by classes or tags.
Important	!imporant	More specific than IDs. It will override any style no matter how specific it is. As a result, it should almost never be used. Can be applied to specific attributes instead of full rules.

CSS: The Box Model

Top of Page

Property Name	Property	Description
Box Model		Comprises the set of properties which define parts of an element that take up space on a web page.
Width & Height	width: (px) height: (px)	Specifies the width and height of the content area. These set the raw contents of the box that the HTML box encompasses.
Border	border: (width), (style), (color)	A line that surrounds an elements. Default border is "medium none color". "width" specifies the thickness of the border. Can be set to "thin", "medium", or "thick". "style" specifies the design of the border. There are 10 different styles, including "none", "dotted", and "solid". "color" specifies the color of the border.
Border Radius	border-radius: (px)	Modifies the corners of an element's border box. "100%" makes a perfect circle.
Padding	padding: (px) OR padding: (top right bottom left) OR padding: (top/right bottom/left)	The space between the contents of a box and the borders of a box. Often used to expand the background color and make content look less cramped. We can use one value to change all sides, two values to change top/bottom & left/right, or four values to change top, right, bottom, & left. To get even more specific, "padding-top", "padding-right", "padding-bottom" & "padding-left" each affect the padding on only one side of the box's content.
Margin	margin: (px) OR margin: (top right bottom left) OR margin: (top/right bottom/left) OR margin: 0 auto	The space directly outside of the box. Used to space elements away from other elements. We can use one value to change all sides, two values to change top/bottom & left/right, or four values to change top, right, bottom, & left. To get even more specific, "margin-top", "margin-right", "margin-bottom" & "margin-left" each affect the margin on only one side of the box's content. "margin: 0 auto" will center content in its containing element. NOTE: width must be set. IMPORTANT: Top & bottom margins collapse* (the larger of the two margins sets the distance), while left & right margins are displayed & added together.**
Minimum & Maximum Height & Width	min-width: (px) max-width: (px) min-height: (px) max-height: (px)	Ensures a minimum width or height, and/or a maximum width or height to limit how narrow or how wide an element's box can be sized to. This helps with size changes when switching between displays of differing screen size.
Overflow	Overflow: (hidden/scroll/visible)	Controls what happens to content that spills, or overflows, outside its box. Set on a parent element to instruct a web browser how to render child elements. "hidden": any content that overflows will be hidden from view "scroll": adds a scrollbar to the element's box so that the rest of the content can be viewed by scrolling "visible": displays overflow content outside of the containing element (default value)
Resetting Defaults		Resets the default values for margins and padding set by the user agent stylesheet. Often the first CSS rule in an external stylesheet.
Visibility	visibility: (hidden/visible)	Hides element from view. "hidden" hides an element (but will still leave an empty space where the element is intended to display). "visible" displays an element.
Box Sizing	box-sizing: (content-box/border-box	Controls the type of box model the browser should use when interpreting a web page. "content-box" is affected by border thickness and padding. This is the default value. "border-box" includes border thickness and padding inside the box, which means the overall dimensions of the box do not change.

CSS: Display and Positioning

Top of Page

Property Name	Property	Description
Position	position: (static / relative / absolute / fixed>	Changes the position of an element. "static": default value. "relative": positions an element relative to its default static position. From this, you can add "offset properties": "top" (moves element down), "bottom" (up), "left" (right), & "right" (left) in px, em or %. "absolute": element will be ignored by all other (sibling) elements on the page, and positioned relative to its closest positioned parent element. Removes an element entirely from the document flow. Can also use "offset properties." "fixed": fixes an element's position on a page and stays the same regardless of scrolling. Often used for navigation bars on a web page.
Z-Index	z-index: (number)	Specifies how far back or how far forward an element will appear on a web page when it overlaps other elements. This property uses integer values (positive or negative). The element with the highest value will be at the foreground, while the element with the lowest value will be at the back. NOTE: This property does NOT work with "static" elements.
Display	display: (inline / block / inline-block)	Determines the type of render block for an element. "inline": take up as little space as possible, flow horizontally, and cannot have their width or height manually adjusted. Elements that are inline by default include <em> and <strong> "block": take up the full width of their container with line breaks before and after, and can have their height and width manually adjusted. Elements that are block-level by default include all heading elements (<h1> through <h6>), <p>, <div> and <footer>. "inline-block": can appear next to each other, and can have their width and height manually adjusted. Elements with default of inline-block are images.
Float	float: (left / right)	Determines how far left or how far right an element should float within its parent element. This works for static and relative positioned elements. NOTE: Width of the container must be specified or the element will assume the full width of its containing element. "left" will float an element to the left side of its container. "right" will float an element to the right side of its container.
Clear	clear: (left / right / both / none)	Specifies how an element should behave when it bumps into another element within the same containing element. Usually used in combination with elements having the "float" property. Determines on which sides floating elements are allowed to float. "left": left side of the element will not touch any other element within the same containg element. "right": right side of the element will not touch any other element within the same containg element. "both": neither side of the element will touch any other element within the same containg element. "none": the element can touch either side.

CSS: Colors

Top of Page

Property Name	Property	Description
Color	color:	Styles an element's foreground color, which is the color that an element appears in.
Background Color	background color:	Styles an element's background color.
Hexadecimal Colors	i.e., #FFF or #000000	CSS colors can be represented in hexadecimal (or hex) notation. Hexadecimal digits can represent sixteen different values using 0-9 and a-f. Hexadecimal colors are composed of 6 characters–each group of two represents a value between 0 and 255 for red, green, or blue. For example #ff0000 is all red, no green, and no blue. When both characters of all three colors are repeated, hex colors can be abbreviated to only three values, so #0000ff could also be represented as #00f.
RGB Colors	rgb(red, green, blue)	Another syntax for representing RGB values where each of the three values represents a color component, and each can have a decimal number value from 0-255.
HSL Colors	hsl(hue, saturation, lightness)	Syntax that declares colors based on hue (color value itself), saturation (intensity), and lightness. Hue values range from 0 to 360 while saturation and lightness values are represented as percentages.
Opacity	hsla(h, s, l, alpha) OR rgba(r, g, b, alpha) OR color: transparent	Opacity in hsl & RGB syntax is known as "alpha." Alpha is a decimal number from 0-1, where 0 is transparent and 1 is opaque. It's also possible to use the color keyword "transparent" for 0 opacity.

CSS: Typography

Top of Page

Property Name	Property	Description
Font Family	font-family: (font name)	Declares the typeface, or type of font, of text on a web page. Default typeface for many broswers is Times New Roman. NOTES: 1. font families need to be installed on a user's computer in order for the font to display; 2. it's good practice to limit number of fonts on a web page to 2 or 3; 3. when the name of a font consists of more than one word, it must be enclosed in "". Fallback fonts are used in case a named font is not available on a user's web browser. They are listed after the preferred font.
Font Weight	font-weight:	Declares how thick or thin the characters of a text should be. Can use numbers (100-900 in multiples of 100) or words ("bolder"). Default value is "normal" / "400."
Font Style	font-style:	Determines the font style in which text will appear. Example: "italic" or "bold."
Word Spacing	word-spacing: (em)	Determines the spacing between words in a body of text. Default amount is usually 0.25em. Preferred unit is ems.
Letter Spacing	letter-spacing: (em)	Determines the spacing between individual letters (also called tracking). Can enhance readability of uppercase text.
Text Transformation	text-transform:	Styles text to appear in either all uppercase or lowercase.
Text Alignment	text-alignment: (left / center / right)	Aligns text to the left- or right-hand side of the browser, or centers text. Default is "left."
Line Height	line-height:	Modifies the leading of text and allows us to set how tall we want the line containing our text to be. Can take a unitless number, which will be computed as the ratio of a font-size, or a number specified by unit (pixels, percents, ems, or rems). Using a unitless value is preferred since it is responsive and based on the current font size.
Linking Fonts		One way to add fonts to a web page is to search for fonts on Google Fonts and copy the link for the desired fonts into the <head> section of the HTML document.
Font-Face	@font-face { }	To load fonts with this property: Instead of using the Google font's link in the HTML document, enter the link into the URL bar with the browser. The browser will load the CSS rules. Focus on the rules that are directly labeled as / * latin * /. Some of the latin rules are on separate lines. Copy each of the latin rules to the top of your CSS stylesheet. If you choose a font from an external source that you have downloaded, you may also link it using "src" to obtain it from a relative filepath and add a format for each file to specify which font to use.

CSS: Grid

Top of Page