✩⋆Harmony's HTML & CSS Cheatsheet⋆✩

♡ welcome ♡

hiii!! ૮₍ ´• ˕ •` ₎ა I'm making this cheatsheet for anyone who wants a convenient place to remember basic HTML & CSS rules! I hope this helps you in some way (˶ᵔ ̫ ᵔ˶) ♡

♡ references ♡

Some references I used were Codecademy courses and HTML & CSS by Jon Duckett!

I highly recommend Codecademy as a great place to start learning any coding, whatever your goal is. they offer tons of courses, either to learn a specific coding languages or more of a general path (like full stack! the one i'm currently taking!).

♡ semantic html ♡

Semantic: relating to meaning

Semantic html is good to use so that you & others can understand your code when going over it! Some common uses are:

✦ <nav> : defines blocks of navigation links

✦ <main> : has dominant content on webpage

✦ <footer> : contains info like contact info, copyright, site map, and more!

♡ css styling: typography ♡

Here are some important font selectors to change the look of the fonts you use:

✦ font-weight: adjusts how bold or thin your font will be

✦ text-transform: turns all letters uppercase or lowercase

✦ letter-spacing: sets horizontal spacing between letters

✦ text-align: aligns text to the right, left, or center

✦ word-spacing: sets horizontal spacing between words

✦ line-height: adjusts how tall each line is

You can use fonts outside of the default web browser fonts by copying the link from Google Fonts or by downloading fonts and hosting their files in your work folder.

♡ intro to html ♡

In order to properly set-up an html file in your IDE (i use Visual Studio Code)...

✦ make a new html file

✦ enter <!DOCTYPE html> as your first line of code

✦ write the rest of your html code! ^-^

✦ Refer to this page for basic & common html code if you forget!

♡ intro to css ♡

After making a .css file in your IDE, you can link it to your html by adding it to the same work folder, then adding this code to your html file:

You can begin adding your CSS code in your respective .css file. Here is a list of common css selectors you may find yourself using. Rememeber that certain CSS styles hold specifity or importance over others! Style using the lowest degree of specifity to the highest. ID's are most specific, then classes, then type.

♡ box model ♡

The CSS box model are a set of properties that define parts of your element. There is the wdith & height of your element, the padding (space between content and the border), the border (surrounds content area & padding), and the margin (space between border and edge of content).

Box Model Example:

♡ css styling: color ♡

To input a foreground color into an element (like text color), use the color: selector. If you want to change the background color, use the background-color: selector. CSS supports 3 color inputs: color names, RGB values, and HSL values. Inputing only color names limits you to the 145 colors in CSS, so using RGB or HEX codes as your value is a better option. HSL is convenient for changing the hue, saturation, and lightness to your colors. It can also change the opacity by using hsla(). For changing opacity using RGB, you can use rgba(). Using color: transparent will make your element completely clear.