InnoMarts logo
InnoMarts
Fast websites
← Back to course

Colors, Fonts, and Text Styling

Colors, Fonts, and Text Styling

Welcome back.

In the previous lesson, you learned CSS selectors.

Now you can tell CSS exactly what to style.

Very powerful.

Very dangerous.

Like giving a paintbrush to someone who just discovered gradients.

In this lesson, we will focus on text.

Because most websites are full of text.

Headings.

Paragraphs.

Links.

Buttons.

Messages.

Warnings.

Tiny footer text nobody reads but everybody legally needs.

If text is hard to read, the whole website feels broken.

Even if the layout is technically correct.

Readable text is not decoration.

Readable text is survival.

What You’ll Learn

In this lesson, you’ll learn:

Why Text Styling Matters

HTML gives text meaning.

CSS gives text presentation.

HTML says:

<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>

CSS says:

h1 {
  color: #111827;
  font-size: 48px;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

Now the browser knows not only what the content is, but also how it should look.

Good text styling helps users read comfortably.

Bad text styling makes users leave faster than a developer seeing “undefined is not a function” on Friday evening.

Create the Project

Create a folder for this lesson:

mkdir css-lesson3
cd css-lesson3
touch index.html
touch style.css

You should have:

css-lesson3/
  index.html
  style.css

Open the folder in your editor.

We will create a small article page.

Because articles are perfect for practicing text styling.

Lots of headings.

Lots of paragraphs.

Lots of opportunities to make things readable.

Or terrible.

We choose readable.

We are civilized.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors, Fonts, and Text Styling</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Learning CSS Text Styling</h1>
    <p class="subtitle">Make your words readable, beautiful, and slightly less boring.</p>
  </header>

  <main class="page">
    <article class="article-card">
      <p class="category">CSS Basics</p>

      <h2>Why Text Styling Matters</h2>

      <p>
        Text is one of the most important parts of any website. If people cannot read your content comfortably, they will not stay for long.
      </p>

      <p>
        CSS lets us control colors, fonts, sizes, spacing, alignment, and many other details that make reading easier.
      </p>

      <h3>Readable Text Is Good Design</h3>

      <p>
        Good design is not only about beautiful colors and fancy effects. It is also about making information clear.
      </p>

      <a href="#" class="read-more">Read more</a>
    </article>
  </main>

  <footer class="site-footer">
    <p>Created while learning CSS text styling.</p>
  </footer>
</body>
</html>

This page has:

Perfect.

A small text playground.

But without sand in your shoes.

Start with Basic Page Styles

Open style.css and add:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

This gives the page:

The page already feels less chaotic.

Not finished.

But less like the browser made all design decisions during a lunch break.

Text Color with color

The color property changes text color.

Example:

p {
  color: #374151;
}

This makes paragraph text dark gray.

Dark gray is often easier to read than pure black.

Pure black on pure white can feel harsh.

Like the page is shouting.

Add this:

p {
  color: #374151;
}

Now all paragraphs use a softer text color.

Small change.

Big comfort.

Your users’ eyes quietly thank you.

Background Color

The background-color property changes the background of an element.

Example:

.site-header {
  background-color: #111827;
}

Add this:

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

Now the header has:

This is already more intentional.

CSS is starting to behave.

Do not trust it fully yet.

But this is progress.

Font Family

The font-family property controls the typeface.

Example:

body {
  font-family: Arial, sans-serif;
}

This means:

Use Arial if available. If not, use any sans-serif font.

The fallback is important.

Not every computer has every font.

Browsers are practical.

They need backup plans.

Like developers before production deploys.

Common font families:

font-family: Arial, sans-serif;
font-family: Georgia, serif;
font-family: "Courier New", monospace;

For now, keep this:

body {
  font-family: Arial, sans-serif;
}

Simple.

Readable.

Safe.

Not dramatic.

Font Size

The font-size property controls text size.

Example:

h1 {
  font-size: 48px;
}

Add this:

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

p {
  font-size: 18px;
}

Now headings and paragraphs have different sizes.

This creates hierarchy.

Hierarchy tells the user what is most important.

Without hierarchy, everything screams at the same volume.

That is not design.

That is a family dinner with bad Wi-Fi.

Font Weight

The font-weight property controls how bold text is.

Example:

h1 {
  font-weight: 700;
}

Common values:

font-weight: 400;
font-weight: 600;
font-weight: 700;

You can also use words:

font-weight: normal;
font-weight: bold;

Add this:

h1,
h2,
h3 {
  font-weight: 700;
}

.category {
  font-weight: 700;
}

Now headings and the category label feel stronger.

Use bold text carefully.

If everything is bold, nothing is bold.

Like if every button says “URGENT”.

Eventually, nobody believes you.

Line Height

The line-height property controls the space between lines of text.

Example:

p {
  line-height: 1.7;
}

Add this:

p {
  font-size: 18px;
  line-height: 1.7;
}

This improves readability.

Without good line height, paragraphs feel cramped.

Like words are standing in a crowded elevator.

Give them space.

Words also need oxygen.

Text Align

The text-align property controls horizontal alignment.

Example:

text-align: center;

Common values:

text-align: left;
text-align: center;
text-align: right;

We already used it in the header:

.site-header {
  text-align: center;
}

Use centered text carefully.

It works well for short headers.

But long paragraphs are usually easier to read left-aligned.

Do not center an entire article unless you want readers to suffer politely.

Text Transform

The text-transform property changes text case.

Example:

.category {
  text-transform: uppercase;
}

Add this:

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

This makes the category label look like a small tag.

letter-spacing adds space between letters.

Useful for uppercase labels.

Dangerous if overused.

Too much letter spacing makes text look like it is trying to escape.

Text Decoration

The text-decoration property controls lines on text.

Links have underline by default.

You can remove it:

a {
  text-decoration: none;
}

But be careful.

Underlines help users recognize links.

If you remove underline, make the link clearly styled in another way.

Add this:

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

Now the link is clean.

When the user hovers over it, the underline returns.

Polite.

Readable.

A link with manners.

Style the Article Card

Now make the article easier to read.

Add this:

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

This creates:

Now the page has structure.

The text has a home.

A nice home.

Not a basement with default Times New Roman.

Style the Footer

Add:

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

The footer now looks softer.

Footer text should usually be less dominant.

It is useful.

But it does not need to enter the room with a trumpet.

Complete CSS

Your style.css should look like this:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

h1,
h2,
h3 {
  font-weight: 700;
}

.subtitle {
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Save the file.

Refresh the browser.

Your page should now look much more readable.

Not just styled.

Readable.

That is the goal.

A website should not only look “cool”.

It should help people understand things.

Wild idea, apparently.

Common Mistakes

Text Too Small

Bad:

p {
  font-size: 10px;
}

Tiny text is not elegant.

It is just tiny.

Most body text should be comfortable to read.

A good starting point:

p {
  font-size: 16px;
  line-height: 1.6;
}

For beginner practice, 18px is also fine.

Poor Contrast

Bad:

p {
  color: #cccccc;
  background-color: #ffffff;
}

Light gray text on white background is hard to read.

It may look “soft”.

But it also looks invisible.

Your content should not play hide and seek.

Too Many Fonts

Bad idea:

h1 {
  font-family: Georgia, serif;
}

h2 {
  font-family: "Courier New", monospace;
}

p {
  font-family: Arial, sans-serif;
}

Using too many fonts makes the page feel messy.

Start with one font.

Maybe two later.

Not twelve.

This is a website, not a font zoo.

Practice

Create a small blog-style page with:

Then style:

Focus on readability.

Not decoration.

Readable first.

Fancy later.

Like learning to walk before buying shiny running shoes.

Mini Challenge

Create two article cards.

Give them both the class:

class="article-card"

Then create a special class:

class="article-card highlighted"

Style the highlighted article differently:

.highlighted {
  border: 2px solid #2563eb;
}

Try changing:

You are practicing real CSS thinking:

base style plus variation.

This is how websites stay organized instead of turning into style soup.

Summary

Today you learned:

Text is not a small detail.

Text is the main content of many websites.

Treat it well.

Your users will notice.

Even if they do not know why.

Next Lesson

In the next lesson, we will learn the box model.

Margin.

Padding.

Border.

Content.

The secret geometry behind every web page.

Prepare yourself.

The boxes are coming.