Advanced styling goes beyond basic CSS to create sophisticated, responsive, and performant user interfaces. This article covers modern layout techniques, mobile optimization, animations, cross-browser compatibility, and accessibility - everything needed to create professional, polished applications that work beautifully on any device.

Flexbox is perfect for one-dimensional layouts:

Basic Flexbox:

/* Horizontal layout */
.flex-container {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Vertical layout */
.flex-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Space between items */
.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Center content */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

Responsive Flexbox:

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card-item {
    flex: 1 1 300px; /* grow, shrink, basis */
    min-width: 250px;
    max-width: 400px;
}

/* Stack on mobile */
@media (max-width: 768px) {
    .card-item {
        flex: 1 1 100%;
    }
}

Practical Example: Dashboard Cards

<div class="dashboard-cards">
    <div class="stat-card">
        <div class="stat-icon">👥</div>
        <div class="stat-content">
            <div class="stat-value">2,543</div>
            <div class="stat-label">Total Users</div>
        </div>
    </div>
    <!-- More cards... -->
</div>

<style>
.dashboard-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1 1 250px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-icon {
    font-size: 48px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f9ff;
    border-radius: 12px;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
}

.stat-label {
    font-size: 14px;
    color: #6b7280;
    margin-top: 5px;
}
</style>

Grid is ideal for two-dimensional layouts:

Basic Grid:

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

/* Responsive grid */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

Complex Grid Layout:

.dashboard-layout {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: 60px 1fr 50px;
    gap: 20px;
    height: 100vh;
}

.sidebar { grid-column: 1; grid-row: 1 / -1; }
.header { grid-column: 2 / 4; grid-row: 1; }
.main-content { grid-column: 2; grid-row: 2; }
.widgets { grid-column: 3; grid-row: 2; }
.footer { grid-column: 2 / 4; grid-row: 3; }

/* Responsive: stack on mobile */
@media (max-width: 1024px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .sidebar,
    .header,
    .main-content,
    .widgets,
    .footer {
        grid-column: 1;
        grid-row: auto;
    }
}

Practical Example: Product Grid

<div class="product-grid">
    <div class="product-card">
        <img src="product.jpg" alt="Product">
        <h4>Product Name</h4>
        <p class="price">$99.99</p>
        <button>Add to Cart</button>
    </div>
    <!-- More products... -->
</div>

<style>
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
}

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.product-card h4 {
    padding: 15px 20px 5px;
    margin: 0;
    font-size: 18px;
}

.product-card .price {
    padding: 0 20px;
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
}

.product-card button {
    width: calc(100% - 40px);
    margin: 15px 20px 20px;
    padding: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
</style>

Start with mobile design, then enhance for larger screens:

/* Base mobile styles */
.container {
    padding: 15px;
    max-width: 100%;
}

.nav-menu {
    flex-direction: column;
    gap: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 30px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .nav-menu {
        flex-direction: row;
        gap: 20px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        padding: 40px;
    }
}

Standard breakpoints:

/* Mobile */
@media (max-width: 575px) {
    /* Styles for phones */
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
    /* Styles for tablets */
}

/* Desktop */
@media (min-width: 992px) {
    /* Styles for desktops */
}

/* Large screens */
@media (min-width: 1200px) {
    /* Styles for large screens */
}

Optimize images for different screens:

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive background images */
.hero-banner {
    background-image: url('mobile-bg.jpg');
    background-size: cover;
    background-position: center;
}

@media (min-width: 768px) {
    .hero-banner {
        background-image: url('tablet-bg.jpg');
    }
}

@media (min-width: 1200px) {
    .hero-banner {
        background-image: url('desktop-bg.jpg');
    }
}

Scale fonts appropriately:

h1 {
    font-size: 28px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    h1 {
        font-size: 36px;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 48px;
    }
}

/* Fluid typography */
h1 {
    font-size: clamp(28px, 5vw, 48px);
}

Design for touch:

/* Minimum touch target size: 44x44px */
.btn,
.nav-link,
.form-control {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
}

/* Spacing between touch targets */
.button-group .btn {
    margin: 8px;
}

/* Remove hover effects on touch devices */
@media (hover: none) {
    .card:hover {
        transform: none;
    }
}

/* Add active states for touch */
.btn:active {
    transform: scale(0.98);
    background: #2563eb;
}

Hamburger menu pattern:

<div class="mobile-nav">
    <button class="hamburger" id="menuToggle">
        <span></span>
        <span></span>
        <span></span>
    </button>

    <nav class="nav-menu" id="navMenu">
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</div>

<style>
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background: #1f2937;
    transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(9px, 9px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

.nav-menu {
    display: flex;
    gap: 30px;
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 80%;
        height: calc(100vh - 60px);
        background: white;
        flex-direction: column;
        padding: 30px;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: left 0.3s;
    }

    .nav-menu.active {
        left: 0;
    }
}
</style>

<script>
document.getElementById('menuToggle').addEventListener('click', function() {
    this.classList.toggle('active');
    document.getElementById('navMenu').classList.toggle('active');
});
</script>

Essential for mobile responsiveness:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Smooth property changes:

.button {
    background: #3b82f6;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Transition specific properties */
.card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

Keyframe animations:

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Loading spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

Optimize animations:

/* Use transform and opacity for better performance */
/* Good */
.element {
    transform: translateX(100px);
    opacity: 0.5;
}

/* Avoid animating these properties */
.element {
    left: 100px; /* Triggers layout */
    width: 200px; /* Triggers layout */
}

/* Use will-change for complex animations */
.animated-element {
    will-change: transform, opacity;
}

/* Remove after animation completes */
.animated-element.done {
    will-change: auto;
}

Ensure compatibility:

.element {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Use autoprefixer in build process instead of manual prefixes */

Detect and adapt:

/* CSS Feature Queries */
@supports (display: grid) {
    .container {
        display: grid;
    }
}

@supports not (display: grid) {
    .container {
        display: flex;
    }
}

/* JavaScript feature detection */
if ('IntersectionObserver' in window) {
    // Use IntersectionObserver
} else {
    // Fallback
}

Test on:

• Chrome (most users)
• Safari (iOS, macOS)
• Firefox
• Edge
• Mobile browsers (iOS Safari, Chrome Mobile)

Ensure readable text:

/* WCAG AA minimum: 4.5:1 for normal text */
.good-contrast {
    color: #1f2937; /* Dark gray */
    background: #ffffff; /* White */
}

/* Large text (18pt+): 3:1 minimum */
.large-text {
    font-size: 24px;
    color: #4b5563;
    background: #ffffff;
}

/* Test contrast: https://webaim.org/resources/contrastchecker/ */

Support keyboard users:

/* Visible focus indicators */
button:focus,
a:focus,
input:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #3b82f6;
    color: white;
    padding: 10px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

Help screen readers:

<button aria-label="Close dialog">×</button>

<img src="logo.png" alt="Company logo">

<nav aria-label="Main navigation">
    <!-- navigation items -->
</nav>

<div role="alert" aria-live="polite">
    Form submitted successfully!
</div>

• Minimize CSS: Remove unused styles
• Combine Files: Reduce HTTP requests
• Critical CSS: Inline above-fold styles
• Lazy Load: Load non-critical CSS later
• Avoid @import: Use link tags instead

Minimize layout thrashing:

/* Bad: reading and writing alternately */
for (let elem of elements) {
    const height = elem.offsetHeight; // Read
    elem.style.height = height + 10 + 'px'; // Write
}

/* Good: batch reads and writes */
const heights = [];
for (let elem of elements) {
    heights.push(elem.offsetHeight); // Read all
}
for (let i = 0; i 

Optimize resource loading:

<!-- Preload critical resources -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- Lazy load images -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- Defer non-critical JavaScript -->
<script src="script.js" defer></script>

Putting it all together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Dashboard</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #f5f7fa;
            color: #1f2937;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 250px 1fr;
            min-height: 100vh;
        }

        .sidebar {
            background: #1f2937;
            color: white;
            padding: 30px 20px;
        }

        .main-content {
            padding: 30px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        }

        .stat-value {
            font-size: 36px;
            font-weight: 700;
            color: #3b82f6;
            margin-bottom: 10px;
        }

        .stat-label {
            color: #6b7280;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }

            .sidebar {
                padding: 20px;
            }

            .main-content {
                padding: 20px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stat-card {
            animation: fadeInUp 0.6s ease-out;
        }

        .stat-card:nth-child(1) { animation-delay: 0.1s; }
        .stat-card:nth-child(2) { animation-delay: 0.2s; }
        .stat-card:nth-child(3) { animation-delay: 0.3s; }
        .stat-card:nth-child(4) { animation-delay: 0.4s; }
    </style>
</head>
<body>
    <div class="dashboard">
        <aside class="sidebar">
            <h2>Dashboard</h2>
            <!-- Navigation -->
        </aside>

        <main class="main-content">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">2,543</div>
                    <div class="stat-label">Total Users</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">$45,231</div>
                    <div class="stat-label">Revenue</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">189</div>
                    <div class="stat-label">Active Projects</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">98.5%</div>
                    <div class="stat-label">Satisfaction</div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

Before launching:

• ☐ Mobile-responsive on all screens
• ☐ Touch targets 44x44px minimum
• ☐ Color contrast meets WCAG AA
• ☐ Keyboard navigation works
• ☐ Focus indicators visible
• ☐ Images have alt text
• ☐ Animations perform smoothly
• ☐ Tested on major browsers
• ☐ Loading time optimized
• ☐ No horizontal scroll on mobile
• ☐ Forms work on mobile
• ☐ Print styles defined

You now have advanced styling skills to create professional, responsive, accessible applications. The final article in this phase brings everything together in a comprehensive project where you'll build a fully branded, white-labeled application.

Hands-On Exercise (To Be Added)

Exercise placeholders will include practical activities such as:

• Creating a responsive grid layout
• Building a mobile-friendly navigation
• Implementing smooth animations
• Testing across devices and browsers

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• Flexbox vs Grid usage
• Mobile-first responsive design
• Performance optimization techniques
• Accessibility requirements