Complete CSS3 Course

1. Introduction to CSS3

CSS3 (Cascading Style Sheets Level 3) is the latest evolution of CSS, bringing powerful new features for styling web pages including animations, transitions, gradients, and advanced layout systems.

What is CSS?

Cascading: Styles cascade from parent to child elements
Style Sheets: Separate presentation from content
Declarative: Describe what you want, not how to achieve it

CSS Syntax

selector {
    property: value;
    property: value;
}

/* Example */
h1 {
    color: blue;
    font-size: 24px;
    margin-bottom: 10px;
}
            

💡 Tip: CSS3 is modular, meaning features are developed and released independently, allowing browsers to implement them at different rates.

2. CSS Selectors

Basic Selectors

/* Element selector */
p { color: black; }

/* Class selector */
.highlight { background: yellow; }

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

/* Universal selector */
* { margin: 0; padding: 0; }

/* Attribute selector */
input[type="text"] { border: 1px solid gray; }
            

Combinators

/* Descendant selector */
div p { color: blue; }

/* Child selector */
div > p { color: red; }

/* Adjacent sibling */
h1 + p { margin-top: 0; }

/* General sibling */
h1 ~ p { color: gray; }
            

Pseudo-classes and Pseudo-elements

/* Pseudo-classes */
a:hover { color: red; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #f0f0f0; }

/* Pseudo-elements */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
div::before { content: "★"; }
div::after { content: "★"; }
            

🏋️ Exercise 1:

Create a CSS file that styles a navigation menu with hover effects and different styles for active links.

3. The CSS Box Model

Understanding the Box Model

Every element in CSS is a rectangular box consisting of:

Content: The actual content of the element
Padding: Space between content and border
Border: A line around the padding
Margin: Space outside the border

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    
    /* Box-sizing property */
    box-sizing: border-box; /* includes padding and border in width/height */
}
            

Display Properties

/* Block elements */
div { display: block; }

/* Inline elements */
span { display: inline; }

/* Inline-block elements */
img { display: inline-block; }

/* Hide elements */
.hidden { display: none; }
.invisible { visibility: hidden; }
            

Positioning

/* Static (default) */
.static { position: static; }

/* Relative positioning */
.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

/* Absolute positioning */
.absolute {
    position: absolute;
    top: 0;
    right: 0;
}

/* Fixed positioning */
.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

/* Sticky positioning */
.sticky {
    position: sticky;
    top: 0;
}
            

4. CSS Layout Techniques

Float Layout (Legacy)

.float-left {
    float: left;
    width: 50%;
}

.float-right {
    float: right;
    width: 50%;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
            

Modern Layout with Flexbox and Grid

Modern CSS provides powerful layout systems that replace the need for floats and complex positioning.

⚠️ Note: While floats are still supported, Flexbox and Grid are the modern standards for layout.

5. Flexbox Layout

Flex Container Properties

.flex-container {
    display: flex;
    
    /* Direction */
    flex-direction: row; /* row, row-reverse, column, column-reverse */
    
    /* Wrapping */
    flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
    
    /* Justify content (main axis) */
    justify-content: flex-start; /* flex-end, center, space-between, space-around, space-evenly */
    
    /* Align items (cross axis) */
    align-items: stretch; /* flex-start, flex-end, center, baseline */
    
    /* Gap between items */
    gap: 20px;
}
            

Flex Item Properties

.flex-item {
    /* Flex grow */
    flex-grow: 1; /* how much item should grow */
    
    /* Flex shrink */
    flex-shrink: 1; /* how much item should shrink */
    
    /* Flex basis */
    flex-basis: auto; /* initial size before growing/shrinking */
    
    /* Shorthand */
    flex: 1 1 auto; /* grow shrink basis */
    
    /* Align individual item */
    align-self: center;
}
            

Flexbox Demo

Item 1

Item 2

Item 3

🏋️ Exercise 2:

Create a responsive navigation bar using Flexbox that centers items horizontally and handles mobile layouts.

6. CSS Grid Layout

Grid Container Properties

.grid-container {
    display: grid;
    
    /* Define columns */
    grid-template-columns: 1fr 2fr 1fr; /* or 200px auto 100px */
    
    /* Define rows */
    grid-template-rows: 100px auto 50px;
    
    /* Gap between grid items */
    gap: 20px; /* or grid-gap */
    
    /* Align content */
    justify-content: center;
    align-content: center;
}
            

Grid Item Properties

.grid-item {
    /* Position item */
    grid-column: 1 / 3; /* start / end */
    grid-row: 2 / 4;
    
    /* Shorthand */
    grid-area: 2 / 1 / 4 / 3; /* row-start / col-start / row-end / col-end */
    
    /* Align individual item */
    justify-self: center;
    align-self: center;
}
            

Grid Template Areas

.grid-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 80px 1fr 60px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
            

Grid Demo

1

2

3

4

5

6

7. Responsive Design

Media Queries

/* Mobile first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

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

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
}
            

Responsive Units

/* Relative units */
.responsive {
    width: 50%; /* percentage of parent */
    font-size: 1.2em; /* relative to parent font size */
    font-size: 1.2rem; /* relative to root font size */
    
    /* Viewport units */
    width: 50vw; /* 50% of viewport width */
    height: 100vh; /* 100% of viewport height */
    font-size: 4vmin; /* 4% of smaller viewport dimension */
    font-size: 4vmax; /* 4% of larger viewport dimension */
}
            

Responsive Images

/* Responsive images */ img { max-width: 100%; height: auto; } /* Picture element for different images */

💡 Tip: Always design mobile-first, then enhance for larger screens. This ensures better performance on mobile devices.

8. CSS Animations and Transitions

CSS Transitions

.button {
    background: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    
    /* Transition */
    transition: all 0.3s ease;
    /* or specific properties */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
    background: darkblue;
    transform: translateY(-2px);
}
            

CSS Animations

/* Define keyframes */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply animation */
.animated-element {
    animation: slideIn 0.5s ease-out;
    /* or with all properties */
    animation: slideIn 0.5s ease-out 0.2s infinite alternate;
    /*         name duration timing delay iteration direction */
}
            

Transform Properties

.transform-examples {
    /* 2D Transforms */
    transform: translate(50px, 100px);
    transform: rotate(45deg);
    transform: scale(1.5);
    transform: skew(30deg, 20deg);
    
    /* 3D Transforms */
    transform: translateZ(50px);
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: perspective(1000px) rotateY(45deg);
    
    /* Multiple transforms */
    transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}
            

Animation Demo

Bouncing ball animation

Transform Demo

Hover me!

Hover to see transform effects

9. Advanced CSS3 Features

CSS Variables (Custom Properties)

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
    --border-radius: 8px;
}

.element {
    color: var(--primary-color);
    font-size: var(--font-size);
    border-radius: var(--border-radius);
    
    /* With fallback */
    color: var(--undefined-color, #000);
}

/* Dynamic variables with JavaScript */
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
            

CSS Gradients

/* Linear gradients */
.linear-gradient {
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    background: linear-gradient(to bottom, red 0%, yellow 50%, blue 100%);
}

/* Radial gradients */
.radial-gradient {
    background: radial-gradient(circle, red, blue);
    background: radial-gradient(ellipse at center, red 0%, blue 100%);
}

/* Conic gradients */
.conic-gradient {
    background: conic-gradient(red, yellow, green, blue, red);
}
            

Gradient Demo

Beautiful Gradient

CSS Filters

.filtered-image {
    filter: blur(5px);
    filter: brightness(150%);
    filter: contrast(200%);
    filter: grayscale(100%);
    filter: hue-rotate(90deg);
    filter: saturate(200%);
    filter: sepia(100%);
    
    /* Multiple filters */
    filter: blur(2px) brightness(120%) contrast(150%);
}
            

CSS Shapes

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

.polygon {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
            

🏋️ Exercise 3:

Create a card component with gradient background, hover animations, and CSS variables for theming.

10. CSS Best Practices

Organization and Architecture

/* BEM Methodology */
.block { }
.block__element { }
.block--modifier { }

/* Example */
.card { }
.card__header { }
.card__body { }
.card__footer { }
.card--featured { }
.card--large { }
            

Performance Optimization

Minimize CSS file size
Use efficient selectors
Avoid deep nesting
Use CSS sprites for icons
Optimize images and use modern formats
Use CSS containment for performance

CSS Containment

.component {
    contain: layout style paint;
    /* Tells browser this component is isolated */
}
            

Modern CSS Features

/* Container queries */
@container (min-width: 400px) {
    .card {
        display: flex;
    }
}

/* Logical properties */
.element {
    margin-inline-start: 20px; /* instead of margin-left */
    padding-block: 10px; /* instead of padding-top and padding-bottom */
}

/* CSS nesting (future) */
.card {
    padding: 20px;
    
    &:hover {
        transform: scale(1.05);
    }
    
    .title {
        font-size: 1.5em;
    }
}
            

💡 Tip: Stay updated with CSS specifications and browser support. Use tools like Can I Use to check feature compatibility.

🏋️ Final Project:

Create a complete responsive website layout using modern CSS techniques:

CSS Grid for main layout
Flexbox for components
CSS variables for theming
Animations and transitions
Responsive design with media queries
Modern CSS features