HTML & CSS Cheat Sheet
Basics
HTML Tags
| Tag | Description |
|---|---|
| <!DOCTYPE html> | Defines the document type and version of HTML |
| <html> | Defines the root of an HTML document |
| <head> | Contains meta-information about the document |
| <title> | Defines the title of the document, shown in the browser's title bar or tab, add into <head> |
| <body> | Defines the document's body, the general content of the HTML document |
| <link rel="stylesheet" href="styles.css"> | Links CSS stylesheet to HTML doc |
| <div> | Defines a division or a section in an HTML document, used as a container for HTML elements - which is then styled with CSS |
| <span> | An inline container used to mark up a part of a text, or a part of a document |
| <br> | Inserts a single line break |
| <hr> | Creates a thematic break in the content (horizontal line) |
CSS Attributes
| Attribute | Description |
|---|---|
| background-color | Sets the background color of an element |
| color: | Sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color |
CSS Pseudo-Classes
| Pseudo-Class | Description |
|---|---|
| :root | Matches the root element of a tree representing the document, it represents the <html> element and is identical to the selector html, except that its specificity is higher. These CSS variables can then be used throughout the style sheet. Example:
:root { --primary-color: hotpink; --pane-padding: 5px 42px; } color: var(--primary-color); |
IDs & Classes
HTML Tags
| Tag | Description |
|---|---|
| <id=""> | Specifies a unique id for an HTML element, can only be used for one HTML element within the page |
| <class=""> | Points to a class name in a stylesheet, can be used for multiple elements |
CSS Attributes
| Attribute | Description |
|---|---|
| # | #id in CSS, can only be used for one element within the page |
| . | .class points to a class name in a stylesheet, can be used for multiple elements |
Typography
HTML Tags
| Tag | Description |
|---|---|
| <h1> to <h6> | Defines HTML headings, from largest <h1> to smallest <h6>, do not skip headings |
| <p> | Defines a paragraph of text |
CSS Attributes
| Attribute | Description |
|---|---|
| font-family | Defines font family, separate with commas for backup fonts |
| font-weight | Defines the font weight, dependent on typeface |
| text-transform | Specifies how to capitalize an element's text like capitalize, uppercase, lowercase, none |
| text-align | Sets the horizontal alignment of the inline-level content inside a block element or table-cell box like center, start, end, justify |
Tables
HTML Tags
| Tag | Description |
|---|---|
| <table> | The wrapper element for all HTML tables |
| <thead> | The set of rows defining the column headers in a table |
| <tr> | The table row container |
| <th> | Defines a header cell in a table |
| <tbody> | The set of rows containing actual table data |
| <td> | Defines a standard cell in a table |
| <tfoot> | The set of rows defining the footer in a table |
| Tag | Description |
|---|---|
| <colspan> | Defines the number of columns a td element (cell) should span |
| <rowspan> | Defines the number of rows a td element (cell) should span |
CSS Attributes
| Attribute | Description |
|---|---|
| border | Defines the border of the table - including width, style and color |
| padding | Defines the space between the cell content and its border, apply to <td> and <th> |
| border-spacing | Defines the space between cells in a table, use on <table> property |
Lists
| Tag | Description |
|---|---|
| <ol> | Defines an ordered list |
| <ul> | Defines an unordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a description term |
| <dd> | Describes each description term |
Images
| Tag | Description |
|---|---|
| <img src="image.jpg" alt="description"> | Defines an image |
Links
HTML Tags
| Tag | Description |
|---|---|
| <a> | Anchor element to create a hyperlink i.e. <a href="https://google.com"> |
CSS Psedo-Classes
Follows the LVHA :link - :visited - :hover - :active order.
| Pseudo-Class | Description |
|---|---|
| a:hover | Generally triggered when the user hovers over an element with the cursor (mouse pointer) |
| a:link | Represents an element that has not yet been visited and matches every unvisited <a> or <area> element that has an href attribute |
| a:active | Represents an element (such as a button) that is being activated by the user, when pressing down the primary mouse button |
| a:visited | Applies once the link has been visited by the user |
Resources
- W3Schools
- Learn to code with the world's largest web developer site.
- MDN Web Docs
- Your comprehensive resource for web development documentation, covering everything from CSS, HTML, JavaScript, Web APIs, and other web technologies.