Back to CSS for JavaScript Developers: Make It Pretty (and Fast)

Colors, Fonts & Layout Basics

Your site’s working. You’ve got structure. You’ve got basic styles. But right now, it looks like it was built by a robot who only knew about Times New Roman and thought gray was a vibe. In this lesson, we’ll make your site look like an actual, intentional thing. Color, typography, and the oh-so-critical box model—this is where web design starts to feel real. And trust me, once you understand how this stuff works, you’ll start seeing it (and critiquing it) everywhere.

Picking Colors That Don’t Hurt the Eyes

Choosing colors sounds easy. Until you’re staring at a palette and can’t tell if you just created something “modern and sleek” or “hospital waiting room beige.”

Here’s what actually matters when working with CSS colors:

  • Use system-friendly formats: HEX (#1a1a1a), RGB (rgb(255, 0, 0)), and HSL (hsl(0, 100%, 50%)) are all valid. HSL is especially nice when you want to adjust saturation and lightness with precision.
  • Contrast is everything: Your light text on a light background might look “minimalist,” but it’s also unreadable. Use a tool like WebAIM Contrast Checker to stay accessible.
  • Stick to a palette: Start with 2–3 main colors. Then build around them with tints and shades. Don’t go full rainbow unless you’re designing a kid’s party site.

In your main.css, add a few base colors:

css
1
2
3
4
5
6
7
8
9
10
11
          :root {
  --color-primary: #2a9d8f;
  --color-accent: #e76f51;
  --color-bg: #fdfdfd;
  --color-text: #222;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

These CSS variables (custom properties) will make your life easier as the project grows. Change one and everything updates. Like magic.

Fonts, Not Just Comic Sans: How to Style Your Text

Let’s be honest: default browser fonts are sad. They whisper, “I didn’t try.” But going overboard with fancy fonts can hurt performance and readability.

Here’s the middle ground:

  • Stick to system fonts or include one web font.
  • Use font stacks as fallbacks ('Roboto', sans-serif).
  • Set font sizes and line heights with intention.

A solid setup:

css
1
2
3
4
5
          body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

If you want to go custom, something like Google Fonts can give your site personality without wrecking performance. Add this in your <head>:

html
1
          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Then update your CSS:

css
1
2
3
          body {
  font-family: 'Inter', system-ui, sans-serif;
}

Pro tip from experience: I once shipped a site using four different fonts. It looked like a ransom note. Pick one, maybe two. Use weight and size for variety, not font chaos.

The Box Model: The Secret to Every Layout Ever

The box model is the secret engine of every layout. If you don’t get it, CSS positioning will feel like trying to fix a sink with spaghetti.

Here’s how it works:

Every element is a box. That box has:

  • Content (the stuff inside)
  • Padding (space inside the box around the content)
  • Border (the line around the padding)
  • Margin (space outside the box from other elements)

Visually:

javascript
1
2
3
4
          [ margin ]
  [ border ]
    [ padding ]
      [ content ]

Here’s how you might use it in CSS:

css
1
2
3
4
5
          .card {
  padding: 1rem;
  margin: 2rem 0;
  border: 1px solid #ccc;
}

Oh, and always set:

css
1
2
3
          * {
  box-sizing: border-box;
}

This tells the browser to include padding and border in an element’s total width/height, which makes sizing predictable and your life infinitely better.

Course Project: Style the Project with Some Personality

Let’s add color, typography, and spacing to the project.

1. Update `main.css` with base styles

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
          :root {
  --color-primary: #2a9d8f;
  --color-accent: #e76f51;
  --color-bg: #fdfdfd;
  --color-text: #222;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  font-size: 1rem;
  padding: 2rem;
}

h1, h2, h3 {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 8px;
}

2. Link Google Fonts (optional)

In each HTML file:

html
1
          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

You now have a site that looks like it was styled by someone who knows what they’re doing. Even if it’s just day two of CSS.

What’s Next?

So far, we’ve styled in a straight line. But real layouts? They flex. Up next, we unlock the true superpower of modern CSS: Flexbox: The Layout Superpower You Didn’t Know You Needed. Say goodbye to float hell forever.