1. Text Styling

This text is styled with CSS properties for font-family, color, and font-size:


p.example {
    font-family: Arial, sans-serif;
    color: #4a2e91;
    font-size: 1.2rem;
}

2. Background Styling

This is an example of a linear gradient background. 

div {
    background: linear-gradient(45deg, #4a2e91, #ff6b6b);
    color: white;
    padding: 20px;
}

3. Box Model

This box demonstrates CSS padding, margin, border, and shadow. 

div {
    border: 2px solid #4a2e91;
    padding: 20px;
    margin: 20px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

4. Layout with Flexbox

Item 1
Item 2
Item 3

div {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

div > div {
    background: #4a2e91;
    color: white;
    padding: 10px;
}

5. CSS Animations


@keyframes example-animation {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(0); }
}

div {
    width: 100px;
    height: 100px;
    background: #4a2e91;
    animation: example-animation 2s infinite;
}