> For the complete documentation index, see [llms.txt](https://marcylabschool.gitbook.io/swe/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marcylabschool.gitbook.io/swe/mod-3-html-css/cheatsheet.md). # 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 */ } } ```