HTML Base Structure
HTML (SEMANTIC MARKUP)
<html lang='en'> <head> <meta charset='UTF-8'> <title>Cheat Sheet</title> <link href='styles.css' rel='stylesheet'> <link rel='icon' href='favicon.ico' type='image/x-icon'> <meta name='description' content='Cheat Sheets'> <meta name='keywords' content='Cheat Sheets'> <meta name='author' content='Cheat Sheets'> </head> <body> <header> <div class='header'> <h1 id='header'>Header</h1> <nav> "Primary and secondary menus but ever nest navs." </nav> </div> </header> <main> <section class='main'> <h2 id='mainheader'>Main Header</h2> <p> </p> </section> </main> <footer> <div class='footer'> <h2 id='footheader'>Foot Header</h2> <p> </p> </div> </footer> </body> </html>
Other HTML <tags>
TABLES
| Doubble Header Left | Doubble Header Right | |||
|---|---|---|---|---|
| First Two Rows | Body 1 | Body 2 | Body 3 | Body 4 |
| Body 5 | Body 6 | Body 7 | Body 8 | |
| Second Two Rows | Body 9 | Body 10 | Body 11 | Body 12 |
| Body 13 | Body 14 | Body 15 | Body 16 | |
| Footer 1 | Footer 2 | Footer 3 | Footer 4 | |
CODE
<table> <caption>Table Caption</caption> <colgroup> <col> <col span='2' class='doubble-left'> <col span='2' class='doubble-right'> </colgroup> <thead> <tr> <th></th> <th colspan='2'>Doubble Header Left</th> <th colspan='2'>Doubble Header Right</th> </tr> </thead> <tbody> <tr> <th rowspan='2'>First Two Rows</th> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> <td>Body 4</td> </tr> <tr> <td>Body 5</td> <td>Body 6</td> <td>Body 7</td> <td>Body 8</td> </tr> <tr> <th rowspan='2'>Second Two Rows</th> <td>Body 9</td> <td>Body 10</td> <td>Body 11</td> <td>Body 12</td> </tr> <tr> <td>Body 13</td> <td>Body 14</td> <td>Body 15</td> <td>Body 16</td> </tr> </tbody> <tfoot> <tr> <th></th> <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> </tr> </tfoot> </table>
FORMS
CODE
<form> <fieldset> <legend>Describes fieldset</legend> <p> <input type='radio' name='vertical' id='option1' value='top'><label for='option1'>Top</label> </p> <p> <input type='radio' name='vertical' id='option2' value='bottom'><label for='option2'>Bottom</label> </p> <p> <label for='horizontal'>Horizontal:</label> <select id='horizontal' name='horizontal'> <option value='left'>Left</option> <option value='middle'>Middle</option> <option value='right'>Right</option> </select> </p> </fieldset> </form>
CSS selectors and specificity
Selectors
| Selector | Description | Specificity |
|---|---|---|
| * | Universal selector - Selects all elements | 0, 0, 0, 0 |
| element | Type selector - Selects all elements of a given type | 0, 0, 0, 1 |
| .class | Class selector - Selects all elements with a given class | 0, 0, 1, 0 |
| #id | ID selector - Selects the element with a given ID | 0, 1, 0, 0 |
| element.class | Combines type and class selectors - Selects elements of a given type and class | 0, 0, 1, 1 |
| element, element | Group selector - Selects all elements of the specified types | 0, 0, 0, 1 (for each type) |
| element element | Descendant selector - Selects all elements that are descendants of a specified element | 0, 0, 0, 2 (for each level) |
| element > element | Child selector - Selects all elements that are direct children of a specified element | 0, 0, 0, 2 |
| element + element | Adjacent sibling selector - Selects the element that is immediately preceded by a specified element | 0, 0, 0, 2 |
| element ~ element | General sibling selector - Selects all elements that are preceded by a specified element | 0, 0, 0, 2 |
| [attribute] | Attribute selector - Selects all elements with a specified attribute | 0, 0, 1, 0 |
| [attribute=value] | Attribute value selector - Selects all elements with a specified attribute value | 0, 0, 1, 0 |
| :pseudo-class | Pseudo-class selector - Selects elements based on their state | 0, 0, 1, 0 |
| ::pseudo-element | Pseudo-element selector - Selects specified parts of an element | 0, 0, 1, 0 |
Specificity
Specificity in CSS is a measure of how specific a selector is. The more specific a selector is,
the higher its priority when multiple selectors match the same element. Specificity is calculated
based on a selector's components (inline styles, IDs, classes, attributes, and element names) and
is represented as a comma-separated value (a, b, c, d):
- a: Number of inline styles (not common in stylesheets)
- b: Number of ID selectors
- c: Number of class selectors, attributes selectors, and pseudo-classes
- d: Number of type selectors (element names) and pseudo-elements
For example, the selector body .intro p has a specificity of (0, 0, 1, 2).
Common CSS properties
Text och Font Egenskaper
| Property | Description |
|---|---|
| color | Sets the color of the text |
| font-family | Specifies the font of the text |
| font-size | Sets the font size |
| font-weight | Specifies the weight (or boldness) of the font |
| font-style | Specifies the style of the font (e.g., normal, italic, oblique) |
| text-align | Aligns the text (e.g., left, right, center, justify) |
| text-decoration | Adds decoration to the text (e.g., underline, overline, line-through) |
| text-transform | Controls the capitalization of text (e.g., uppercase, lowercase, capitalize) |
| letter-spacing | Sets the spacing between characters |
| line-height | Sets the height between lines of text |
Box Model Properties
| Property | Description |
|---|---|
| width | Sets the width of an element |
| height | Sets the height of an element |
| padding | Sets the space between the content and the border of an element |
| margin | Sets the space outside the border of an element |
| border | Sets the border around an element (includes width, style, and color) |
Background Properties
| Property | Description |
|---|---|
| background-color | Sets the background color of an element |
| background-image | Sets an image as the background |
| background-repeat | Specifies whether the background image repeats (e.g., repeat, no-repeat, repeat-x, repeat-y) |
| background-position | Sets the starting position of the background image |
| background-size | Specifies the size of the background image (e.g., auto, cover, contain) |
Layout Properties
| Property | Description |
|---|---|
| display | Specifies the display behavior of an element (e.g., block, inline, flex, grid, none) |
| position | Specifies the type of positioning for an element (e.g., static, relative, absolute, fixed, sticky) |
| top, right, bottom, left | Specifies the offset from the respective side for positioned elements |
| z-index | Specifies the stack order of positioned elements |
| overflow | Specifies what happens if content overflows an element's box (e.g., visible, hidden, scroll, auto) |
Flexbox Properties
| Property | Description |
|---|---|
| display | Set to flex to create a flex container |
| flex-direction | Defines the direction of the flex items (e.g., row, row-reverse, column, column-reverse) |
| justify-content | Aligns flex items along the main axis (e.g., flex-start, flex-end, center, space-between, space-around) |
| align-items | Aligns flex items along the cross axis (e.g., flex-start, flex-end, center, baseline, stretch) |
| flex-wrap | Controls whether flex items wrap onto multiple lines (e.g., nowrap, wrap, wrap-reverse) |
Grid Properties
| Property | Description |
|---|---|
| display | Set to grid to create a grid container |
| grid-template-columns | Defines the columns of the grid |
| grid-template-rows | Defines the rows of the grid |
| gap | Specifies the gap between rows and columns (can also use row-gap and column-gap) |
Other Properties
| Property | Description |
|---|---|
| opacity | Sets the opacity level of an element |
| cursor | Specifies the type of cursor to be displayed (e.g., pointer, default, text, move) |
| box-shadow | Adds shadow effects around an element's frame |
| transition | Specifies the transition effect for changing properties |
| transform | Applies a 2D or 3D transformation to an element (e.g., rotate, scale, translate, skew) |
Pseudo-classes and Pseudo-elements
| Property | Description |
|---|---|
| :hover | Applies styles when the user hovers over an element |
| :active | Applies styles when an element is activated |
| :focus | Applies styles when an element has focus |
| ::before | Inserts content before an element's content |
| ::after | Inserts content after an element's content |