CSS

Coding with style(sheets)

Wednesday, Mar 18, 2020

Font Size

The em (pronounced as it sounds), is a unit of relative font sizing in CSS. Specifying 2em tells an element to be twice the size of its parent element.

Be careful! This means that if you have nested items, they will continue doubling in size. For this reason, it is best to use the rem (root em) unit, which is a constant value relative to that of the root <html> tag. In most browsers, this defaults to 16px.

Variables

Custom Font Faces

Custom Styling for Dark-Mode Users

/* Apply styling only to dark-mode users */
@media(prefers-color-scheme: dark) {
  body {
    /* Add a dark gray background */
    background-color: rgb(40,44,51);
    /* Make fonts render in white */
    color: white;
  }
}

Frosted Glass behind Element

A common cool effect is to have a slightly transparent, cool glassy effect behind an element. This used to be very difficult to add, but is now very simple thanks to the backdrop-filter property.

/* Create a frosted glass effect behind the banner */
div#banner {
  border-color: white;
  border-style: solid;
  text-align: center;
  background-color: rgb(255, 255, 255, 50%);
  backdrop-filter: 4px; /* Chrome */
  -webkit-backdrop-filter: 4px; /* Safari */

}

Responsive Layout