Units in CSS

• Absolute: px, pc, pt, cm, mm, in
• Relative: em, rem, ex, ch, %
• Viewport: vh, vw, vmax, vmin

MDN Reference

Absolute Units

px, pc, pt, cm, mm, in

              img { border-width: 2px; }
            

Relative Units

em, rem, ex, ch, %

              h1 { font-size: 3rem; }
            

Viewport Units

vh, vw, vmax, vmin

              section { width: 80vw; }
            

Colors in CSS

• Color Names
• Hex Codes
• RGB/RGBA
• HSL/HSLA

MDN Reference

Color Names

              p {
                color: grey;
                border-color: teal;
                background-color: green;
              }
            

Hex Codes

              p {
                color: #808080;
                border-color: #008080;
                background-color: #008000;
              }
            

RGB/RGBA

              p {
                color: rgb(128, 128, 128);
                border-color: rgb(0, 128, 128);
                background-color: rgba(0, 128, 0, 0.5);
              }
            

HSL/HSLA

              p {
                color: hsl(0, 0, 50%);
                border-color: rgb(180, 100%, 50%);
                background-color: rgba(120, 100%, 50%, 0.5);
              }
            

Advanced Selectors

• Pseudo Elements & Classes
• Relational Combinators
• Media Queries

MDN Reference

Pseudo Selectors

              *::selection { background: #eee; } /* Pseudo-element */
              a:hover { color: #c00; }           /* Pseudo-class   */
            

Relational Combinators

              nav h1 { font-weight: normal; }    /* Descendant */
              ul > li { font-style: italic; }    /* Child */
              h1 + p { font-weight: bold; }      /* Sibling */
              a.portal { font-size: 1.5rem; }    /* Specificity */
            

Media Queries

              @media print {
                body { backgorund: #fff; }
              }
              @media screen and (max-width: 800px) {
                nav ul { display: block; }
              }
              @media screen and (min-aspect-ratio: 1/1) {
                /* Apply rules for landscape orientation */
              }
            

Advanced Layouts

• Display
• Position

MDN Reference

Display

              nav {
                display: flex;
                flex-direction: row;
              }
              .portal { display: inline-block; }
            

Position

              nav {
                top: 0;
                position: fixed;
              }