.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
    box-sizing: border-box; /* Include padding/border in width */
}

display: block;        /* Full width, new line */
display: inline;       /* Flows with text */
display: inline-block; /* Inline but with width/height */
display: none;         /* Hidden */
display: flex;         /* Flexbox */
display: grid;         /* Grid */

position: static;   /* Default */
position: relative; /* Relative to normal position */
position: absolute; /* Relative to positioned parent */
position: fixed;    /* Relative to viewport */
position: sticky;   /* Hybrid relative/fixed */

/* Container */
.flex-container {
    display: flex;
    flex-direction: row | column;
    justify-content: flex-start | center | space-between;
    align-items: stretch | center | flex-start;
    gap: 20px;
}

/* Items */
.flex-item {
    flex: 1; /* Grow to fill space */
    order: 1; /* Visual order */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
}

.grid-item {
    grid-column: span 2;
    grid-row: 1 / 3;
}

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400 | bold;
font-style: italic;
line-height: 1.6;
text-align: left | center | right;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1px;

color: #007bff;                    /* Hex */
color: rgb(0, 123, 255);           /* RGB */
color: rgba(0, 123, 255, 0.5);     /* RGBA */
color: hsl(200, 100%, 50%);        /* HSL */
color: hsla(200, 100%, 50%, 0.5);  /* HSLA */

background-color: #f0f0f0;
background-image: url('image.jpg');
background-size: cover | contain;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

/* Shorthand */
background: #fff url('img.jpg') no-repeat center/cover;

border: 2px solid #007bff;
border-radius: 8px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;

/* Box shadow */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

transition: all 0.3s ease;
transition: transform 0.3s, opacity 0.2s;
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease | linear | ease-in-out;
transition-delay: 0.1s;

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
transform: scale(1.5);
transform: rotate(45deg);
transform: skew(10deg, 20deg);

/* Multiple */
transform: translate(50px, 50px) rotate(45deg) scale(1.2);

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.animated {
    animation: slideIn 0.5s ease-out;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Mobile first */
@media (min-width: 576px) { /* Small tablets */ }
@media (min-width: 768px) { /* Tablets */ }
@media (min-width: 992px) { /* Desktops */ }
@media (min-width: 1200px) { /* Large desktops */ }

/* Dark mode */
@media (prefers-color-scheme: dark) { }

/* Orientation */
@media (orientation: landscape) { }

/* Absolute */
px    /* Pixels */
pt    /* Points */

/* Relative */
%     /* Percentage of parent */
em    /* Relative to parent font-size */
rem   /* Relative to root font-size */
vw    /* 1% of viewport width */
vh    /* 1% of viewport height */
vmin  /* 1% of smaller viewport dimension */
vmax  /* 1% of larger viewport dimension */
ch    /* Width of "0" character */

:root {
    --primary-color: #007bff;
    --spacing: 20px;
}

.element {
    color: var(--primary-color);
    padding: var(--spacing);
}

/* Calculations */
width: calc(100% - 50px);
font-size: clamp(1rem, 2vw, 2rem);
width: min(500px, 100%);
width: max(300px, 50%);

/* Colors */
color: rgb(0, 123, 255);
background: rgba(0, 0, 0, 0.5);
color: hsl(200, 100%, 50%);

/* Gradients */
background: linear-gradient(to right, blue, purple);
background: radial-gradient(circle, blue, purple);

filter: blur(5px);
filter: brightness(1.5);
filter: contrast(200%);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: sepia(100%);
filter: drop-shadow(2px 2px 4px black);

/* Flexbox */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Absolute */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}