CSS (Cascading Style Sheets) is used to style and layout web pages. It separates content (HTML) from presentation (CSS), making websites maintainable and flexible.

Three Ways to Add CSS:

/* 1. Inline CSS */
<h1 style="color: blue;">Heading</h1>

/* 2. Internal CSS */
<style>
    h1 { color: blue; }
</style>

/* 3. External CSS (Recommended) */
<link rel="stylesheet" href="style.css">

CSS Syntax:

selector {
    property1: value1;
    property2: value2;
}

/* Example */
p {
    color: blue;
    font-size: 16px;
}

Selectors & Properties

Common Selectors:

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

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

/* ID selector */
#header { padding: 20px; }

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

/* Pseudo-class */
a:hover { color: red; }
button:focus { outline: 2px solid blue; }

/* Combinators */
div > p { margin: 10px; }           /* Direct child */
div p { margin: 10px; }             /* Descendant */
h1 + p { margin-top: 0; }          /* Adjacent sibling */
h1 ~ p { color: gray; }            /* General sibling */

Common Properties:

/* Text properties */
color: red;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 1.6;

/* Background */
background-color: blue;
background-image: url('image.jpg');

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

/* Sizing */
width: 100%;
height: 50px;
max-width: 1200px;

Box Model

Every element in CSS is a box containing: content → padding → border → margin

/* Box sizing */
* {
    box-sizing: border-box; /* Include padding and border in width */
}

/* Complete box model */
div {
    /* Content */
    width: 200px;
    height: 100px;
    
    /* Padding - inside the border */
    padding: 10px;        /* All sides */
    padding: 10px 20px;   /* Top/bottom, left/right */
    padding: 10px 20px 15px 5px; /* Top, right, bottom, left */
    
    /* Border */
    border: 2px solid black;
    border-radius: 8px;
    
    /* Margin - outside the border */
    margin: 20px;
}

/* Display property */
display: block;      /* Full width, new line */
display: inline;     /* Only takes needed width */
display: inline-block; /* Inline but accepts width/height */
display: none;       /* Hidden */

Layout - Flexbox

Flexbox is a powerful 1D layout tool for arranging items horizontally or vertically.

.container {
    display: flex;
    
    /* Direction */
    flex-direction: row;      /* left to right */
    flex-direction: column;   /* top to bottom */
    
    /* Alignment along main axis */
    justify-content: flex-start;   /* Default */
    justify-content: center;       /* Center */
    justify-content: space-between; /* Space between */
    justify-content: space-around;  /* Space around */
    
    /* Alignment along cross axis */
    align-items: flex-start;
    align-items: center;
    align-items: stretch;     /* Default */
    
    /* Wrapping */
    flex-wrap: wrap;          /* Items wrap to next line */
    flex-wrap: nowrap;        /* Default, no wrap */
    
    gap: 10px;                /* Space between items */
}

.item {
    /* Growth and shrinkage */
    flex: 1;              /* Equal space */
    flex-grow: 1;         /* Grow to fill space */
    flex-shrink: 1;       /* Shrink if needed */
    
    /* Fixed size */
    flex-basis: 100px;    /* Initial size */
}

Layout - CSS Grid

CSS Grid is a 2D layout system perfect for complex layouts with rows and columns.

.grid-container {
    display: grid;
    
    /* Define columns and rows */
    grid-template-columns: 1fr 2fr 1fr;  /* 3 columns */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive */
    
    grid-template-rows: 100px 200px 100px;
    
    /* Gap between items */
    gap: 10px;
    
    /* Alignment */
    justify-items: center;   /* Horizontal alignment */
    align-items: center;     /* Vertical alignment */
}

.grid-item {
    /* Span multiple columns/rows */
    grid-column: 1 / 3;      /* Span from col 1 to 3 */
    grid-row: 1 / 2;         /* Span from row 1 to 2 */
    
    /* Or */
    grid-column: span 2;     /* Span 2 columns */
}

Positioning

/* Position types */
position: static;      /* Default, normal flow */
position: relative;    /* Relative to normal position */
position: absolute;    /* Relative to positioned parent */
position: fixed;       /* Relative to viewport */
position: sticky;      /* Relative until scrolled past */

/* Example: Fixed navbar */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;     /* Stack order */
}

/* Example: Absolute positioning */
.notification {
    position: absolute;
    top: 20px;
    right: 20px;
}

Responsive Design

/* Mobile first approach */
body {
    font-size: 14px;
    padding: 10px;
}

.container {
    display: grid;
    grid-template-columns: 1fr;  /* 1 column on mobile */
}

/* Tablet */
@media (min-width: 768px) {
    body {
        font-size: 16px;
        padding: 20px;
    }
    
    .container {
        grid-template-columns: repeat(2, 1fr);  /* 2 columns */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
        padding: 40px;
    }
    
    .container {
        grid-template-columns: repeat(3, 1fr);  /* 3 columns */
    }
}

/* Using relative units */
width: 100%;           /* Percentage */
font-size: 1.5rem;     /* em/rem - relative to parent/root */
padding: clamp(1rem, 5vw, 2rem); /* Flexible sizing */

Transitions & Animations

Transitions (Smooth Changes):

.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

/* Advanced transitions */
.box {
    width: 100px;
    transition: width 0.5s ease-in-out,
                height 0.5s ease-in-out,
                transform 0.3s ease;
}

Animations (Complex Motion):

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

.element {
    animation: slide 1s ease-in-out infinite;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

Colors & Gradients

/* Color formats */
color: red;                      /* Named */
color: #FF0000;                  /* Hex */
color: rgb(255, 0, 0);          /* RGB */
color: rgba(255, 0, 0, 0.5);    /* RGBA with opacity */
color: hsl(0, 100%, 50%);       /* HSL */

/* Linear gradient */
background: linear-gradient(to right, blue, red);
background: linear-gradient(45deg, blue, red, yellow);

/* Radial gradient */
background: radial-gradient(circle, blue, red);
background: radial-gradient(ellipse at center, blue, red);

/* Conic gradient */
background: conic-gradient(red, yellow, lime, aqua, blue);

/* Multiple backgrounds */
background: 
    linear-gradient(to right, blue, red),
    url('background.jpg');
background-size: cover;

Projects & Practice

Beginner Projects:

Personal Portfolio Page
Responsive Navigation Bar
Card Layout
Photo Gallery
Simple Blog Homepage

Intermediate Projects:

Full Page Design
Multi-section Landing Page
Animated Components
Responsive Dashboard
E-commerce Product Page

Advanced Projects:

Complex Responsive Website
CSS Art & Illustrations
Animated Web Application
Design System Component Library
Interactive Data Visualization