✾Coding✾

Everything I know about coding is self-taught, and mostly I just look up examples and tinker with the code until it does what I want. Since I have no actual training and keep forgetting things, I have created this cheatsheet for later use. I hope it can be useful to someone else too.

Code Samples

For creating sample code boxes like these! Remove the asterisks (*) in the code for it to work.

Border Styles

Borders can be applied to many different elements, such as containers, images, and tables. The "border" propriety should be followed by its thickness in pixels, the border style, and a color. Example:

border-bottom: 2px dotted #AD343E

Possible styles: solid / double / dotted / dashed / wavy.
You can also use 'border-top', border-bottom', 'bottom-left', and/or 'border-right' if you want the border only on specific sides of the element.
Example on how to apply it to an image:

Text Labels

Labels or descriptions that will appear when hovering over text.
Try hovering over the following abbreviation to see its full name: HTML.

List Styles

Create lists with bullet points. Possible styles:

  • disc
  • circle
  • none
  • square

Tables

When creating tables, 'tr' makes a new row and 'td' makes a new cell. You can also use 'th' to make headers.
Dog Cats

Tip! You can also directly style the table and the individual rows and cells.

Quotations

Can be used to quote something or just to highlight some text.

"Coding is hard and I am forgetful."

Text Styles

The text-decoration property can be used to add decorative lines to text.

TEXT DECO

Possible styles: none / underline / overline / line-through.
You can also combine any of the latter three, and add a color, thickness (in pixels), and/or a line style (solid / double / dotted / dashed / wavy).

Link in New Tab

Makes it so a clicking a link will open that page in a new tab instead of the current one.
Try clicking here to open my site's homepage in another tab.

Numbered Lists

Create numbered lists. Possible styles:

  1. 1 (numbers)
  2. A (uppercase letters)
  3. a (lowercase letters)
  4. I (uppercase roman numerals)
  5. i (lowercase roman numerals)

Grid Layouts

Create grids made of rows and columns, like the one on this page.

Tip! You can also style your rows and columns directly.

✾Coding✾