(a)³ Agora, anarchy, action!

HTML, CSS & Markdown cheatsheet

This cheatsheet is intended for beginners who want to understand frontend code (such as when using Inspect Element), edit an existing theme or code a simple static webpage.

HTML

HTML is your website's structure and includes text, images, links and divs (boxes, rows and columns).

Link: Visit my website

Image: "My

Heading:

Welcome

Paragraph:

This is my new website.

New line: First line
Second line

Div:

This content is in a box

Span: A sentence with bold words

CSS

CSS is your website's design and includes colors, sizes and backgrounds.

Fonts: p { font-family: Helvetica; font-size: 20px; font-weight: bold; color: black; }

Background: .my-box { background-image: url(https://example.com/cat.png); background-color: orange; }

Border: .my-box { border: 1px solid black; border-radius: 5px; }

Sizing: .my-image { width: 150px; height: 150px } .header { width: 100%; }

Spacing: .inside { padding: 20px; } .outside { margin: 5px; }

Position: .my-row { display: block; } .my-column { display: inline-block; }

Center: .my-text { text-align: center; } .my-box { margin-left: auto; margin-right: auto; }

Hide: .hidden { display: none; }

Example

This code displays a blue box with a green border and black text.

This text is in a box

Note: To specify a font color in CSS, the command is simply color, not font-color.

Markdown

Markdown is used in Reddit and Github, plus some blogs (such as WriteFreely) and website templates (such as Jekyll).

Add a link: Visit [my website](https://example.com)

Image: ![My cat](https://example.com/cat.gif)

Heading: # Welcome

New line: Press enter twice

Italic: My *italic* sentence

Bold: Some **bold** text

Quote: Quoted text

More resources

Here are some more resources to get started with website design and development: