Intermediate CSS: A Comprehensive Guide

Welcome back to Hatribytes! Now that you've mastered the basics of CSS, it's time to dive into some intermediate-level concepts. This guide will help you enhance your web pages with more advanced CSS techniques.

1. Flexbox

Flexbox is a powerful layout model that allows you to create flexible and responsive layouts. It simplifies the process of aligning and distributing space among items in a container.

Basic Flexbox Example:

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

.item {
    background-color: #4CAF50;
    padding: 20px;
    margin: 10px;
    color: white;
}
        

HTML:

    
Item 1
    
Item 2
    
Item 3

        

2. Grid Layout

The CSS Grid Layout is a two-dimensional layout system that allows you to create complex and responsive grid-based layouts.

Basic Grid Example:

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

.item {
    background-color: #2196F3;
    padding: 20px;
    color: white;
}
        

HTML:

    
Item 1
    
Item 2
    
Item 3
    
Item 4
    
Item 5
    
Item 6

        

3. Advanced Selectors

CSS offers various advanced selectors that allow you to target elements more precisely.

Attribute Selectors:

a[href*="example"] {
    color: red;
}

input[type="text"] {
    border: 1px solid #ccc;
}
        

Child and Sibling Selectors:

.container > .item {
    background-color: #FFC107;
}

.container .item + .item {
    margin-top: 20px;
}
        

4. Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements allow you to apply styles to elements based on their state or position in the DOM.

Pseudo-classes:

a:hover {
    color: green;
}

input:focus {
    border-color: blue;
}
        

Pseudo-elements:

p::first-line {
    font-weight: bold;
}

p::before {
    content: "Note: ";
    color: red;
}
        

5. CSS Transitions

CSS transitions allow you to animate changes to CSS properties smoothly over a specified duration.

Transition Example:

.button {
    background-color: #008CBA;
    padding: 10px 20px;
    color: white;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #005F73;
}
        

HTML:

6. CSS Animations

CSS animations allow you to create complex animations using keyframes. You can control the animation's timing, duration, and other properties.

Animation Example:

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

.box {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    animation: slideIn 0.5s ease-in-out;
}
        

HTML:

Animated Box
        

7. Responsive Design

Responsive design ensures your web pages look great on all devices, from desktops to mobile phones. Media queries are a key component of responsive design.

Responsive Design Example:

.container {
    width: 100%;
    padding: 20px;
}

@media (min-width: 600px) {
    .container {
        max-width: 600px;
        margin: auto;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        margin: auto;
    }
}
        

HTML:

    
Responsive Container

        

8. CSS Variables

CSS variables, also known as custom properties, allow you to store values and reuse them throughout your stylesheet.

CSS Variables Example:

:root {
    --primary-color: #6200EA;
    --secondary-color: #03DAC6;
    --padding: 10px;
}

.container {
    background-color: var(--primary-color);
    color: white;
    padding: var(--padding);
}

.button {
    background-color: var(--secondary-color);
    padding: var(--padding);
}
        

HTML:

    
Container with CSS Variables
    

        

9. Conclusion

You've now learned some intermediate CSS techniques that will help you create more advanced and responsive web pages. Keep practicing and experimenting with these concepts to enhance your CSS skills further.

If you have any questions or need further assistance, feel free to leave a comment below. Happy coding!