Back to resourcesCheat Sheet

HTML & CSS Cheat Sheet (The Essentials)

A quick, practical reference to the HTML tags and CSS you actually use every day. Bookmark it for when you need a fast reminder.

HTML page skeleton

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title</title>
  </head>
  <body>
    <!-- content here -->
  </body>
</html>

Common HTML tags

<h1>…<h6> — headings (one h1 per page).
<p> paragraph, <a href="..."> link, <img src="..." alt="..."> image.
<ul>/<ol>/<li> lists, <button> button.
<div> generic box, <section>/<header>/<footer>/<nav> semantic layout.

CSS: centering with Flexbox

.container {
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
}

CSS: responsive grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}

Handy CSS snippets

/* smooth hover */
.button { transition: all .25s ease; }

/* truncate long text */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Want it built for you — properly?

Knowing the tags is one thing; building a fast, accessible, SEO-ready site is another. If you would rather have it done right, that is what I do every day.

Get a website built