Student Reference

HTML + CSS Basics Cheat Sheet

Use this page while coding in the IDE. Every concept includes plain-language definitions and direct examples you can copy into your project.

Starter Skeleton HTML Tags CSS Properties Visual Examples

How To Use This

Pick one tag or property, test it in your project, then save.

Use the examples exactly first, then modify one value at a time.

Beginner Workflow

1) Structure with HTML.

2) Style with CSS.

3) Refresh your preview and compare changes.

Starter HTML Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page Title</title>
</head>
<body>
  <main>
    <h1>Hello world</h1>
    <p>Start building your page here.</p>
  </main>
</body>
</html>

HTML Tags

Think of HTML as the content and structure of the page.

Tag	Definition	Example
<h1> ... </h1>	Main heading on a page.	<h1>My Portfolio</h1>
<p> ... </p>	Paragraph text.	<p>Welcome to my site.</p>
<a href="..."> ... </a>	Link to another page or site.	<a href="https://example.com">Visit</a>
<img src="..." alt="...">	Displays an image. Use alt for accessibility.	<img src="photo.jpg" alt="My photo">
<ul> / <ol> + <li>	Creates bulleted or numbered lists.	<ul><li>Item</li></ul>
<div> ... </div>	Generic container for grouping content.	<div class="card">...</div>
<section> ... </section>	Semantic section of related content.	<section><h2>About</h2></section>
<button> ... </button>	Clickable action button.	<button>Submit</button>
<form> ... </form>	Groups input fields for user data.	<form><input type="text"></form>
<input type="text">	Single-line text field.	<input type="text" placeholder="Name">

CSS Properties

Think of CSS as the design layer that controls how HTML looks.

Property	Definition	Example
color	Sets text color.	color: #1e1f22;
background-color	Sets element background color.	background-color: #f4f7ff;
font-size	Controls text size.	font-size: 18px;
font-family	Changes the typeface.	font-family: Verdana, sans-serif;
margin	Adds outer spacing around an element.	margin: 16px;
padding	Adds inner spacing inside an element.	padding: 12px;
border	Draws an outline around an element.	border: 1px solid #223150;
display	Defines layout behavior.	display: flex;
justify-content	Aligns flex items horizontally.	justify-content: space-between;
align-items	Aligns flex items vertically.	align-items: center;
grid-template-columns	Sets the number/size of grid columns.	grid-template-columns: 1fr 1fr;
border-radius	Rounds element corners.	border-radius: 12px;

Example: Styled Card

Code

<div class="profile-card">
  <h2>Marco Morais</h2>
  <p>Web Design Student</p>
  <button>View Project</button>
</div>

.profile-card {
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  padding: 16px;
  width: 260px;
}

.profile-card h2 {
  margin-top: 0;
}

What It Looks Like

Marco Morais

Web Design Student

Example: Navigation Row

Code

<nav class="sample-nav">
  <a href="#">Home</a>
  <a href="#">Projects</a>
  <a href="#">Contact</a>
</nav>

.sample-nav {
  display: flex;
  gap: 10px;
}

.sample-nav a {
  text-decoration: none;
  background: #1b2a44;
  color: #e8f1ff;
  padding: 8px 12px;
  border-radius: 999px;
}

What It Looks Like

Common Selectors

/* Element selector */
p {
  color: #1e1f22;
}

/* Class selector */
.card {
  padding: 16px;
}

/* ID selector */
#hero {
  margin-top: 20px;
}

/* Descendant selector */
.nav a {
  text-decoration: none;
}

/* Pseudo-class */
button:hover {
  opacity: 0.9;
}