CSS Fundamentals - Interactive Guide

CSS Selectors

CSS selectors are patterns used to select and style HTML elements. Here are the most common types:

/* Element Selector */
p { color: blue; }

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

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

/* Descendant Selector */
div p { margin: 10px; }

/* Pseudo-class Selector */
a:hover { color: red; }

This is styled with an element selector

This is styled with a class selector

This is styled with an ID selector

CSS Properties

CSS properties control the appearance and behavior of HTML elements. Here are essential categories:

/* Typography */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #333;

/* Colors & Backgrounds */
background-color: #f0f0f0;
background: linear-gradient(to right, red, blue);

/* Spacing */
margin: 20px;
padding: 15px;

/* Borders */
border: 2px solid #ccc;
border-radius: 8px;

Color Palette Demo

Hover over the colors to see the scale effect!

The Box Model

Every HTML element is essentially a rectangular box. The CSS box model describes how the different parts of this box work:

/* Box Model Components */
.box {
    width: 200px;        /* Content width */
    height: 100px;       /* Content height */
    padding: 20px;       /* Space inside the border */
    border: 5px solid;   /* Border around the padding */
    margin: 20px;        /* Space outside the border */
}

This box demonstrates margin, border, padding, and content areas

CSS Layout

CSS offers several layout methods to arrange elements on the page:

Flexbox

/* Flexbox Container */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

Item 1

Item 2

Item 3

Centered

Items

CSS Grid

/* Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

1

2

3

4

5

6

Positioning

/* Position Types */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

Relative

Absolute

Animations & Transitions

CSS animations and transitions bring your designs to life:

/* Transitions */
.button {
    transition: all 0.3s ease;
}

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

/* Animations */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

.animated {
    animation: bounce 2s infinite;
}

This ball bounces continuously

Hover over me!

Responsive Design

Make your designs adapt to different screen sizes using media queries:

/* Media Queries */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
    }
}

This box changes color on mobile devices!

Try resizing your browser window to see the effect

Interactive Demo

Click the buttons below to see CSS in action: