Topic 6 : CSS Advance

Lesson: Elevating Your Web Design with Advanced CSS Techniques

Why Go Advanced with CSS?

Advanced CSS can help you create more efficient, scalable, and sophisticated web designs. These techniques will allow you to handle complex layouts, animations, and responsive design strategies more effectively.

Advanced CSS Techniques

1. CSS Grid Layout
   • This is a powerful layout system that gives you control over both columns and rows. CSS Grid simplifies creating complex layouts that were cumbersome with older CSS properties.
   • Example:
     .grid-container {
     display: grid;
     grid-template-columns: auto auto auto;
     gap: 10px;
     }
     .grid-item {
     background-color: rgba(255, 255, 255, 0.8);
     padding: 20px;
     text-align: center;
     }
2. Flexbox Layout
   • Flexbox provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.
   • Example:
     .flex-container {
display: flex;
justify-content: space-around;
}


     .flex-item {
padding: 10px;
}

3. Custom Properties (CSS Variables)
   • CSS variables allow you to store specific values or styles to reuse throughout your document, making your CSS easier to maintain and update.
   • Example:
     :root {
--main-color: blue;
}


     body {
color: var(--main-color);
}

4. Media Queries
   • Essential for creating responsive designs, media queries enable CSS features to be applied only under certain conditions, like specific screen sizes or orientation.
   • Example:
     @media (max-width: 600px) {
.responsive-text {
font-size: 14px;
}
}

5. Advanced Selectors
   • CSS offers a range of selectors that provide high levels of flexibility and specificity. For example, attribute selectors, pseudo-classes, and pseudo-elements.
   • Example:
     a[href$=".com"] {
background-color: yellow;
}


     p:first-of-type {
color: red;
}


Task: Create a Responsive Photo Gallery

Objective: Use advanced CSS techniques to build a responsive and visually appealing photo gallery.

Setup:

• Start with a simple HTML structure for a photo gallery.

Step 1: Apply CSS Grid to layout the gallery.

• Add CSS for a dynamic, responsive grid layout.

Step 2: Use media queries to adjust the gallery for different screen sizes.

• Modify the grid layout based on the viewport width.

Conclusion

You’ve just created a responsive photo gallery using advanced CSS techniques. By mastering these advanced features, you can take your web design skills to the next level, crafting sites that are both functional and beautiful. Experiment with different layouts, variables, and media queries to discover the vast possibilities of advanced CSS.