Set box properties for a div:

1. Width 300px and height 200px.
2. Padding 20px on all sides.
3. Border 5px solid black.
4. Margin 50px.

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 50px;
}

Control how element size is calculated:

1. Make all elements (*) use `border-box`.
2. Explain in a comment why `border-box` is often preferred over the default `content-box`.

* {
    box-sizing: border-box;
}

/*
   border-box includes padding and border in the declared width/height,
   which makes layouts easier to reason about.
*/

Change how these elements display:

1. Make links (a) behave like block elements (full line).
2. Make list items (li) appear next to each other (inline-block).
3. Hide elements with class (.hidden) completely (no space reserved).

a {
    display: block;
}

li {
    display: inline-block;
}

.hidden {
    display: none;
}

Create a flex container:

1. Make `.container` use Flexbox.
2. Set direction to column.
3. Allow wrapping if there isn't enough space.

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

Inside a flex container, align items:

1. Center horizontally (justify-content).
2. Center vertically (align-items).
3. Make the container fill the viewport height (100vh).

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Use different positioning techniques:

1. Make the nav fixed at the top with width 100%.
2. Position .btn absolutely in the bottom-right corner of a relative parent.

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.parent {
    position: relative;
}

.btn {
    position: absolute;
    bottom: 0;
    right: 0;
}

Use floats to layout an image and text:

1. Float the image (img) to the left.
2. Add 15px right margin to the image.
3. Ensure the next element (.clearfix) clears floats (clear: both).

img {
    float: left;
    margin-right: 15px;
}

.clearfix {
    clear: both;
}

Control content overflow:

1. Set a div size to 100x100px.
2. Add a scrollbar if content exceeds the size.
3. Hide overflow only on the x-axis.

div {
    width: 100px;
    height: 100px;
    overflow: scroll; /* or auto */
    overflow-x: hidden;
}

Control stacking order:

1. You have two overlapping elements (.box1 and .box2).
2. Make .box1 appear on top using z-index (make sure position is set).

.box1 {
    position: relative; /* required for z-index */
    z-index: 2;
}

.box2 {
    position: relative;
    z-index: 1;
}

Use appropriate measurement units:

1. Set container width to 50% of the page.
2. Set font size to 1.2rem (relative to root).
3. Set element width to 30vw (30% of viewport width).

.container {
    width: 50%;
}

p {
    font-size: 1.2rem;
}

.box {
    width: 30vw;
}

Create responsive styles using media queries:

1. Set container width to 90% on small screens (under 768px).
2. Switch Flexbox direction from row to column on small screens.
3. Hide elements with class (.desktop-only) on small screens.
4. Use 14px font on small screens and 16px on large screens.

/* Default styles (large screens) */
.container {
    width: 70%;
}

.flex-container {
    display: flex;
    flex-direction: row;
}

body {
    font-size: 16px;
}

/* Media query for small screens */
@media (max-width: 768px) {
    .container {
        width: 90%;
    }
    
    .flex-container {
        flex-direction: column;
    }
    
    .desktop-only {
        display: none;
    }
    
    body {
        font-size: 14px;
    }
}

/* Media query for very large screens */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Create motion effects:

1. Add a smooth background-color transition on hover (0.3s).
2. Create an animation named "fadeIn" that goes from opacity 0 to 1.
3. Make the animation last 2 seconds and run only once.
4. Add a hover scale effect using transform.

/* Transition for background color */
.button {
    background-color: #007bff;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

/* Define animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Apply animation */
.fade-element {
    animation: fadeIn 2s ease-in-out 1;
}

/* Hover scale effect */
.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

/* Advanced example: rotation animation */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: rotate 2s linear infinite;
}

Use advanced CSS transforms:

1. Rotate an element by 45 degrees.
2. Skew an element by 10 degrees on the X axis (skewX).
3. Translate an element 50px right and 30px down.
4. Combine multiple transforms in one line (rotate + scale + translate).
5. Use transform-origin to change the transform origin point.

/* Rotate */
.rotate-element {
    transform: rotate(45deg);
}

/* Skew */
.skew-element {
    transform: skewX(10deg);
}

/* Translate */
.translate-element {
    transform: translate(50px, 30px);
}

/* Combine transforms */
.multi-transform {
    transform: rotate(15deg) scale(1.2) translate(20px, 10px);
}

/* Change origin */
.custom-origin {
    transform: rotate(45deg);
    transform-origin: top left; /* instead of center */
}

/* Advanced example: flip card */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* 3D transforms */
.3d-element {
    transform: rotateX(30deg) rotateY(45deg) translateZ(50px);
}