# Cheat Sheet Use this as a reference while working. **Table of Contents:** * [HTML](#html) * [Document Structure (Boilerplate)](#document-structure-boilerplate) * [Text Elements](#text-elements) * [Lists](#lists) * [Links and Images](#links-and-images) * [Semantic Structure Elements](#semantic-structure-elements) * [Forms](#forms) * [Accessibility Quick Tips](#accessibility-quick-tips) * [CSS](#css) * [Colors](#colors) * [Typography (Text Styling)](#typography-text-styling) * [CSS Variables](#css-variables) * [Box Model (Spacing and Sizing)](#box-model-spacing-and-sizing) * [Layout](#layout) * [Interactive States (Pseudo-classes)](#interactive-states-pseudo-classes) * [Flexbox](#flexbox) * [Grid](#grid) * [Media Queries](#media-queries) ## HTML ### Document Structure (Boilerplate) Every HTML document should start with this structure: ```html Page Title ``` **Pro Tip:** In VS Code, type `html:5` and press Enter to insert this boilerplate automatically. ### Text Elements | Element | Purpose | Example | | ---------------- | ------------------------------------------ | ------------------------ | | `

` to `

` | Headings (use in order, one `h1` per page) | `

Main Title

` | | `

` | Paragraph of text | `

Some text here.

` | | `` | Bold/important text | `bold` | | `` | Italic/emphasized text | `italic` | ### Lists ```html

Item 1

Item 2

First

Second

``` **Important:** `
` elements must always be inside a `
` or `
`. ### Links and Images ```html Click here About Page ``` | Attribute | Element | Purpose | | --------- | ------- | ----------------------------------------------------------- | | `href` | `` | URL or file path the link goes to | | `src` | `` | URL or file path of the image | | `alt` | `` | Description for screen readers and when image fails to load | ### Semantic Structure Elements Use these elements to organize your page structure: ```html

``` | Element | Purpose | | -------------- | ---------------------------------- | | `
` | Top of page (logo, navigation) | | `
` | Contains navigation links | | `
` | Primary content of the page | | `
` | A thematic grouping of content | | `
` | Bottom of page (copyright, links) | | `
` | Container for images with captions | | `
` | Caption for a `
` | ### Forms ```html

Name

Email

Message

``` **Key form rules:** * Every `` needs a `` with a matching `for`/`id` pair * Every `` needs a `name` attribute for the data to be submitted * Use appropriate `type` attributes: `text`, `email`, `number`, `date`, `url`, `checkbox`, `radio` | Input Type | Use Case | | ------------ | ---------------------------------- | | `text` | Short, open-ended text | | `email` | Email addresses (validates format) | | `number` | Numeric data | | `date` | Dates (shows calendar picker) | | `url` | URLs (validates format) | | `checkbox` | Yes/no options | | `radio` | Pick ONE from a few options | | `` | Long, multi-line text | | `<select>` | Dropdown menu (many options) | ### Accessibility Quick Tips 1. **Use headings in order** — Don't skip from `h1` to `h4` 2. **Always add `alt` to images** — Describe what the image shows 3. **Use descriptive link text** — "Read more about pricing" not "Click here" 4. **Connect labels to inputs** — Use `for` and `id` attributes 5. **Use semantic elements** — `<nav>`, `<main>`, `<section>` instead of `<div>` everywhere *** ## CSS ### Colors | Property | What It Does | Example | | ---------------------------------- | --------------------- | ---------------------- | | `color` | Sets text color | `color: midnightblue;` | | `background` or `background-color` | Sets background color | `background: azure;` | Color values can be: named colors (`red`, `blue`), hex codes (`#FF5733`), or RGB (`rgb(255, 87, 51)`). ### Typography (Text Styling) | Property | What It Does | Example | | ----------------- | --------------------------- | --------------------------------- | | `font-family` | Sets the font | `font-family: Arial, sans-serif;` | | `font-size` | Sets text size (use `rem`!) | `font-size: 1.5rem;` | | `font-weight` | Sets boldness | `font-weight: bold;` | | `font-style` | Sets italic | `font-style: italic;` | | `text-align` | Aligns text | `text-align: center;` | | `text-decoration` | Adds/removes underlines | `text-decoration: none;` | ### CSS Variables **CSS Variables** are reusable values you define once and use throughout your CSS. This is helpful for consistent colors, fonts, and easy updates. **Example:** ```css :root { --color-background: #181818; --color-accent: #1db954; --color-text: #fff; --font-family: Arial, sans-serif; } ``` **Usage:** ```css body { background: var(--color-background); color: var(--color-text); font-family: var(--font-family); } a:hover { color: var(--color-accent); } ``` Define your variables at the top of your `style.css` inside the `:root` selector, then use them everywhere you reference colors, fonts, or repeated values. ### Box Model (Spacing and Sizing) | Property | What It Does | Example | | ------------------------------------------------------------ | ---------------------------- | --------------------------------- | | `width` | Sets element width | `width: 300px;` | | `max-width` | Sets maximum width | `max-width: 600px;` | | `padding` | Space INSIDE the border | `padding: 20px;` | | `margin` | Space OUTSIDE the border | `margin: 10px;` | | `border` | Creates a border (all sides) | `border: 2px solid black;` | | `border-top`, `border-bottom`, `border-left`, `border-right` | Border on one side | `border-bottom: 2px solid black;` | | `border-radius` | Rounds corners | `border-radius: 8px;` | **Shorthand for padding/margin:** * `padding: 10px;` → all sides * `padding: 10px 20px;` → top/bottom, left/right ### Layout | Property | What It Does | Example | | -------------- | ---------------------------------------- | ------------------- | | `margin: auto` | Centers a block element (needs a width!) | `margin: auto;` | | `list-style` | Styles/removes list bullets | `list-style: none;` | ### Interactive States (Pseudo-classes) ```css /* When mouse hovers over element */ a:hover { background: lightblue; } ``` ### Flexbox | Property | What It Does | Example | | ----------------- | ----------------------------------------- | -------------------------------- | | `display: flex` | Makes the element a flex container | `display: flex;` | | `flex-direction` | Sets direction: `row` (default), `column` | `flex-direction: column;` | | `justify-content` | Spacing along the **main axis** | `justify-content: space-between` | | `align-items` | Alignment along the **cross axis** | `align-items: center;` | | `gap` | Space **between** flex items | `gap: 20px;` | **Common `justify-content` values:** `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly` **Common `align-items` values:** `flex-start`, `flex-end`, `center`, `stretch` (default) ### Grid | Property | What It Does | Example | | ----------------------- | ------------------------ | --------------------------------- | | `display: grid` | Makes the element a grid | `display: grid;` | | `grid-template-columns` | Defines column sizes | `grid-template-columns: 1fr 1fr;` | | `gap` | Space between grid items | `gap: 20px;` | **The `fr` unit** divides available space into fractions. `1fr 1fr 1fr` creates 3 equal columns. ### Media Queries ```css /* Styles for screens 768px and wider */ @media (min-width: 768px) { .selector { /* styles here */ } } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://marcylabschool.gitbook.io/marcy-lab-school-docs/mod-3-html-css/cheatsheet.md?ask=<question> ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.