CSS Essentials

Introduction

CSS (Cascading Style Sheets) controls the visual presentation of HTML. This article covers selectors, cascade, box model, Flexbox, Grid, responsive design, and CSS custom properties.

CSS Syntax

/* Selector { property: value; } */
h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Multiple selectors */
h1, h2, h3 {
    font-family: 'Helvetica', sans-serif;
}

/* Multiple properties */
.button {
    background-color: #007bff;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

Selectors

/* Element selector */
p { color: #333; }

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

/* ID selector */
#main { max-width: 1200px; }

/* Descendant selector */
article p { line-height: 1.6; }

/* Child selector */
ul > li { margin: 0.5rem 0; }

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

/* Attribute selector */
a[href^="https"] { color: green; }
input[type="email"] { border: 1px solid #ccc; }

/* Pseudo-class */
a:hover { text-decoration: underline; }
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #f5f5f5; }

/* Pseudo-element */
p::first-line { font-weight: bold; }
.quote::before { content: """; }

Specificity

Specificity determines which rule applies when multiple rules target the same element.

/* Specificity hierarchy (low to high): */
*                    /* 0,0,0,0 - Universal */
element              /* 0,0,0,1 - Element */
.class               /* 0,0,1,0 - Class */
#id                  /* 0,1,0,0 - ID */
inline style         /* 1,0,0,0 - Inline */
!important           /* Overrides all */

/* Example: */
p { color: blue; }           /* 0,0,0,1 */
.text { color: red; }        /* 0,0,1,0 - WINS */
#main p { color: green; }    /* 0,1,0,1 - WINS over .text */

Box Model

┌─────────────────────────────────────┐
│              margin                 │
│  ┌───────────────────────────────┐  │
│  │           border              │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │        padding          │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │      content      │  │  │  │
│  │  │  │   width × height  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

/* Box sizing */
* { box-sizing: border-box; } /* Includes padding+border in width */

/* Example */
.box {
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
    margin: 10px;
    /* Total width: 300px (with border-box) */
    /* Total width: 350px (with content-box) */
}

Flexbox

/* Container */
.container {
    display: flex;
    flex-direction: row; /* row | column */
    justify-content: center; /* flex-start | center | flex-end | space-between */
    align-items: center; /* flex-start | center | flex-end | stretch */
    gap: 1rem;
    flex-wrap: wrap;
}

/* Items */
.item {
    flex: 1; /* flex-grow | flex-shrink | flex-basis */
    align-self: flex-start; /* Override align-items */
    order: 1; /* Change visual order */
}

/* Example: Navigation */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-links {
    display: flex;
    gap: 1rem;
    list-style: none;
}

CSS Grid

/* Container */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto 200px auto;
    gap: 1rem;
}

/* Named areas */
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main sidebar"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }

/* Items */
.item {
    grid-column: 1 / 3; /* Span columns 1-3 */
    grid-row: 1 / 2;
}

Responsive Design

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
    }
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Fluid typography */
h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

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

CSS Custom Properties

/* Define variables in :root */
:root {
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --font-base: 16px;
    --line-height: 1.5;
}

/* Use variables */
.button {
    background-color: var(--color-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-base);
    line-height: var(--line-height);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #3b82f6;
        --background: #1a1a1a;
        --text: #ffffff;
    }
}

Units

Key Takeaways

• Use semantic selectors for maintainable CSS
• Understand specificity to debug conflicts
• Master Flexbox for 1D layouts
• Use CSS Grid for 2D layouts
• Design mobile-first with media queries
• Use CSS variables for theming

Next Steps

Now that you understand CSS, learn JavaScript to add interactivity:

→ JavaScript Basics