FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Styling

Intermediate

HTML Colors & CSS

Learn HTML Colors & CSS as the bridge between clean HTML and professional CSS: visual hierarchy, maintainable styling, responsive behavior and live practice.

HTML styling foundation

CSS turns correct HTML into a visual interface.

HTML describes what the content is. CSS describes how that content should look. That difference matters. If you use HTML to force visual styling, the page becomes harder to maintain, less accessible and weaker as a design system.

Color is often the first styling topic beginners meet, but professional color is not only about taste. It is about contrast, hierarchy, state, brand, readability and consistency.

This lesson uses color as the entry point into CSS thinking: choose classes for reusable meaning, write CSS in one place and let HTML stay clean.

color

Sets the text color.

background

Sets the background color, image or gradient.

border-color

Controls borders and dividing lines.

CSS variables

Store reusable design values such as brand colors.

Syntax and structure

CSS selectors choose elements, declarations style them.

A CSS rule has a selector, curly braces and declarations. Each declaration has a property and a value.

Reusable color system

<section class="hero hero--dark">
  <p class="eyebrow">HTML + CSS</p>
  <h1>Structure first, styling second.</h1>
</section>

<style>
  :root {
    --color-bg: #07111f;
    --color-text: #f7f7f4;
    --color-accent: #8cffc1;
  }

  .hero--dark {
    background: var(--color-bg);
    color: var(--color-text);
  }

  .eyebrow {
    color: var(--color-accent);
  }
</style>

Color scattered through HTML

<h1 style="color: #8cffc1">Structure first</h1>
<p style="color: #ffffff">Styling second.</p>
<p style="color: #8cffc1">Another accent line.</p>
<font color="red">Old HTML styling</font>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<section class="hero hero--dark">
  <p class="eyebrow">HTML + CSS</p>
  <h1>Structure first, styling second.</h1>
</section>

<style>
  :root {
    --color-bg: #07111f;
    --color-text: #f7f7f4;
    --color-accent: #8cffc1;
  }

  .hero--dark {
    background: var(--color-bg);
    color: var(--color-text);
  }

  .eyebrow {
    color: var(--color-accent);
  }
</style>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<article class="lesson-card">
  <p class="eyebrow">CSS foundation</p>
  <h1>Color creates hierarchy.</h1>
  <p>Change the accent, surface and text colors. Keep the text readable.</p>
  <a href="#next">Continue lesson</a>
</article>

<style>
:root {
  --bg: #07111f;
  --surface: #101a2d;
  --text: #f7f7f4;
  --muted: #b7c0ce;
  --accent: #8cffc1;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.lesson-card {
  width: min(720px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

.eyebrow, a {
  color: var(--accent);
}

h1 {
  margin: 10px 0 14px;
  font-size: 44px;
  line-height: 1;
}

p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<h1 style="color: #8cffc1">Structure first</h1>
<p style="color: #ffffff">Styling second.</p>
<p style="color: #8cffc1">Another accent line.</p>
<font color="red">Old HTML styling</font>
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

CSS becomes powerful when it is written as a system.

Styling is not only making something look nice once. Good CSS stays readable, reusable and predictable while the project grows.

Keep meaning in HTML

Do not choose a heading, strong element or table only because it gives a visual effect.

Use classes for reusable styling

A class such as card, hero or button can be styled consistently across many elements.

Check contrast

Beautiful color that cannot be read is not good design. Text needs enough contrast against its background.

Use variables for systems

CSS custom properties make brand colors and repeated values easier to maintain.

Avoid random one-off colors

A page with twenty almost-identical reds or blues usually feels amateur quickly.

Let CSS do visual work

Color, spacing, layout, typography and animation belong in CSS, not HTML structure.

Production thinking

CSS affects trust, accessibility, performance and maintainability.

Why does this matter?

This matters because users judge quality in seconds. Clean HTML may be technically correct, but CSS is what turns that structure into something that feels trustworthy, premium and easy to use.

Accessibility

Color should never be the only way to communicate meaning. Pair color with text, icons, labels or state changes that can be understood without seeing the color.

Production note

Real projects should define a small color system: background, surface, text, muted text, accent, warning, success and border. That keeps pages consistent as the site grows.

SEO note

Search engines do not rank a page because it uses a specific color, but design quality affects trust, readability, engagement and conversion. Good CSS supports the content.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change --accent to another color and run the preview.
  • Make the surface lighter, then check whether the text is still readable.
  • Change only CSS, not the HTML, and keep the design coherent.

Practice assignment

Do this before moving to the next lesson.

  1. Create a small color system with at least five CSS variables.
  2. Use those variables in selectors instead of hardcoding every color.
  3. Explain which color is used for background, text, muted text, accent and surface.

Try it yourself

Build a color system for a lesson card

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?