Deeper Dive into CSS

Common Css Rules

Lets look at some common and useful CSS rules.

First, real quick: CSS Units

There are 4 main ways to describe space in CSS:

1. px: pixels
2. %: percent. This is contextual depending on the element type, and on it's parent. Normally it refers to a % of the parent width/height.
3. vw: One percent of the viewport's width.
4. vh: One percent of the viewport's height.
5. rem: The line height of the body's font-size.

css units complete reference

Display

Display is an important rule with many options, but in my opinion the two most important are:

1. display: block;

   Takes up the full available with of the parent container, or the screen if the element doesnt have a parent. Pushes elements before and after to separate lines. div and h1-h6 are display: block; by default.

2. display: inline-block;

   Takes up only as much width and height as needed. Height/width will be 0 unless specified otherwise.

display complete reference

Position

position determines how an element is placed among its parent and sibling elements. The most important values for position are:

1. static

   This is the default position value for all elements unless specified otherwise. position: static; will make the element fall into place after the previous element and before the following element.

2. fixed

   This will position an element in relation to the entire screen, and keep it in place. It will ignore the elements before and after, and just stick where you tell it. Instead use top, right, bottom, and left to position it.

3. absolute

   Similar to fixed, but instead of using the whole screen as its basis, it will use the parent container. Uses top, right, bottom, and left to position it just like a fixed element. NOTE! This will only work properly if the parent element is position: absolute; or position: relative;

4. relative

   Allows children to use position: absolute; to orient themselves relative to this element, the parent.

see position complete reference

Padding and margin

padding and margin add space to and around elements respectively. Both allow different spacing for the top, right, bottom and left sides.see padding complete reference
see margin complete reference

Backround

The background rule is very flexible and has several options, including colors, gradients, and images.

see background complete reference

Border

Does what you expect! It requires 3 settings: width, color, and style.

see border complete reference

:nth-child() selectors

Here's another great CSS trick. Let's say we have 6 divs in a row with the class "child".

What if we wanted to apply css rules to every other element? Enter :nth-child.

If we add :nth-child(3) to a CSS selector, we will target the 3rd element.

If we add :nth-child(2n) to a CSS selector, we will target every other element.

Here's an example with both :nth-child(3) and :nth-child(2n) in use:

see :nth-child complete reference

CSS Grid

https://alistapart.com/article/the-story-of-css-grid-from-its-creators/

There's one more display rule I would like to show you, that was introduced to browsers more recently. It's called the CSS Grid. It's used differently from other display rules. When you add display: grid; to a parent element, it allows the CSS programmer to impose virtually any type of grid in which the child elements will be placed. If you continue diving into CSS I highly recommend reading all the possibilites here, but for now, I will show you one simple and powerful use for it.

Say we wanted a 5x5 grid of elements to take up the space inside an element. We would use display: grid; like this:

see a complete guide to CSS Grid here