CSS Fundamentals

CSS (Cascading Style Sheets) is the language used to style HTML documents. It controls the visual presentation of web pages.

CSS Syntax

The basic syntax consists of a selector and a declaration block:

selector {
    property: value;
    /* More properties */
}

This paragraph is styled with CSS

Box Model

Every element is a rectangular box with content, padding, border, and margin:

.element {
    width: 200px;
    padding: 20px;
    border: 10px solid #4361ee;
    margin: 30px;
    background-color: #4cc9f0;
}
Box Model Demo

Common CSS Properties

Property Description Example Values
color Text color #ff0000, red, rgb(255,0,0)
background-color Element background color #ffffff, transparent
font-size Text size 16px, 1rem, large
margin Space outside the element 10px, 1em auto
padding Space inside the element 15px, 5% 10px
border Element border 1px solid #000

CSS Selectors

Selectors target HTML elements to apply styles:

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

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

/* ID selector */
#header {
    font-size: 2rem;
}

/* Attribute selector */
a[target="_blank"] {
    color: purple;
}

/* Pseudo-class selector */
button:hover {
    background-color: #ddd;
}

Advanced CSS Techniques

Modern CSS offers powerful features for creating sophisticated designs with less code.

CSS Variables

Custom properties (variables) allow you to store and reuse values throughout your stylesheet:

:root {
    --primary-color: #4361ee;
    --secondary-color: #f72585;
    --spacing: 1rem;
}

.element {
    color: var(--primary-color);
    margin: var(--spacing);
    border: 1px solid var(--secondary-color);
}

CSS Specificity

Specificity determines which CSS rule is applied when multiple rules could apply:

/* Specificity: 0,0,1 */
p {
    color: blue;
}

/* Specificity: 0,1,0 */
.highlight {
    color: yellow;
}

/* Specificity: 1,0,0 */
#special {
    color: red;
}

ID selectors > Class selectors > Element selectors. Inline styles have the highest specificity.

CSS Filters

Apply visual effects like blurring or color shifting:

.image {
    filter: grayscale(50%) blur(1px);
}

.button:hover {
    filter: brightness(120%);
}
Original Filtered

CSS Layout Systems

Modern CSS provides several powerful layout systems for creating complex page structures.

Flexbox

Flexbox provides an efficient way to lay out, align, and distribute space among items:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.item {
    flex: 1;
}
Item 1
Item 2
Item 3

CSS Grid

Grid layout offers a two-dimensional grid-based layout system:

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

.item {
    grid-column: span 1;
}
1
2
3
4
5
6

CSS Animations & Transitions

Bring your designs to life with smooth animations and interactive effects.

Transitions

Create smooth transitions between property changes:

.element {
    transition: all 0.3s ease;
}

.element:hover {
    transform: scale(1.1);
    background-color: #f72585;
}
Hover Me

Animations

Create complex animations with keyframes:

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.element {
    animation: pulse 2s infinite;
}
Pulsing

Transforms

Modify the shape and position of elements in 2D or 3D space:

.element {
    transform: rotate(15deg) scale(1.1);
}

.other-element {
    transform: skew(10deg) translateX(20px);
}
Transformed

CSS Features & Resources

Explore these powerful CSS features and learning resources.

Responsive Design

Media queries allow you to apply different styles for different devices:

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Custom Fonts

Use web fonts to enhance your typography:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

Shapes & Clip-Path

Create non-rectangular shapes with CSS:

.circle {
    clip-path: circle(50% at 50% 50%);
}

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