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.



Root of an HTML document. Should be added after the declaration. Contains all content/structure for an HTML document.



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.



Defines the title of an HTML document. Displayed in browser's tab. Can only be contained inside a document's <head> element.



Represents the content of an HTML document. Content inside these tags are rendered on web browsers.



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.



Contains and displays a block of text.



Inline container for text and can be used to group text for styling purposes.



Emphasizes text by italicizing it.



Highlights important, serious, or urgent text by making it bold.

*self-closing tag*

Line Break

Creates a line break in text.


Unordered List

Creates a (bullet) list of items in no particular order.


Ordered List

Creates a (numbered) list of items in sequential order.


List Item

Creates list items.



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.

*self-closing tag*


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.



Placed in HTML to allow for CSS styling.
"style" attribute can also be used for inline styling.



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


Creates a table that represents a 2-D table made of rows and columns.


Table Head

Defines the headings of table columns encapsulated in table rows.


Table Heading

Adds titles to rows and columns of a table and must be enclosed in a table row element.


Table Body

Contains all table data other than table heading and table footer content.


Table Row

Adds rows to a table before adding table data and table headings.


Table Data

Adds a cell of data to a table. Nested inside a table row element.


Column Span

Indicates how many columns that particular cell should span within a table. Nested in table header or table data element.


Row Span

Indicates how many rows that particular cell should span within a table. Nested in table header or table data element.


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


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.

*self-closing tag*


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".



Provides identification for a specific <input> based on matching values of the <input>'s "id" attribute and the <label>'s "for" attribute.



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.



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


Container usually for either navigational links or introductory content containing <h1> to <h6> headings.



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.



Used to encapsulate the dominant content within a webpage. Tag is separate from the <footer> and <nav> of a web page.



Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.



Holds content that makes sense on its own. Can hold content such as articles, blogs, comments, magazines, etc.



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.



Used to encapsulate media such as an image, illustration, diagram, code snippet, etc., which is referenced in the main flow of the document.



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.



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.



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.

*self-closing tag*


Can embed any media content, including videos, audio files, and gifs from an external source.



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.



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)
padding: (top right bottom left)
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)
margin: (top right bottom left)
margin: (top/right bottom/left)
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:
  1. Instead of using the Google font's link in the HTML document, enter the link into the URL bar with the browser.
  2. 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.
  3. 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