CheatSheetsHero

Catalog / HTML/CSS Cheatsheet

HTML/CSS Cheatsheet

A comprehensive cheat sheet covering essential HTML elements and CSS properties for web development, providing quick references and examples for efficient coding.

HTML Fundamentals

Basic Structure

<!DOCTYPE html> - Declares the document type as HTML5.

<html> - The root element of an HTML page.

<head> - Contains meta-information about the HTML page.

<title> - Specifies a title for the HTML page (which is shown in the browser’s title bar or tab).

<body> - Defines the document’s body, and is a container for all the visible content, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Text Formatting

<h1> to <h6>

Defines HTML headings.

<p>

Defines a paragraph.

<br>

Inserts a single line break.

<hr>

Defines a thematic break (horizontal rule).

<b> / <strong>

Defines bold text.

<i> / <em>

Defines italicized text.

Lists

<ul>

Defines an unordered list.

<ol>

Defines an ordered list.

<li>

Defines a list item.

Example of Unordered List:

 
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example of Ordered List:

 
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

CSS Fundamentals

Basic Syntax

CSS rulesets consist of a selector and a declaration block:

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 24px;
}

Selectors

element

Selects all HTML elements of the specified type.

.class

Selects all elements with the specified class.

#id

Selects the element with the specified id.

*

Selects all HTML elements on the page.

element > element

Selects all elements that are a direct child of a specified element.

element + element

Selects the first element that is immediately preceded by the specified element.

Box Model

The CSS box model is a container that contains multiple properties to format any HTML element:

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that surrounds the padding and content
  • Margin - Clears an area outside the border. The margin is transparent
 
.box {
  width: 300px;
  padding: 25px;
  border: 5px solid red;
  margin: 25px;
}

HTML Forms

Form Elements

<form>

Defines an HTML form for user input.

<input>

Defines an input field where the user can enter data.

<textarea>

Defines a multiline text input control.

<label>

Defines a label for an <input> element.

<select>

Defines a drop-down list.

<button>

Defines a clickable button.

Input Types

<input type="text"> - Defines a single-line text input field.

<input type="password"> - Defines a password input field.

<input type="submit"> - Defines a submit button for submitting the form.

<input type="radio"> - Defines a radio button for selecting one of many choices.

<input type="checkbox"> - Defines a checkbox for selecting zero or more options of a limited number of choices.

<input type="file"> - Defines a file-select field and a “Browse” button for file uploads.

Form Attributes

action

Specifies where to send the form-data when a form is submitted.

method

Specifies the HTTP method to use when submitting the form-data (usually GET or POST).

name

Specifies a name for the form (to differentiate the forms).

value

Specifies the value of an input element.

placeholder

Specifies a short hint that describes the expected value of an input field.

required

Specifies that an input field must be filled out before submitting the form.

CSS Layout

Display Property

The display property specifies the display behavior (the type of rendering box) of an element.

Common values include: block, inline, inline-block, flex, grid, none.
  • block: An element that takes up the full width available, with line breaks before and after the element.
  • inline: An element that only takes up as much width as necessary, without forcing line breaks.
  • inline-block: Similar to inline, but you can set a width and height for the element.
  • flex: Defines a flexible container; see Flexbox section below.
  • grid: Defines a grid container; see Grid section below.
  • none: The element is completely removed.

Flexbox

display: flex;

Enables flexbox layout for the container.

flex-direction

Specifies the direction of the flex items (row, column, row-reverse, column-reverse).

justify-content

Aligns flex items along the main axis (center, flex-start, flex-end, space-between, space-around).

align-items

Aligns flex items along the cross axis (center, flex-start, flex-end, stretch, baseline).

Example:

 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid

display: grid;

Enables grid layout for the container.

grid-template-columns

Defines the number and size of columns in the grid.

grid-template-rows

Defines the number and size of rows in the grid.

grid-gap

Specifies the size of the gap between rows and columns.

Example:

 
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}
Download PDF