HTML and CSS cheat sheet

<h1>A big heading</h1>
<p>A paragraph of text.</p>

• An element is one part of a page.
• Most elements have an opening tag, content, and a closing tag.
• The closing tag has a slash: </p>.
• The browser shows the content, not the tags.

<h1>Main title</h1>
<h2>Section title</h2>
<h3>Part of a section</h3>
<p>
  Do <strong>not</strong> lose your <em>keys</em>.
</p>

Element	Use it for
h1	the title of the page, one time
h2 to h6	sections and their parts. Do not skip a level.
p	a paragraph
strong	text that is important
em	text that you stress when you say it

A browser ignores line breaks and extra spaces in HTML. Choose an element for what the text means, not for how it looks.

<a href="https://example.com">Read the guide</a>

<a href="https://example.com" target="_blank"
   rel="noopener">Open in a new tab</a>

<img src="harbor.jpg" alt="Boats in a harbor"
     width="240">

Attribute	What it holds
href	the address that a link opens
target="_blank"	opens the link in a new tab. Add rel="noopener".
src	the address of a picture file
alt	a short text that describes the picture

An attribute is a name and a value in the opening tag. An img has no closing tag.

<ul>
  <li>Bread</li>
  <li>Fruit
    <ul>
      <li>Pear</li>
    </ul>
  </li>
</ul>

<ol>
  <li>Slice the bread</li>
  <li>Add the cheese</li>
</ol>

• ul is a list with bullets. ol is a list with numbers.
• Use ol when the order matters.
• Each item is an li. A sub-list goes inside an li.

h1 {
  color: navy;
  font-size: 32px;
}

.lead {
  font-size: 20px;
}

• The selector says which elements change: h1 is each h1 element.
• .lead is each element with class="lead".
• A property and its value have a colon between them, and a semicolon at the end.

Property	Example	What it changes
color	color: navy;	the color of the text
background-color	background-color: #fde68a;	the color behind the text
font-family	font-family: Georgia, serif;	the font. End the list with a general family.
font-size	font-size: 20px;	the size of the text. Normal text is 16px.
text-align	text-align: center;	left, center or right

Three ways to write a color: a name (tomato), a hex code (#1d4ed8), and rgb(29, 78, 216).

From the inside to the outside: content, padding, border, margin.

.note {
  padding: 16px;          /* all four sides */
  margin-bottom: 24px;    /* one side */
  border: 1px solid gray;
  border-radius: 8px;     /* round corners */
  box-sizing: border-box;
}

• Two values, such as padding: 8px 16px, set the top and the bottom first, then the left and the right.
• The background color fills the content and the padding, not the margin.
• With box-sizing: border-box, width includes the padding and the border.
• Without box-sizing: border-box, padding and border are added to width. A box with width: 300px, padding: 20px and a 2px border is 344px wide.

.toolbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.search {
  flex-grow: 1; /* takes the free space */
}

Property of the container	What it does
flex-direction	row or column. It sets the main axis.
gap	space between the items
justify-content	places the items along the main axis
align-items	places the items along the cross axis
flex-wrap: wrap	lets items move to a new line

In a row, the main axis is horizontal and the cross axis is vertical.

<form>
  <label for="email">Email</label>
  <input type="email" id="email" name="email"
         required>

  <label for="size">Size</label>
  <select id="size" name="size">
    <option>Small</option>
    <option>Large</option>
  </select>

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

• for on the label and id on the control must be the same.
• name is the name that the server gets with the value.
• Types of input: text, email, password, number, checkbox.
• required stops the browser from sending the form while the field is empty.