Initial, Inherit and Unset CSS Keywords

Inherit

Inherit tells the browser to search for - and inherit - the closest parent element’s value. If the closest parent has an inherit value too, the browser will continue going up the DOM until it finds something. If there isn’t any value, the browser will use its user-agent style, and if there isn’t any user-agent style, it will use the initial value style.

Initial

For this one we need to knw the difference between: The Initial Value of Every Property in CSS & The User-Agent Browser Styles.

Every property of CSS has an initial value. This initial value has no connection to the type of HTML element it’s applied to. E.g "font-size" initial value is "medium"

After applying the initial styles of all the CSS properties, the browser loads its styles (User-Agent Browser Styles). These styles have nothing to do with the base initial values of the CSS properties. The basic styles of an HTML element, such as the h1 tag for example, comes from the browser user agent stylesheet, and not from the initial value of the properties of CSS.

Initial tells the browser to use the CSS default value of the given property. This is NOT the user agents stylesheet. For example setting the font size of a h1, would set it to the inital CSS property (medium) and NOT the user Agent styles.

Unset

This property would only be used with the new all property as it works the same as inherit and initial for inherited & Non-inheriited properties (see below).

.something { 
    all: unset;
    /*  
        unset on font-size will behave like inherit - becouse it's inherited property
        unset on border will behave like initial - becouse it's an un-inherited property
    */
}

In CSS, there are two types of properties (both of which are details in Mozilla ref gudie);

  • Inherited properties — properties that affect their children. All the properties which affect text have this natural behavior. For example, if we define font-size on the HTML element, it will apply to all HTML elements until you set another font-size on an inner HTML element style.
  • Non-inherited properties — All the other natural properties, which affect only the element which they define. These are all of the properties that don’t apply to text. For example, if you put a border on a parent element, its child will not get a border.

Units

rem - Relative to font-size of the root element (html)

em - Relative to the font-size of the element

ch - Relative to the width of the "0" (zero)

vw - Relative to 1% of the width of the viewport

vh - Relative to 1% of the height of the viewport

% - Relative to the parent element

fr - a unit which represents a fraction of the available space in the grid container

Vertical/center align

With Flexbox

.outside-element {
  display: flex;
  align-items: center;
  justify-content: center;
}

With translate

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

You can also center align..

.element {
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

Or do both, I use shorthand translate here...

.element {
  left: 50%;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
}

Smoother box shadows

/* Default box-shadow */
.box {
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Create smoother box-shadows by layering multiple
 * shadows with gradually increasing radius and offset */
.shadow-5 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

Smoother & sharper shadows with layered box-shadows