Useful CSS Properties

CSS Background Properties

background-attachment: [fixed][scroll][local][inherit];
background-position: [top bottom right left];

CSS Background Shorthand

background: [color image repeat attachment position], [repeat with a second image];

background: black url("/path/to/my/image.jpeg") repeat fixed top, black url("/path/to/my/secondimage.jpeg") repeat fixed top;

HSLA – hue saturation lightness alpha (opacity)

color: hsla(100,70%,50%,0.5);

side note: object outlines and borders are two different things

there are four ways to make columns, of these, I would recommend bootstraps grid system or flex boxes.

HTML tables
a CSS framework (like bootstrap’s grid system)
CSS flexbox
CSS float

Flexbox:

once display is set to flex the following can be used

display: flex;
flex-direction: [column][row][row-reverse];
flex-wrap: [wrap][nowrap][rap-reverse];
flex-flow: [short-hand for setting direction and wrap];
justify-content:[center][flex-start][flex-end][space-around][space-between];
align-items: [center][flex-start][flex-end][baseline][stretch];
align-content: [space-between][space-around][flex-start][flex-end];[stretch center];

Perfect centering for flex containers:

justify-content: center;
align-items: center;

flex items (anything inside a flex box) have the following properties:

flex-grow:[number];
flex-shrink:[number];
flex-basis:[size];
flex:[number];
align-self:[postion];

CSS Variables

:root {
--my-color: red;
}
div {
color: var(--my-color);
}

Select a div of (n)th type:

div:nth-of-type(2) {}