A Crash Course in CSS Layouts & Styling

From “I know HTML” to “I can design clean, modern websites”

Prahlad Yeri · June 15, 2026 · 8 min read

Note: This article was written with AI assistance.

Table of Contents

1. What Makes a Website Look Good?
2. Design Principles Every Developer Should Know
3. The CSS Box Model
4. Margin vs Padding
5. Widths and Heights
6. Typography
7. Positioning
8. Floats (Legacy Layout)
9. Flexbox (Modern Layout)
10. Blog Layout Using Flexbox
11. CSS Grid
12. Responsive Design
13. Mobile-First Design
14. Color Theory for Developers
15. Popular Combinations
16. Tailwind CSS
17. Case Study: Elegant Jekyll Theme
18. A Simple Design Checklist
19. Modern CSS Layout Recipe (2026)

1. What Makes a Website Look Good?

Most beginners think beautiful websites come from:

• Fancy animations
• Complex JavaScript
• Thousands of lines of CSS

In reality, good design usually comes from:

1. Consistent spacing
2. Good typography
3. Visual hierarchy
4. Proper alignment
5. Simplicity
6. Mobile responsiveness

Consider these two examples:

Bad

<h1>My Blog</h1>
<p>Hello World</p>
<button>Read More</button>

Everything touches each other.

Better

<div class="hero">
    <h1>My Blog</h1>
    <p>Thoughts on technology and open source.</p>
    <button>Read More</button>
</div>

.hero {
    padding: 60px;
}

.hero h1 {
    margin-bottom: 16px;
}

.hero p {
    margin-bottom: 24px;
}

The content is identical.

Only spacing changed.

Yet it feels professional.

Design Principles Every Developer Should Know

1. Alignment

Things should line up.

Bad:

Title
     Paragraph
 Button

Good:

Title
Paragraph
Button

2. White Space

Do not fear empty space. Apple, Stripe, Linear, and Notion use huge amounts of whitespace.

Bad:

padding: 5px;

Better:

padding: 40px;

3. Contrast

Make important things stand out.

h1 {
    font-size: 3rem;
}

p {
    color: #666;
}

4. Consistency

Pick a spacing system:

4px
8px
16px
32px
64px

Use those everywhere.

2. The CSS Box Model

Everything in CSS is a box.

+-------------------+
|      Margin       |
| +---------------+ |
| |     Border    | |
| | +-----------+ | |
| | | Padding   | | |
| | | Content   | | |
| | +-----------+ | |
| +---------------+ |
+-------------------+

Example:

.card {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ddd;
}

Margin vs Padding

Margin

Outside spacing.

margin-bottom: 20px;

Creates distance between elements.

Padding

Inside spacing.

padding: 20px;

Creates distance between content and border.

3. Widths and Heights

Avoid fixed widths whenever possible.

Bad:

width: 1200px;

Good:

max-width: 1200px;
width: 100%;

Typical page container:

.container {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
}

The magic:

margin: auto;

Centers the container.

4. Typography

Typography alone can make a website feel premium.

Font Stack

body {
    font-family:
        system-ui,
        sans-serif;
}

Uses the user’s native font.

Comfortable Reading

body {
    line-height: 1.7;
}

Avoid line-height: 1;. It looks cramped.

Blog Content Width

article {
    max-width: 700px;
}

Long lines are difficult to read.

5. Positioning

Static (Default)

position: static;

Normal flow.

Relative

position: relative;
left: 10px;

Moves relative to original position.

Absolute

position: absolute;
top: 0;
right: 0;

Placed relative to nearest positioned parent.

Fixed

position: fixed;
top: 0;

Stays visible while scrolling. Useful for navbars.

Sticky

position: sticky;
top: 0;

Acts normal until scrolling reaches it. Then sticks. Great for sidebars.

6. Floats (Legacy Layout)

Before Flexbox and Grid, layouts used floats.

Example:

<div class="sidebar">
Sidebar
</div>

<div class="content">
Content
</div>

.sidebar {
    float: left;
    width: 25%;
}

.content {
    float: left;
    width: 75%;
}

Problems:

• Difficult to maintain
• Clearing issues
• Responsive headaches

Today floats are mainly used for wrapping text around an asset:

<img src="photo.jpg">

img {
    float: left;
    margin-right: 20px;
}

Text wraps around image.

7. Flexbox (Modern Layout)

Flexbox changed everything. Think: Row, Column, Centering, Navigation bars, Cards, Toolbars.

Horizontal Layout

<div class="row">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

.row {
    display: flex;
}

Space Between

.row {
    display: flex;
    justify-content: space-between;
}

Result:

A           B           C

Centering

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
}

Perfect centering.

Gap

Instead of margins:

.row {
    display: flex;
    gap: 20px;
}

Cleaner.

Vertical Layout

.column {
    display: flex;
    flex-direction: column;
}

Blog Layout Using Flexbox

<div class="layout">
    <aside>Sidebar</aside>
    <main>Content</main>
</div>

.layout {
    display: flex;
    gap: 30px;
}

aside {
    width: 250px;
}

main {
    flex: 1;
}

8. CSS Grid

For 2D layouts.

Example:

.grid {
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr;
    gap: 20px;
}

Produces:

A B C
D E F

Responsive Cards

.grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px,1fr));

    gap: 20px;
}

Automatically adjusts.

9. Responsive Design

The web is mobile-first now.

Viewport Tag

<meta
    name="viewport"
    content="width=device-width, initial-scale=1">

Always include it.

Responsive Images

img {
    max-width: 100%;
}

Media Queries

@media (max-width: 768px) {

    .layout {
        flex-direction: column;
    }

}

Desktop:

Sidebar | Content

Mobile:

Sidebar
Content

Mobile-First Design

Start small.

.card {
    width: 100%;
}

Then enhance:

@media (min-width: 768px) {

    .card {
        width: 50%;
    }

}

10. Color Theory for Developers

You don’t need to be an artist. Use:

One Primary Color

--primary: #2563eb;

Neutral Grays

--text: #222;
--muted: #666;
--border: #ddd;

Background

--bg: #fafafa;

Popular Combinations

GitHub

#24292e
#ffffff
#0969da

Notion

#ffffff
#37352f
#eb5757

Dark Theme

#111827
#1f2937
#f9fafb

11. Tailwind CSS

Tailwind is a utility-first CSS framework. Instead of writing:

.card {
    padding: 20px;
    border-radius: 10px;
    background: white;
}

You write directly in your markup:

<div class="p-5 rounded-lg bg-white">

Traditional CSS

<button class="btn">
Click
</button>

.btn {
    background: blue;
    color: white;
    padding: 10px 20px;
}

Tailwind

<button class="bg-blue-600 text-white px-4 py-2 rounded">
Click
</button>

Why Developers Love Tailwind

• Faster: No switching between HTML and separate stylesheet files.
• Consistent: The core spacing, sizing, and color scales are predefined out of the box.
• Responsive: Built-in modifiers make swapping layouts direct: ```html