Properties

• position: static; (default)
• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

We didn't cover sticky in class, but it's a fun one to play with. It's like a mix between relative and fixed. The element is treated as relative until it crosses a specified threshold, then it becomes fixed. Try it out!

Float

Float is a property that allows an element to be pushed to the left or right, allowing other elements to wrap around it. It's commonly used for images in text.

Positioning Demos

• Playground
• Float
• Fixed Header

Color

Color is a fun property to play with. You can use named colors, hex codes, RGB, RGBA, HSL, HSLA, and more. Here are some examples:

/* Named colors */
color: red;
color: blue;
color: green;

/* Hex codes */
color: #ff0000;
color: #00ff00;
color: #0000ff;

/* RGB */
color: rgb(255, 0, 0);
color: rgb(0, 255, 0);
color: rgb(0, 0, 255);

/* RGBA */
color: rgba(255, 0, 0, 0.5);
color: rgba(0, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);
color: hsl(120, 100%, 50%);
color: hsl(240, 100%, 50%);

/* OKLCH */
color: oklch(0, 100, 50);
color: oklch(120, 100, 50);
color: oklch(240, 100, 50);

Some places to get color palette inspiration are:

• Coolors
• SheCodes
• Color Hunt

Gradients

Gradients are a fun way to add color to your website. You can create linear gradients, radial gradients, and more. Here are some examples:

/* Linear Gradient */
background: linear-gradient(to right, #ff0000, #0000ff);

/* Radial Gradient */
background: radial-gradient(circle, #ff0000, #0000ff);