1 What is CSS?

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements. While HTML provides structure, CSS handles colors, fonts, spacing, layouts, and animations. The "cascading" means styles can be inherited and overridden.

CSS Controls Visual Appearance

HTML

Content

+

CSS

Style

=

Beautiful

Web Page

🔑 Three Ways to Add CSS

1. Inline: style="" attribute on element (avoid!)
2. Internal: <style> tag in HTML head
3. External: Separate .css file linked with <link> (recommended!)

2 CSS Syntax

CSS uses a simple rule-based syntax. A rule consists of a selector (what to style) and a declaration block (how to style it). Declarations are property-value pairs.

CSS Rule Structure

Selector

h1

{

Property

color

:

Value

blue

}

CSS - Basic Syntax

/* CSS Comment - ignored by browser */

/* Basic rule structure */
selector {
    property: value;
    another-property: another-value;
}

/* Example: Style all h1 elements */
h1 {
    color: navy;           /* Text color */
    font-size: 32px;       /* Font size */
    text-align: center;    /* Center text */
    margin-bottom: 20px;  /* Space below */
}

/* Style paragraphs */
p {
    color: #333333;        /* Dark gray (hex) */
    font-size: 16px;
    line-height: 1.6;      /* Space between lines */
}

▶ VISUAL RESULT

This is a Styled Heading

This paragraph has dark gray text, 16px font size, and comfortable line spacing for readability.

3 CSS Selectors

Selectors target which HTML elements to style. CSS provides many selector types from simple element names to complex combinations.

CSS - Selectors

/* ELEMENT SELECTOR - targets all elements of type */
p {
    color: black;
}

/* CLASS SELECTOR - targets elements with class="highlight" */
/* Classes are reusable - use for multiple elements */
.highlight {
    background-color: yellow;
    padding: 5px;
}

/* ID SELECTOR - targets element with id="header" */
/* IDs are unique - use for single element only */
#header {
    background: navy;
    color: white;
}

/* DESCENDANT SELECTOR - targets p inside .container */
.container p {
    font-size: 18px;
}

/* MULTIPLE SELECTORS - same style for h1, h2, h3 */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

/* PSEUDO-CLASS - style on hover */
button:hover {
    background: darkblue;
    cursor: pointer;
}

/* ATTRIBUTE SELECTOR - targets inputs with type="text" */
input[type="text"] {
    border: 2px solid gray;
}

Selector Priority (Specificity)

Specificity: Which Style Wins?

Element

p { } = 1

<

Class

.box { } = 10

<

ID

#nav { } = 100

<

Inline

style="" = 1000

4 Colors

CSS offers multiple ways to define colors: named colors, hex codes, RGB, RGBA, HSL, and HSLA. Each format has its use case.

CSS - Color Formats

/* Named Colors */
.named {
    color: red;
    background: lightblue;
    border-color: darkgreen;
}

/* Hexadecimal (#RRGGBB or #RGB) */
.hex {
    color: #ff0000;       /* Red */
    background: #f00;    /* Shorthand red */
    border-color: #264de4; /* Custom blue */
}

/* RGB (Red, Green, Blue: 0-255) */
.rgb {
    color: rgb(255, 0, 0);       /* Red */
    background: rgb(38, 77, 228); /* Custom blue */
}

/* RGBA (RGB + Alpha transparency: 0-1) */
.rgba {
    background: rgba(0, 0, 0, 0.5);   /* 50% transparent black */
    color: rgba(255, 255, 255, 0.9); /* 90% opaque white */
}

/* HSL (Hue: 0-360, Saturation: %, Lightness: %) */
.hsl {
    color: hsl(0, 100%, 50%);    /* Pure red */
    background: hsl(220, 80%, 52%); /* Blue */
}

/* HSLA (HSL + Alpha) */
.hsla {
    background: hsla(220, 80%, 52%, 0.5); /* 50% transparent blue */
}

▶ COLOR EXAMPLES

#ff0000

#264de4

50% α

HSL

5 Fonts

Typography is crucial for readability. CSS lets you control font family, size, weight, and load custom fonts from services like Google Fonts.

CSS - Font Properties

/* Font Family - always include fallbacks */
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* Font Size - various units */
.text {
    font-size: 16px;    /* Pixels - fixed size */
    font-size: 1rem;    /* Relative to root (usually 16px) */
    font-size: 1.5em;   /* Relative to parent */
    font-size: 120%;    /* Percentage of parent */
}

/* Font Weight */
.weight {
    font-weight: normal;   /* 400 */
    font-weight: bold;     /* 700 */
    font-weight: 300;      /* Light */
    font-weight: 600;      /* Semi-bold */
}

/* Font Style */
.style {
    font-style: normal;
    font-style: italic;
}

/* Google Fonts - add to HTML head */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> */

/* Shorthand font property */
.shorthand {
    font: italic 600 18px/1.6 'Inter', sans-serif;
    /* style weight size/line-height family */
}

6 Text Styling

Beyond fonts, CSS provides many properties to style text appearance - alignment, spacing, decoration, and more.

CSS - Text Properties

/* Text Alignment */
.align {
    text-align: left;     /* Default */
    text-align: center;
    text-align: right;
    text-align: justify;  /* Spreads to fill width */
}

/* Text Decoration */
.decoration {
    text-decoration: none;         /* Remove underline */
    text-decoration: underline;
    text-decoration: line-through;
    text-decoration: overline;
}

/* Text Transform */
.transform {
    text-transform: uppercase;   /* ALL CAPS */
    text-transform: lowercase;   /* all lower */
    text-transform: capitalize;  /* First Letter */
}

/* Spacing */
.spacing {
    letter-spacing: 2px;    /* Between letters */
    word-spacing: 5px;      /* Between words */
    line-height: 1.6;       /* Line spacing (no unit = multiplier) */
}

/* Text Shadow */
.shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* offset-x offset-y blur color */
}

/* Text Overflow */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* Shows ... */
}

▶ TEXT EFFECTS

Centered Text

uppercase text

S P A C E D T E X T

Text with Shadow

7 The Box Model

Every HTML element is a rectangular box. The CSS Box Model describes the space an element takes up: content + padding + border + margin. Understanding this is crucial for layouts.

CSS Box Model (Inside → Outside)

MARGIN

BORDER

PADDING

CONTENT

CSS - Box Model Properties

.box {
    /* Content size */
    width: 300px;
    height: 200px;
    
    /* Padding - space INSIDE the border */
    padding: 20px;              /* All sides */
    padding-top: 10px;          /* Individual side */
    padding: 10px 20px;         /* Top/bottom, Left/right */
    padding: 10px 20px 15px 25px; /* Top, Right, Bottom, Left */
    
    /* Border */
    border: 2px solid #333;    /* Width, style, color */
    border-radius: 10px;       /* Rounded corners */
    
    /* Margin - space OUTSIDE the border */
    margin: 20px;              /* All sides */
    margin: 0 auto;            /* Center horizontally */
    
    /* Box-sizing: include padding/border in width */
    box-sizing: border-box;    /* VERY IMPORTANT! */
}

/* Always use border-box globally */
*, *::before, *::after {
    box-sizing: border-box;
}

▶ VISUAL RESULT

This is a styled box

Content with padding, border, and margin applied.

💡 Pro Tip: Always Use border-box

By default, width/height only apply to content. With box-sizing: border-box, padding and border are included in the specified width. Add this to every project!

5 Flexbox Layout

Flexbox is a powerful layout system for arranging items in rows or columns. It handles alignment, spacing, and distribution automatically. Perfect for navigation bars, card layouts, and centering content.

Flexbox Axes

Main Axis →

1

2

3

Cross Axis ↓

CSS - Flexbox

/* Container becomes a flex container */
.container {
    display: flex;             /* Enable flexbox */
    
    /* Direction: row (default) or column */
    flex-direction: row;        /* Horizontal */
    /* flex-direction: column;   /* Vertical */
    
    /* Main axis alignment */
    justify-content: center;    /* Center items */
    /* justify-content: space-between; /* Equal space between */
    /* justify-content: space-around;  /* Equal space around */
    
    /* Cross axis alignment */
    align-items: center;        /* Center vertically */
    
    /* Spacing between items */
    gap: 20px;                  /* Modern way to add gaps */
    
    /* Wrap items to next line */
    flex-wrap: wrap;
}

/* Flex items can have individual properties */
.item {
    flex: 1;                   /* Grow to fill space equally */
    /* flex: 0 0 200px;          /* Don't grow, fixed 200px */
}

/* Perfect centering with flexbox! */
.center-everything {
    display: flex;
    justify-content: center;   /* Horizontal center */
    align-items: center;       /* Vertical center */
    min-height: 100vh;         /* Full viewport height */
}

▶ FLEXBOX EXAMPLES

justify-content: space-between

1

2

3

justify-content: center + gap: 20px

A

B

C

6 Responsive Design

Responsive design makes websites look good on all devices - phones, tablets, and desktops. Media queries let you apply different styles based on screen size.

Common Breakpoints

Mobile

< 768px

Tablet

768-1024px

Desktop

> 1024px

CSS - Media Queries

/* Mobile-first approach: Start with mobile styles */
.container {
    width: 100%;
    padding: 15px;
}

.card {
    width: 100%;               /* Full width on mobile */
    margin-bottom: 20px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
    
    .card {
        width: 48%;            /* Two columns */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
    
    .card {
        width: 31%;            /* Three columns */
    }
}

/* Hide on mobile, show on desktop */
.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

7 CSS Animations

CSS can create smooth animations without JavaScript. Use transitions for simple state changes and keyframe animations for complex sequences.

CSS - Animations

/* TRANSITIONS - smooth change between states */
.button {
    background: #264de4;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    
    /* Transition: property, duration, timing */
    transition: all 0.3s ease;
}

.button:hover {
    background: #1565c0;
    transform: translateY(-3px);  /* Move up */
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* KEYFRAME ANIMATION - define steps */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulsing-element {
    /* Apply the animation */
    animation: pulse 2s ease-in-out infinite;
    /* name, duration, timing, iteration */
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

▶ ANIMATION DEMO (Hover the button!)

8 CSS Grid

CSS Grid is a two-dimensional layout system. While Flexbox handles one axis (row OR column), Grid handles both simultaneously - perfect for complex page layouts.

Grid vs Flexbox

Flexbox

1D (row or column)

vs

Grid

2D (rows AND columns)

CSS - Grid Layout

/* Basic Grid Container */
.grid-container {
    display: grid;
    
    /* Define columns: 3 equal columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Or shorthand: */
    grid-template-columns: repeat(3, 1fr);
    
    /* Define rows */
    grid-template-rows: 100px 200px auto;
    
    /* Gap between cells */
    gap: 20px;
    /* Or separate: row-gap, column-gap */
}

/* Mixed column sizes */
.sidebar-layout {
    display: grid;
    grid-template-columns: 250px 1fr; /* Fixed sidebar, fluid content */
}

/* Grid item positioning */
.header {
    /* Span across columns 1 to 4 (3 columns) */
    grid-column: 1 / 4;
    /* Or shorthand: span 3 columns */
    grid-column: span 3;
}

.sidebar {
    /* Span rows 2 to 4 */
    grid-row: 2 / 4;
}

/* Named grid areas (powerful!) */
.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    min-height: 100vh;
}

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

/* Auto-fit responsive grid */
.card-grid {
    display: grid;
    /* Automatically fit as many 250px cards as possible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

▶ GRID LAYOUT DEMO

Header (span 3)

Sidebar

Main Content

Footer (span 3)

💡 When to Use Grid vs Flexbox

Grid: Page layouts, card grids, anything 2D
Flexbox: Navigation bars, centering, single row/column items
Both: Grid for overall layout, Flexbox for components inside

9 CSS Variables (Custom Properties)

CSS Variables let you store values and reuse them throughout your stylesheet. Change one variable, update everywhere. Great for theming and maintainability.

CSS - Variables

/* Define variables in :root (global scope) */
:root {
    /* Color palette */
    --primary-color: #264de4;
    --secondary-color: #d4af37;
    --text-color: #333333;
    --bg-color: #ffffff;
    
    /* Spacing scale */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    
    /* Typography */
    --font-main: 'Inter', sans-serif;
    --font-size-base: 16px;
    
    /* Effects */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --radius: 8px;
}

/* Use variables with var() */
.button {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: var(--font-main);
}

.card {
    background: var(--bg-color);
    color: var(--text-color);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Dark theme - just override variables! */
[data-theme="dark"] {
    --primary-color: #6c8dfa;
    --text-color: #e0e0e0;
    --bg-color: #1a1a2e;
}

/* Fallback value */
.element {
    /* If --accent not defined, use #ff5722 */
    color: var(--accent, #ff5722);
}

/* Override in specific scope */
.special-section {
    --primary-color: #9c27b0;  /* Only affects this section */
}

.special-section .button {
    /* Will use purple, not blue */
    background-color: var(--primary-color);
}

▶ THEME SWITCHING DEMO

Light Theme

--bg-color: #fff

Dark Theme

--bg-color: #1a1a2e

10 CSS Transforms

Transforms let you modify elements visually - rotate, scale, skew, or move them without affecting page layout. Combined with transitions, they create smooth effects.

CSS - Transforms

/* TRANSLATE - Move element */
.move-right {
    transform: translateX(50px);   /* Move right 50px */
}
.move-up {
    transform: translateY(-20px);  /* Move up 20px */
}
.move-both {
    transform: translate(50px, -20px); /* X and Y */
}

/* ROTATE - Spin element */
.rotate-45 {
    transform: rotate(45deg);
}
.rotate-full {
    transform: rotate(360deg);
}

/* SCALE - Resize element */
.grow {
    transform: scale(1.2);  /* 120% size */
}
.shrink {
    transform: scale(0.8);  /* 80% size */
}
.stretch {
    transform: scaleX(1.5); /* Stretch horizontally */
}

/* SKEW - Tilt element */
.skew {
    transform: skewX(15deg);
}

/* COMBINE multiple transforms */
.card:hover {
    transform: translateY(-10px) scale(1.02) rotate(1deg);
    transition: transform 0.3s ease;
}

/* Transform origin - pivot point */
.rotate-corner {
    transform-origin: top left;  /* Default is center */
    transform: rotate(45deg);
}

/* 3D Transforms */
.flip-card {
    perspective: 1000px;  /* Enable 3D space */
}
.flip-card:hover .card-inner {
    transform: rotateY(180deg);
}
.card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

▶ TRANSFORM DEMOS (Hover each box!)

Translate

Rotate

Scale

Skew

Combo

Georgin Advisory

CSS Styling CSS3