1.Selectors

CSS3 offers various selectors to target HTML elements with greater precision:

/* Class selector */
    .button {
        background-color: #4CAF50;    /* Green background */
        color: white;                /* White text */
    }

    /* ID selector */
    #header {
        font-size: 24px;             /* Font size of 24 pixels */
    }

    /* Attribute selector */
    input[type="text"] {
        border: 1px solid #ccc;      /* Gray border for text inputs */
    }

2.Box Model

The CSS box model describes the rectangular boxes generated for elements in the document tree. It includes margins, borders, padding, and content.

.box {
        width: 200px;                /* Width of the box */
        padding: 20px;               /* Space inside the border */
        border: 1px solid #000;      /* Solid black border */
        margin: 10px;                /* Space outside the border */
    }

3.Flexbox

Flexbox is a layout model that allows for flexible and responsive layouts. It provides an efficient way to distribute space among items in a container.

.container {
        display: flex;               /* Activates flexbox */
        justify-content: center;    /* Centers items horizontally */
        align-items: center;        /* Centers items vertically */
    }

    .item {
        flex: 1;                    /* Items grow and shrink as needed */
        margin: 10px;               /* Space between items */
    }

4.Grid Layout

CSS Grid Layout provides a two-dimensional grid-based layout system for creating complex and responsive layouts.

.grid-container {
        display: grid;                  /* Activates grid layout */
        grid-template-columns: 1fr 2fr; /* Defines two columns with fractional units */
        gap: 10px;                      /* Space between grid items */
    }

    .grid-item {
        background-color: #f4f4f4;     /* Light gray background */
        padding: 20px;                 /* Space inside the grid item */
    }

5.Responsive Design

Responsive design ensures that web content looks good on all devices by using media queries to apply different styles based on device characteristics.

@media screen and (max-width: 600px) {
        .container {
            flex-direction: column;    /* Stacks items vertically on small screens */
        }
    }

6.Transitions

CSS transitions provide a way to change property values smoothly over a specified duration.

.button {
        background-color: #4CAF50;
        transition: background-color 0.3s ease; /* Smooth background color change */
    }

    .button:hover {
        background-color: #45a049;    /* Darker green on hover */
    }

7.Animations

CSS animations allow you to create complex animations by defining keyframes and applying them to elements.

@keyframes slide {
        from {
            transform: translateX(-100%);  /* Start from off-screen left */
        }
        to {
            transform: translateX(0);       /* End at the original position */
        }
    }

    .slide-in {
        animation: slide 0.5s ease-in-out; /* Apply the slide animation */
    }

8.Gradients

CSS gradients create smooth transitions between two or more colors and can be used as background images.

.gradient-background {
        background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from pink to orange */
    }

9.Shadows

CSS shadows can be applied to text and elements to create depth and visual interest.

.box-shadow {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow with offset, blur, and color */
    }

    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow for text with offset and blur */
    }

10.Custom Properties (Variables)

CSS custom properties (variables) allow you to define reusable values throughout your stylesheet.

:root {
        --primary-color: #3498db;     /* Define a primary color variable */
    }

    .header {
        background-color: var(--primary-color); /* Use the variable */
    }