Styling with CSS

Time to make HTML beautiful! CSS controls the visual appearance of pages.

What is CSS?

CSS = Cascading Style Sheets

CSS defines:

Colors
Fonts and sizes
Spacing
Layout and positioning
Animations

How to Add CSS

1. Inline (directly on tag)

html

<p style="color: blue; font-size: 18px;">Blue text</p>

❌ Not recommended for large projects

2. Internal (in head)

html

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

3. External (separate file) ✅ Recommended

html

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

css

/* style.css */p {    color: blue;    font-size: 18px;}

CSS Syntax

css

selector {    property: value;    property: value;}

Example:

css

h1 {    color: red;    font-size: 32px;    text-align: center;}

Selectors

By tag

css

p { color: blue; }h1 { color: red; }

By class (most used)

html

<p class="highlight">Important text</p>

css

.highlight {    background-color: yellow;}

By ID (unique)

html

<div id="header">...</div>

css

#header {    background: black;}

Multiple elements

css

h1, h2, h3 {    font-family: Arial;}

Essential Properties

Colors

css

.element {    color: blue;                    /* Text */    background-color: #f0f0f0;      /* Background */    border-color: rgb(255, 0, 0);   /* Border */}

Color formats:

Names: red, blue, white
Hex: #FF5733, #333
RGB: rgb(255, 87, 51)
RGBA: rgba(255, 87, 51, 0.5) (with transparency)

Text

css

.text {    font-family: Arial, sans-serif;    font-size: 16px;    font-weight: bold;          /* normal, bold, 100-900 */    text-align: center;         /* left, right, center, justify */    line-height: 1.5;           /* Line spacing */    text-decoration: underline; /* underline, none */}

Box Model

Every element is a box:

┌─────────────────────────────┐
│          MARGIN             │
│   ┌─────────────────────┐   │
│   │      BORDER         │   │
│   │   ┌─────────────┐   │   │
│   │   │   PADDING   │   │   │
│   │   │  ┌───────┐  │   │   │
│   │   │  │CONTENT│  │   │   │
│   │   │  └───────┘  │   │   │
│   │   └─────────────┘   │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

css

.box {    width: 200px;    height: 100px;    padding: 20px;          /* Internal space */    margin: 10px;           /* External space */    border: 1px solid black;} /* Shortcut: top right bottom left */padding: 10px 20px 10px 20px; /* Or: top/bottom left/right */padding: 10px 20px;

Display

css

.element {    display: block;       /* Occupies entire width */    display: inline;      /* Follows content flow */    display: inline-block;/* Inline but accepts width/height */    display: none;        /* Hidden */}

Flexbox - Modern Layout

Flexbox is the easiest way to organize elements:

css

.container {    display: flex;    justify-content: center;    /* Horizontal */    align-items: center;        /* Vertical */    gap: 20px;                  /* Space between */}

Justify-content options:

flex-start - Start
flex-end - End
center - Center
space-between - Even space
space-around - Space around

Practical example:

html

<nav class="menu">    <a href="/">Home</a>    <a href="/about">About</a>    <a href="/contact">Contact</a></nav>

css

.menu {    display: flex;    justify-content: space-between;    padding: 20px;    background: #333;} .menu a {    color: white;    text-decoration: none;}

Practical Exercise

Create style.css for the about page:

css

* {    margin: 0;    padding: 0;    box-sizing: border-box;} body {    font-family: Arial, sans-serif;    line-height: 1.6;    padding: 20px;    max-width: 800px;    margin: 0 auto;} h1 {    color: #333;    border-bottom: 2px solid #007bff;    padding-bottom: 10px;    margin-bottom: 20px;} h2 {    color: #555;    margin-top: 30px;    margin-bottom: 15px;} ul {    padding-left: 20px;} li {    margin-bottom: 8px;} a {    color: #007bff;} a:hover {    text-decoration: underline;}

Summary

✅ CSS controls the visual appearance
✅ Use external files (.css)
✅ Selectors: tag, .class, #id
✅ Box model: margin, border, padding, content
✅ Flexbox for easy layouts

In the next lesson, we'll start with JavaScript! 🚀