A cheatsheet on all things that are good-to-know when making a website. Intended for beginners, but helpful as a reference for everyone!

Forcefully refreshing your CSS

Often when working with CSS, your changes wont appear when you refresh the page. This is due to the previous version being kept by the browser in the cache (this is usually a good thing since you wont need to re-download the CSS file every time you visit the site.) To refresh the site and forcefully update the CSS, use the following:

MacOS: ⌘ ⇧ R

Windows/Linux: Ctrl ⇧ R

Simple Font Sizes

While you can set font sizes using units like pixels and points, there is actually a really simple way you can control the size of your text on your website. font-size supports words like ‘small’ ’large’ etc. These also have the added benefit of being more accessible as their size is dependent on the user’s browser settings.

/* Font sizes based on browser settings */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium; /* this is the default size */
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

Margins, Paddings and Borders

Margins, Paddings and Borders have some specific ways of changing in which the results of your code can change depending on how it’s written.

Margins and Paddings

Margins and paddings function almost identically in the way you write them, with 3 different ways you can use these CSS properties.

The first, when you have 4 values lets you fine control the padding or margin. The order of the values you are writing for are in a clockwise order, beginning with the top-ward value.

The second, when you have 2 values controls both the top and bottom pairs and the left and right pairs. The top and bottom, or vertical, pairs are first. The left and right, or horizontal, pairs are second.

The third is for when you have just 1 value, controlling all sides on the padding or margin at once.

/* 4 values */
padding: top right bottom left;

/* 2 values */
padding: vertical horizontal;

/* 1 value */
padding: all;

/* center aligning content horizontally */
margin: 8px auto;

Borders

Borders have an interesting way of being written, as you need to specify the style of line as well as the colour of the border. Without these, you’ll see nothing. There are various types of border styles you can chose from, with solid being the most simple one.

border: size style colour;

/* Keyword values */
border-style: solid;
border-style: dotted;CUAS
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

Stackoverflow and MDN Web Docs

With how many tags and properties there are between both HTML and CSS, it’s unrealistic that you’ll ever remember them or how to use them all. One of the best tips I have is to simply look it up! The best part about how widely used HTML and CSS are is that if you’re trying to do something or fix an issue, somebody has already been there and asked for help online. There’s absolutely no shame in needing to search for things like “how to center my content” or “how to use my own font on my website”.

Stackoverflow is a fantastic resource of problems and solutions, often with high quality answers from professionals on their forums. Keep an eye out for search results from this site.

MDN Web Docs is the best resource out there for making websites. Their HTML and CSS references are incredibly detailed, with great break down of each tag and property with examples on how to use them. They also have high-quality tutorials to learn HTML and CSS from.