HTML & CSS Interview Cheat Sheet

A practical HTML and CSS reference for technical interviews, frontend reviews, quick syntax checks, and building clean web pages.

HTML Basics

Basic HTML Template

Every HTML page should start with a valid document structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Common HTML Tags

  • <h1> to <h6>: headings
  • <p>: paragraph
  • <a>: link
  • <img>: image
  • <ul>: unordered list
  • <ol>: ordered list
  • <li>: list item
  • <div>: generic block container
  • <span>: generic inline container

Links and Images

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Website
</a>

<img src="image.jpg" alt="Description of image" />

Semantic HTML

Common Semantic Tags

  • <header>: top section or intro
  • <nav>: navigation links
  • <main>: main page content
  • <section>: grouped content
  • <article>: independent content
  • <aside>: secondary content
  • <footer>: bottom section

Semantic Layout Example

<header>
  <h1>Website Title</h1>
</header>

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

<main>
  <section>
    <h2>Main Section</h2>
    <p>Main content goes here.</p>
  </section>
</main>

<footer>
  <p>Copyright 2026</p>
</footer>

Forms

Basic Form

<form action="/submit" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>

Common Input Types

  • text: normal text
  • email: email validation
  • password: hidden characters
  • number: numeric input
  • checkbox: multiple choices
  • radio: one choice from a group
  • date: date picker
  • file: file upload

CSS Basics

CSS Syntax

selector {
  property: value;
}

Selectors

p {
  color: white;
}

.card {
  padding: 1rem;
}

#main-title {
  font-size: 2rem;
}

button:hover {
  cursor: pointer;
}

input:focus {
  outline: 2px solid blue;
}

Ways to Add CSS

<!-- External CSS -->
<link rel="stylesheet" href="styles.css" />

<!-- Internal CSS -->
<style>
  body {
    background: black;
  }
</style>

<!-- Inline CSS -->
<p style="color: red;">Hello</p>

CSS Box Model

Box Model Layers

  • Content: the actual text or image
  • Padding: space inside the element
  • Border: line around the element
  • Margin: space outside the element

Box Model Example

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid white;
  margin: 30px;
  box-sizing: border-box;
}

Flexbox

Flexbox Parent

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

Useful Flex Properties

  • justify-content: horizontal alignment
  • align-items: vertical alignment
  • flex-direction: row or column
  • gap: space between children
  • flex-wrap: allows wrapping

CSS Grid

Responsive Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Grid Notes

  • Grid is great for page layouts.
  • Flexbox is great for one-dimensional alignment.
  • Use Grid for rows and columns.
  • Use Flexbox for navigation, cards, and alignment.

Responsive Design

Media Query

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  h1 {
    font-size: 2rem;
  }
}

Responsive Best Practices

  • Use relative units like %, rem, em, vw, and vh.
  • Use max-width to avoid oversized layouts.
  • Use flex-wrap or responsive grid layouts.
  • Always include the viewport meta tag.

Interview Notes

HTML Interview Points

  • Semantic HTML improves accessibility and SEO.
  • The alt attribute helps screen readers and image fallback.
  • Forms use name attributes to send data.
  • Labels should connect to inputs using for and id.

CSS Interview Points

  • The box model controls spacing and sizing.
  • Specificity decides which CSS rule wins.
  • Flexbox is one-dimensional.
  • Grid is two-dimensional.
  • Media queries help build responsive layouts.

Specificity Order

Inline styles     highest priority
ID selectors      #title
Class selectors   .card
Element selectors div
Universal         *