Cheat 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