Cheatsheet

Coding is a collaboration between humans and machines

Images

Adding images to your html code, sites, and projects is as simple as using the <img> tag.

HTML Image Tag
Tag Formatted Example
<img> <img src="image.jpg" alt="Description" /> Heart Emoji
  1. You always need a src attribute to point to the source and location of your image, whether it's local or an online URL.
  2. The alt altribute is considered webstandard and is used to provide an image description for screen readers and in the chance the image breaks, a placeholder text. It helps and impacts other things such as SEO as well.
  3. This tag does not require a closing tag as shown in the example. Please consult the MDN for tags that do and do not require a closing tag.

Colors

Most projects need color, whether it's for brand recognition, organization, some contrast or just plain fun

CSS Color Types
Type Description Example
Keyword Keyword are simple and easy to understand, but limited in selection choice .classname {color: red;}
RGB (Red Green Blue) Colors are definied using the rgb() function. With each value controlling the amount of red, green, blue, respectively. If you add an alpha channel like rgba() you'll be able to contorl the transparency levels of the color.

.classname {color: rgb(255, 0, 0);}

.classname {color: rgba(255, 0, 0, 0.5);}
Hex Specified with a # symbol followed by 3, 4, 6, or 8 hexadecimal characters. The 6-character format (#RRGGBB) is common, e.g., #FF0000 for red. The 3-character shorthand (#RGB) is a compact version of the 6-character format. 8-character and 4-character formats include alpha values for opacity (#RRGGBBAA and #RGBA)

.classname {color: #FF0000;}

.classname {color: #FF0000AA;}
HSL Defined using the hsl() function. Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white, and 50% is the average lightness of the color. If you add one number and make it hlsa, you get an alpha channel to control transparency like rgba. The alpha channel can go from 0 to a max of 1.

.classname {color: hsl(0, 100%, 50%)}

.classname {color: hsla(0, 100%, 50%, 0.5)

Fonts

Fonts are another great way to spruce up projects, whether its for brand recognization or just to assist viewers of your website with readability.

Font Properties
Property Description Example
font-weight This property sets the font for an element. The order matters as you can set more then one as fallback incase the user does not have the font or it can't be accessed, then the one down the list will be used until it works. .classname {font-family: 'Oswald', sans-serif;}
font-size Set the size of the font. You may use px, em or percents. .classname {font-size: 25px;}
font-weight Control the thickness of your bont with lighter, bold, bolder or numeric values from 100-900 (400 being normal and 700 being bold) .classname {font-weight: 700;}
font-style With this you can set the font style to italtics or oblique which lets you control the slant of the text with degrees. .classname {font-style: italtic;}