---
# System prepended metadata

title: Strikers HTML and CSS Cheatsheet

---

# Strikers HTML and CSS Cheatsheet

## HTML

### Div

The div tag or "division" tag is used to create layouts and position elements to then be styled by CSS selectors.

```
<div>
    <div> Left Child Content </div>
    <div> Right Child Content </div>
</div>
```

### Header

The header creates a full width element that can be utilized for header components.

```
<header>
    <h1> My Header Title! </h1>
</header>
```

### H Blocks

The H elements, or "header" elements allow you to create various different sized header text sizes.

```
<h1> The biggest header </h1>
<h2> The second biggest header </h2>
...
<h5> The smallest header </h5>
```

### A Links

The A tags are used to create links to other pages within your website.

```
<a href="index.html">Home</a>
```
Creates a link titled `Home` that will direct the user to the page `index.html` when they click on a link.

## CSS

### Selectors

CSS selectors work in three ways.

##### Element

Just using a name with apply the CSS to all elements that match that name.

```
body { background-color: red }
```
Will set any `<body>` tag to have a red background.

##### ID

Using a `#` prefixed name will apply the CSS to any element that has the matching ID attribute.
```
#IDContainer { background-color: blue }
```
Will set any element with the attribute `id="IDContainer"` to have a blue background.
Note: IDs should never be duplicated so you should only ever use this on singular elements. For anything else use classes.

##### Class

Using a `.` prefixed name will apply the CSS to any element that has the matching class attribute.
```
.BackgroundClass { background-color: yellow }
```
Will set any element with the attribute `class="BackgroundClass"` to have a yellow background.

### Margin

Can be used to position an element relevant to other elements.
```
margin: 20px;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
```

Margins can also be used to automatically position an element within its parent container.
```
margin: auto;
```

### Border

Create a border around an element.
```
border: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
```

### Padding

Add an internal padding to an element.

```
padding: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
```

### Float

Can be used to position two elements side by side within their parent container. Note: This will set the height of the parent container to `0px`.

```
float: left;
float: right;
```

### Box Sizing

In some cases when floating with a percentage width adding a border will affect the width. This can be avoided by including the border width in the width calculation.

```
box-sizing: border-box;
```

### Width

Setting a width on an element will fix its width.
Note using pixels while easier doesn't allow for automatic resizing as with percentages. You should always use percentages if you can.

```
width: 100px;
width: 50%;
```

### Height

Setting a heigh on an element will fix its height. This is normally derived from the content within the container.

```
height: 100px;
```

Note height is a trickier thing to get right with dynamic widths so generally just let the content infer the height.
But you can use things such as `vh` (view height) to mimic a height percentage.

```
height: 50vh;
```

### Text Align

Set the alignment of text and some other elements within a container.

```
text-align: center;
text-align: right;
text-align: left;
```

### Font Family

Set the font to apply to the text within an element.

```
font-family: arial;
font-family: sans-serif;
```