CSS Fundamentals - Styling and Layout for Modern Web Design

Comprehensive guide to CSS (Cascading Style Sheets), the language that controls the visual presentation of web pages. Master selectors, layouts, responsive design, and modern CSS techniques to create beautiful, accessible interfaces.

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML. It defines how elements are displayed on screen, paper, or other media, controlling layout, colors, fonts, spacing, and responsive behavior.

Including CSS in HTML

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Internal Stylesheet

<head>
    <style>
        h1 { color: blue; }
        p { font-size: 16px; }
    </style>
</head>

Inline Styles

<h1 style="color: red; font-size: 24px;">Heading</h1>

CSS Selectors

Basic Selectors

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

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

/* ID selector */
#unique-element { font-size: 20px; }

/* Universal selector */
* { margin: 0; padding: 0; }

Combinators

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

/* Child selector */
ul > li { display: inline; }

/* Adjacent sibling selector */
h1 + p { font-weight: bold; }

/* General sibling selector */
h1 ~ p { color: gray; }

Attribute Selectors

/* Exact attribute value */
input[type="text"] { border: 1px solid #ccc; }

/* Attribute contains word */
[class*="btn"] { background: blue; }

/* Attribute starts with */
[href^="https"] { color: green; }

/* Attribute ends with */
[src$=".png"] { border: none; }

Pseudo-Classes and Pseudo-Elements

/* Pseudo-classes */
a:hover { color: red; }
input:focus { outline: 2px solid blue; }
li:nth-child(odd) { background: #f5f5f5; }

/* Pseudo-elements */
p::first-line { font-weight: bold; }
p::before { content: "→ "; color: gray; }
p::after { content: " ←"; color: gray; }

Box Model

Every HTML element is a rectangular box with properties that control its layout:

.box {
    /* Content dimensions */
    width: 300px;
    height: 200px;

    /* Padding (space inside border) */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 25px;

    /* Shorthand: top right bottom left */
    padding: 10px 20px 15px 25px;

    /* Border */
    border-width: 2px;
    border-style: solid;
    border-color: black;

    /* Border shorthand */
    border: 2px solid black;

    /* Margin (space outside border) */
    margin-top: 10px;
    margin-right: auto;  /* Center horizontally */
    margin-bottom: 20px;
    margin-left: auto;

    /* Margin shorthand */
    margin: 10px auto 20px auto;
}

Box-Sizing

/* Standard box model */
.standard {
    box-sizing: content-box;  /* default */
}

/* Modern box model */
.modern {
    box-sizing: border-box;  /* includes padding and border */
}

Layout Systems

Flexbox - One-Dimensional Layout

/* Container */
.flex-container {
    display: flex;
    flex-direction: row;  /* row | column | row-reverse | column-reverse */
    justify-content: center;  /* space-between | space-around | space-evenly | flex-start | flex-end | center */
    align-items: center;  /* flex-start | flex-end | center | baseline | stretch */
    flex-wrap: wrap;  /* nowrap | wrap | wrap-reverse */
    gap: 10px;  /* modern gap property */
}

/* Items */
.flex-item {
    flex-grow: 1;    /* How much to grow */
    flex-shrink: 1;  /* How much to shrink */
    flex-basis: auto; /* Default size before flex */

    /* Shorthand */
    flex: 1 1 auto;
}

CSS Grid - Two-Dimensional Layout

/* Grid container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    grid-template-rows: 100px auto;         /* 2 rows */
    gap: 10px;                             /* modern gap property */
    grid-template-areas:
        "header header header"
        "sidebar main main";
}

/* Alternative column definitions */
.columns-css {
    display: grid;
    grid-template-columns: 200px 1fr 150px;  /* fixed, flexible, fixed */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* responsive */
}

/* Grid items */
.grid-item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1 / span 2;  /* start at row 1, span 2 rows */

    /* Shorthand for positioning */
    grid-column: 1 / 3;
    grid-row: 1 / 3;

    /* Or use grid-area names */
    grid-area: main;
}

Responsive Design

Media Queries

/* Desktop first (default) */
.container {
    width: 1200px;
}

/* Tablet */
@media (max-width: 768px) {
    .container {
        width: 90%;
        max-width: 768px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .container {
        width: 95%;
        font-size: 14px;
    }
}

Mobile-First Approach

/* Base styles (mobile) */
.article {
    font-size: 16px;
    padding: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .article {
        font-size: 18px;
        padding: 20px;
    }
}

/* Desktop and up */
@media (min-width: 1200px) {
    .article {
        font-size: 20px;
        max-width: 800px;
        margin: 0 auto;
    }
}

Modern Responsive Units

.responsive-text {
    font-size: clamp(1rem, 2.5vw, 2rem);  /* Responsive font size */
    padding: max(1rem, 5vw);              /* Minimum value with responsive max */
    width: min(90%, 1200px);              /* Maximum value with responsive minimum */
}

Typography and Text Styling

Font Properties

.text-styling {
    /* Font family (with fallbacks) */
    font-family: 'Helvetica Neue', Arial, sans-serif;

    /* Font size */
    font-size: 16px;
    line-height: 1.5;  /* line-height for readability */

    /* Font weight */
    font-weight: normal;  /* normal | bold | 100-900 */

    /* Font style */
    font-style: normal;   /* normal | italic | oblique */

    /* More properties */
    letter-spacing: 0.5px;
    word-spacing: 2px;
    text-align: left;     /* left | center | right | justify */
    text-decoration: underline;  /* underline | overline | line-through | none */
    text-transform: uppercase;   /* uppercase | lowercase | capitalize */
}

Web Fonts

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Usage */
body {
    font-family: 'Inter', sans-serif;
}

Colors and Backgrounds

Color Formats

.color-examples {
    /* Named colors */
    color: red;

    /* Hexadecimal */
    color: #ff0000;
    color: #f00;  /* shorthand */

    /* RGB */
    color: rgb(255, 0, 0);

    /* RGBA (with transparency) */
    color: rgba(255, 0, 0, 0.7);

    /* HSL */
    color: hsl(0, 100%, 50%);

    /* HSLA */
    color: hsla(0, 100%, 50%, 0.7);

    /* Modern HWB */
    color: hwb(0 0% 0%);
}

Gradients

.gradient-examples {
    /* Linear gradient */
    background: linear-gradient(to right, red, blue);

    /* Multiple color stops */
    background: linear-gradient(45deg, red, orange, yellow, green);

    /* Radial gradient */
    background: radial-gradient(circle, red 0%, yellow 50%, blue 100%);

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

Animations and Transitions

CSS Transitions

.transition-example {
    background-color: white;
    transition: background-color 0.3s ease-in-out;

    /* Multiple properties */
    transition-property: background-color, transform;
    transition-duration: 0.3s, 0.5s;
    transition-timing-function: ease-in-out, linear;
    transition-delay: 0s, 0.1s;

    /* Shorthand */
    transition: all 0.3s ease-in-out;
}

.transition-example:hover {
    background-color: blue;
    transform: scale(1.1);
}

CSS Animations

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

    animation-example {
    animation: slideIn 0.5s ease-out;

    /* Detailed properties */
    animation-name: slideIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;  /* or 'infinite' */
    animation-direction: normal;   /* normal | reverse | alternate | alternate-reverse */
    animation-fill-mode: none;     /* none | forwards | backwards | both */
}

Modern CSS Features

CSS Custom Properties (Variables)

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --font-size-base: 16px;
    --spacing-unit: 1rem;
}

.element {
    color: var(--primary-color);
    font-size: var(--font-size-base);
    margin: var(--spacing-unit);
}

CSS-in-JS Alternative (Overview)

// Example with styled-components (concept)
const Button = styled.button`
    background: ${props => props.primary ? 'blue' : 'gray'};
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;

    &:hover {
        opacity: 0.8;
    }
`;

Debugging and Development Tools

Browser DevTools

CSS Debugging Techniques

/* Add visible outlines for debugging layout */
* {
    outline: 1px solid red;
}

/* Highlight specific elements */
.debug-class {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid red;
}

/* Test different viewport sizes */
@media (max-width: 768px) {
    body::before {
        content: "Mobile View";
        position: fixed;
        top: 0;
        left: 0;
        background: red;
        color: white;
        padding: 5px;
        z-index: 9999;
    }
}

Performance Considerations

CSS Optimization Tips

  1. Minify CSS for production
  2. Reduce CSS selector complexity (IDs are fastest, universal selectors slowest)
  3. Use CSS Grid and Flexbox instead of floats for layouts
  4. Avoid @import (blocks rendering)
  5. Use modern CSS features supported in target browsers
  6. Critical CSS for above-the-fold content

CSS Architecture Patterns

BEM (Block Element Modifier)

/* Block */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Element */
.card__title {
    font-size: 18px;
    font-weight: bold;
}

/* Modifier */
.card--featured {
    border-color: blue;
    background: lightblue;
}

.card__title--large {
    font-size: 24px;
}

CSS Modules (Modern Approach)

// React with CSS Modules
import styles from './Button.module.css';

// Usage
<button className={`${styles.button} ${styles.primary}`}>
    Click me
</button>

Learning Resources

Official Documentation

Interactive Learning

Advanced Topics

Tools and Frameworks

CSS transforms HTML elements into visually appealing, accessible, and responsive interfaces. Mastering these fundamentals creates a solid foundation for building modern, professional-looking websites that work across all devices and browsers.

This guide covers essential CSS3 features. For advanced topics like CSS-in-JS, CSS Grid Level 2, and Houdini API, explore specialized resources and stay updated with modern web standards.

Updated: January 15, 2025
Author: Danial Pahlavan
Category: Web Development