Search

ADCA

Lesson 27: Advanced CSS

Introduction

Advanced CSS focuses on creating professional, responsive, and interactive web page layouts. After learning basic CSS properties, students can use advanced CSS techniques to control the position, alignment, responsiveness, animation, and visual appearance of webpage elements.

In this lesson, students will learn Flexbox, CSS Grid, responsive design, media queries, transitions, transforms, animations, shadows, gradients, pseudo-elements, variables, and advanced positioning.

Learning Objectives

After completing this lesson, students will be able to:

Create flexible layouts using Flexbox.
Design complex layouts using CSS Grid.
Create responsive webpages.
Use media queries for different screen sizes.
Apply CSS transitions and transforms.
Create basic CSS animations.
Use gradients and shadows.
Work with pseudo-elements.
Use CSS variables.
Control advanced positioning.
Create professional webpage layouts.

1. CSS Flexbox

Flexbox is a CSS layout system designed to arrange elements in rows or columns.

It is especially useful for:

Navigation bars
Cards
Buttons
Menus
Centering content
Responsive layouts

To create a flex container:

.container {
    display: flex;
}

Example:

<div class="container">
    <div>Computer</div>
    <div>Excel</div>
    <div>HTML</div>
</div>

.container {
    display: flex;
}

The three elements will be arranged horizontally by default.

2. Flex Direction

The flex-direction property controls the direction of flex items.

.container {
    display: flex;
    flex-direction: row;
}

Common values:

row
row-reverse
column
column-reverse

Example:

.container {
    display: flex;
    flex-direction: column;
}

The items will appear vertically.

3. Justify Content

justify-content controls the alignment of flex items along the main axis.

.container {
    display: flex;
    justify-content: center;
}

Common values:

flex-start
flex-end
center
space-between
space-around
space-evenly

Example:

.navbar {
    display: flex;
    justify-content: space-between;
}

This is commonly used to place a logo on one side and navigation items on the other.

4. Align Items

align-items controls alignment along the cross axis.

.container {
    display: flex;
    align-items: center;
}

Common values include:

flex-start
flex-end
center
stretch
baseline

5. Flex Wrap

By default, flex items may remain on one line. flex-wrap allows items to move onto multiple lines.

.container {
    display: flex;
    flex-wrap: wrap;
}

This is useful when creating responsive card layouts.

6. Gap Property

The gap property creates space between flex or grid items.

.container {
    display: flex;
    gap: 20px;
}

It can be used instead of manually adding margins between every item.

7. Flexbox Card Layout

HTML

<div class="course-container">

    <div class="course-card">
        <h3>ADCA</h3>
        <p>Advanced computer applications course.</p>
    </div>

    <div class="course-card">
        <h3>Advanced Excel</h3>
        <p>Learn advanced Excel skills.</p>
    </div>

    <div class="course-card">
        <h3>Digital Marketing</h3>
        <p>Learn modern digital marketing techniques.</p>
    </div>

</div>

CSS

.course-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.course-card {
    flex: 1 1 250px;
    padding: 20px;
    border: 1px solid #ddd;
}

8. CSS Grid

CSS Grid is a two-dimensional layout system that allows developers to create rows and columns.

Grid is useful for:

Website layouts
Course cards
Image galleries
Product grids
Dashboard layouts

Example:

.container {
    display: grid;
}

9. Grid Columns

The grid-template-columns property defines columns.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

This creates three equal columns.

Another example:

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
}

10. Grid Rows

Rows can be defined using:

.container {
    display: grid;
    grid-template-rows: 100px 200px;
}

11. Grid Gap

The gap property adds spacing between grid items.

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

repeat() makes repetitive grid definitions easier.

12. Responsive Grid

A useful responsive pattern is:

.course-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

This allows the browser to automatically adjust the number of columns based on available space.

13. CSS Positioning

Advanced CSS provides several positioning methods.

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Relative Position

.box {
    position: relative;
    left: 20px;
}

The element remains part of the normal document flow while being visually offset.

Absolute Position

.container {
    position: relative;
}

.box {
    position: absolute;
    top: 20px;
    right: 20px;
}

An absolutely positioned element is positioned relative to its nearest positioned ancestor.

Fixed Position

.help-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

The element stays fixed relative to the browser viewport while scrolling.

Sticky Position

.navbar {
    position: sticky;
    top: 0;
}

A sticky element behaves normally until it reaches its specified offset and then remains attached to that position while scrolling within its containing context.

14. Z-Index

z-index controls the stacking order of positioned elements.

.header {
    position: relative;
    z-index: 10;
}

A higher stacking level generally places an element above another overlapping element, subject to stacking contexts.

15. CSS Transforms

The transform property changes the visual appearance or position of an element.

Scale

.card:hover {
    transform: scale(1.05);
}

Rotate

.image:hover {
    transform: rotate(5deg);
}

Translate

.box:hover {
    transform: translateY(-10px);
}

Multiple Transformations

.box:hover {
    transform: translateY(-5px) scale(1.05);
}

16. CSS Transitions

Transitions create smooth changes between CSS states.

button {
    background-color: #f97316;
    transition: 0.3s;
}

button:hover {
    opacity: 0.8;
}

More specific syntax:

button {
    transition: background-color 0.3s ease,
                transform 0.3s ease;
}

17. CSS Animations

CSS animations can create movement and visual effects without JavaScript.

Example:

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100px);
    }
}

.box {
    animation: slide 2s ease-in-out;
}

18. Animation Properties

Important animation properties include:

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode

Example:

.box {
    animation-name: moveBox;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

19. CSS Gradients

Gradients create smooth transitions between colors.

Linear Gradient

.banner {
    background: linear-gradient(90deg, #f97316, #ffb07c);
}

Radial Gradient

.banner {
    background: radial-gradient(circle, white, #f97316);
}

Gradients are commonly used for:

Hero sections
Buttons
Cards
Backgrounds
Banners

20. Box Shadow

The box-shadow property creates shadows around elements.

.card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

Basic structure:

horizontal-offset
vertical-offset
blur
spread
color

Example:

.card {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

21. Text Shadow

Text can also have a shadow.

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

22. Pseudo-Elements

Pseudo-elements allow developers to style a specific part of an element or insert generated content.

Common pseudo-elements:

::before
::after
::first-letter
::first-line

Example:

.heading::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #f97316;
    margin-top: 8px;
}

This can create a decorative line after a heading.

23. CSS Variables

CSS variables allow developers to store reusable values.

:root {
    --primary-color: #f97316;
    --text-color: #333;
    --card-radius: 10px;
}

They can then be used like:

button {
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--card-radius);
}

Benefits

Easier maintenance
Reusable values
Consistent design
Faster theme changes

24. Responsive Web Design

Responsive Web Design means creating webpages that adapt to different screen sizes.

A responsive website should work properly on:

Desktop
Laptop
Tablet
Mobile phone

Common techniques include:

Flexible widths
Flexbox
CSS Grid
Relative units
Responsive images
Media queries

25. Media Queries

Media queries apply CSS based on conditions such as screen width.

Example:

body {
    font-size: 18px;
}

@media (max-width: 768px) {

    body {
        font-size: 16px;
    }

}

The second rule applies when the viewport width is 768px or less.

26. Responsive Navigation Example

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 600px) {

    .navbar {
        flex-direction: column;
        gap: 15px;
    }

}

On smaller screens, the navigation items can be arranged vertically.

27. Responsive Images

A common responsive image rule is:

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

This prevents images from overflowing their containers in many layouts.

28. `object-fit`

The object-fit property controls how replaced elements such as images and videos fit inside a specified box.

.course-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

Common values:

fill
contain
cover
none
scale-down

29. CSS Overflow

The overflow property controls content that extends outside an element’s box.

.box {
    overflow: hidden;
}

Common values:

visible
hidden
scroll
auto

Example:

.card {
    width: 300px;
    height: 150px;
    overflow: auto;
}

30. Advanced Hover Effects

Hover effects can make websites more interactive.

.course-card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

This creates a card-lifting effect when the user moves the mouse over the card.

31. Flexbox vs Grid

Flexbox	Grid
One-dimensional layout	Two-dimensional layout
Row or column	Rows and columns
Good for navigation	Good for complete layouts
Excellent for alignment	Excellent for structured layouts
Useful for smaller components	Useful for larger page sections

Both systems can be used together.

32. Complete Advanced CSS Practical Project

Create two files:

index.html
style.css

HTML

<!DOCTYPE html>
<html lang="en">

<head>

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

    <title>DSD Education Courses</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header class="header">

        <div class="container">

            <h1>DSD Education</h1>

            <p>Professional Computer Courses</p>

        </div>

    </header>

    <nav class="navbar">

        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">About</a>
        <a href="#">Contact</a>

    </nav>

    <main class="container">

        <section class="hero">

            <h2>Learn. Practice. Grow.</h2>

            <p>
                Develop practical computer and digital skills
                with professional training.
            </p>

            <button>Explore Courses</button>

        </section>

        <section class="courses">

            <article class="card">

                <h3>ADCA</h3>

                <p>
                    Advanced Diploma in Computer Applications.
                </p>

                <button>Learn More</button>

            </article>

            <article class="card">

                <h3>Advanced Excel</h3>

                <p>
                    Learn formulas, functions, data analysis
                    and reporting.
                </p>

                <button>Learn More</button>

            </article>

            <article class="card">

                <h3>Digital Marketing</h3>

                <p>
                    Learn SEO, social media, advertising
                    and online marketing.
                </p>

                <button>Learn More</button>

            </article>

        </section>

    </main>

    <footer>

        <p>© 2026 DSD Education</p>

    </footer>

</body>

</html>

CSS

:root {
    --primary-color: #f97316;
    --text-color: #333;
    --light-bg: #f7f7f7;
    --radius: 12px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--text-color);
    background: var(--light-bg);
}

.container {
    width: min(90%, 1200px);
    margin: auto;
}

.header {
    padding: 50px 20px;
    text-align: center;
    color: white;
    background: linear-gradient(
        90deg,
        #f97316,
        #ffb07c
    );
}

.header h1 {
    margin: 0;
    font-size: 40px;
}

.navbar {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 15px;
    background: white;
}

.navbar a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
}

.navbar a:hover {
    color: var(--primary-color);
}

.hero {
    margin: 40px 0;
    padding: 60px 30px;
    text-align: center;
    background: white;
    border-radius: var(--radius);
}

.hero h2 {
    font-size: 36px;
    margin-top: 0;
}

.hero button,
.card button {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hero button:hover,
.card button:hover {
    transform: translateY(-3px);
}

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

.card {
    padding: 25px;
    background: white;
    border-radius: var(--radius);
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15);
}

footer {
    padding: 25px;
    text-align: center;
    background: #222;
    color: white;
}

@media (max-width: 600px) {

    .navbar {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .header h1 {
        font-size: 30px;
    }

    .hero h2 {
        font-size: 28px;
    }

}

Key Terms

Flexbox, Grid, Responsive Design, Media Query, Position, Z-index, Transform, Transition, Animation, Keyframes, Gradient, Box Shadow, Pseudo-element, CSS Variable, Object-fit, Overflow, Hover Effect, fr Unit, Mobile Responsive Design

Search

Key Terms

Company

Platform

Subscribe

Search

ADCA

ADCA

Curriculum

Lesson 27: Advanced CSS

Introduction

Learning Objectives

1. CSS Flexbox

2. Flex Direction

3. Justify Content

4. Align Items

5. Flex Wrap

6. Gap Property

7. Flexbox Card Layout

HTML

CSS

8. CSS Grid

9. Grid Columns

10. Grid Rows

11. Grid Gap

12. Responsive Grid

13. CSS Positioning

Relative Position

Absolute Position

Fixed Position

Sticky Position

14. Z-Index

15. CSS Transforms

Scale

Rotate

Translate

Multiple Transformations

16. CSS Transitions

17. CSS Animations

18. Animation Properties

19. CSS Gradients

Linear Gradient

Radial Gradient

20. Box Shadow

21. Text Shadow

22. Pseudo-Elements

23. CSS Variables

Benefits

24. Responsive Web Design

25. Media Queries

26. Responsive Navigation Example

27. Responsive Images

28. object-fit

29. CSS Overflow

30. Advanced Hover Effects

31. Flexbox vs Grid

32. Complete Advanced CSS Practical Project

HTML

CSS

Key Terms

Leave a Reply Cancel reply

Modal title

28. `object-fit`