HTML Styles – style Attribute, CSS Color, Font & Text | TipsInLearning

Lesson 8 of 22

HTML Styles — The style Attribute

Learn how to use the HTML style attribute to add CSS directly to elements — covering background color, text color, font family, font size, and text alignment. Your first step into making pages actually look good.

10 min read

Beginner

HTML + CSS

In This Lesson

10 min read Beginner

What is style?
Syntax
3 Ways to Add CSS
Background Color
Text Color
Font Family
Font Size
Text Alignment
Combining Styles
Common Mistakes
Try It
Summary
FAQ

Progress0/22

This is the lesson where HTML stops looking like plain black text on a white page. The style attribute is your first tool for making things look the way you want. It's also a great introduction to CSS concepts — once you understand how property and value work here, the entire CSS course will feel natural.

What You'll Learn

What the HTML style attribute does

The CSS property:value syntax

Set background color on any element

Change text color three different ways

Set font family and font size

Align text left, center, right, or justified

What is the HTML style Attribute?

The HTML style attribute adds inline CSS directly to any HTML element. It tells the browser exactly how that one element should look — its color, size, font, background, alignment, spacing, and more.

Think of it this way: HTML elements are the rooms in a house. The style attribute is your interior decorator — you're telling the browser "paint this room blue, make the ceiling 12 feet high, use oak flooring." Without CSS, every room looks identical. With it, each one can be completely different.

Every CSS property you can use in a stylesheet can also be used in the style attribute. That makes it a great learning tool — you don't need a separate CSS file to experiment and see results immediately.

background-color

Sets element background

color

Sets text color

font-family

Sets font typeface

font-size

Sets text size

text-align

Aligns text direction

Syntax

The style attribute uses CSS property:value pairs inside double quotes. Each pair ends with a semicolon, and multiple pairs are chained together in the same string:

HTML style attribute — tag + style= + "property: value;"

HTML — style Attribute Syntax

<!-- Single property -->
<p style="color: red;">Red text</p>

<!-- Multiple properties separated by semicolons -->
<p style="color: white; background-color: blue; font-size: 18px;">
  Styled paragraph
</p>

3 Ways to Add CSS to HTML

The style attribute is just one of three ways to apply CSS. Knowing all three helps you understand when inline styles are appropriate — and when they aren't:

Inline CSS

Learning & Testing

Uses the style attribute on the element. Quick and direct. Not ideal for large projects because you'd have to repeat the same styles on every element.

Internal CSS

Single Page

Uses a <style> tag inside <head>. Good for styling a single-page document without creating a separate file.

External CSS

⭐ Best Practice

A separate .css file linked with <link>. Every professional website works this way — one stylesheet controls the entire site.

Why start with inline? Because when you write style="color:red" directly on an element and immediately see red text, the connection between code and result is instant and obvious. That direct feedback is why inline styles are the best learning tool — even if external CSS is what you'll use in real projects.

Background Color

The background-color property sets the background of any HTML element. You can apply it to the entire page via the <body> tag, or to any individual element like a heading, paragraph, or div.

You can specify the color three ways: as a color name (like powderblue), as a hex code (like #86efac), or as an RGB value (like rgb(196,181,253)). All three work identically — the hex and RGB methods just give you more precise control.

background-color accepts color names, hex codes, and rgb() values

HTML — background-color

<!-- Full page background -->
<body style="background-color: powderblue;">

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>

<!-- Individual element backgrounds -->
<h1 style="background-color: #fef3c7;">Yellow heading</h1>
<p style="background-color: #dbeafe;">Blue paragraph background</p>

Browser Output

This is a heading

This is a paragraph.

🌐 background-color: powderblue applied to the <body> tag

Text Color

The color property sets the text color of an element. Just like background-color, you can use color names, hex codes, or RGB values. The same three formats work for both properties — once you know one, you know the other.

CSS color — use color names, hex codes, or rgb() values

HTML — Text Color

<!-- Color names -->
<h1 style="color: blue;">Blue Heading</h1>
<p style="color: red;">Red paragraph</p>

<!-- Hex color codes -->
<p style="color: #7c3aed;">Purple paragraph</p>

<!-- RGB values -->
<p style="color: rgb(5, 150, 105);">Green paragraph</p>

red / #ef4444

blue / #3b82f6

#7c3aed

green / #059669

orange / #f97316

#1e293b

Font Family

The font-family property sets the typeface used for text. A crucial rule: always provide a fallback font. If the user's device doesn't have your first-choice font, the browser tries the second. The pattern is font-family: "Preferred Font", fallback-category;

The three fallback categories are sans-serif (clean, modern fonts like Arial), serif (traditional fonts with decorative strokes, like Georgia), and monospace (fixed-width fonts like Courier, great for code).

Different font-family values produce visually distinct text — same content, different feel

HTML — font-family

<h1 style="font-family: Verdana, sans-serif;">Verdana Heading</h1>

<p style="font-family: Courier New, monospace;">Courier New paragraph</p>

<p style="font-family: Georgia, serif;">Georgia — classic serif font</p>

<!-- Using pixels (most predictable for beginners) -->
<h1 style="font-size: 40px;">Big Heading</h1>
<p style="font-size: 16px;">Normal paragraph</p>
<p style="font-size: 12px;">Small fine print</p>

<!-- Using percentage -->
<h1 style="font-size: 300%;">Very large heading</h1>
<p style="font-size: 160%;">Larger paragraph</p>

Text Alignment

The text-align property controls the horizontal alignment of text inside an element. There are four values — and justify is the one beginners most often forget about.

HTML — text-align

<h1 style="text-align: center;">Centered Heading</h1>
<p style="text-align: left;">Left aligned (default)</p>
<p style="text-align: right;">Right aligned</p>
<p style="text-align: justify;">Justified — stretches text to fill the full line width.</p>

Centered Heading

Left aligned (default)

Right aligned

Justified — each line of text stretches to fill the full width of the container.

🌐 All four text-align values rendered in the browser

Combining Multiple Styles

Separating properties with semicolons lets you chain as many as you need in one style attribute. Here's a complete example combining everything from this lesson — background, color, font family, font size, and alignment all in one page:

HTML — Complete Styled Page

<!DOCTYPE html>
<html lang="en">
<body style="background-color: #f8fafc; font-family: Arial, sans-serif;">

  <h1 style="color: #7c3aed; text-align: center; font-size: 36px;">
    TipsInLearning
  </h1>

  <h2 style="color: #3b82f6; font-size: 24px;">
    Free Web Development Courses
  </h2>

  <p style="color: #475569; font-size: 16px; line-height: 1.8;">
    Learn HTML, CSS, and Bootstrap completely free.
  </p>

  <p style="background-color: #7c3aed; color: white;
          padding: 10px; text-align: center; border-radius: 8px;">
    Start Learning Today!
  </p>

</body>
</html>

TipsInLearning

Free Web Development Courses

Learn HTML, CSS, and Bootstrap completely free.

Start Learning Today!

🌐 All style properties combined — background, color, font, size, and alignment

Common Mistakes

These are the errors that catch beginners out most often with the style attribute:

Forgetting the semicolon between properties
When you have multiple properties, every single one needs a semicolon after it — including the last one. Writing color: red font-size: 16px will silently fail — the browser won't apply either property. The correct form is color: red; font-size: 16px;

Using the wrong syntax — it's property: value, not property = value
CSS uses a colon, not an equals sign. Writing color = "red" is HTML attribute syntax. Inside the style attribute, you need CSS syntax: color: red;. The colon separates the property from its value; the semicolon ends the declaration.

Over-relying on inline styles for real projects
Inline styles work perfectly for learning and for one-off overrides. But if you put style="color:purple" on 50 paragraphs and then want to change them all to blue, you have to edit 50 lines. External CSS lets you change one rule and update the entire site. Learn inline styles to understand CSS, then graduate to external stylesheets.

Try It — Style Your First Webpage

Challenge — Apply All 5 Properties

1Set background-color: #e0f2fe on the <body> tag and confirm the whole page background changes

2Add an <h1> with color: #1e40af and text-align: center — confirm it's centered and blue

3Add a <p> with font-family: Georgia, serif and font-size: 18px — notice how the font differs from the default

4Create a "button-style" paragraph: combine background-color: #7c3aed, color: white, text-align: center, and padding: 12px

5Replace the color name in step 2 with a hex code — try #ff6b6b instead of a named color and notice nothing else changes

Lesson Summary — Key Takeaways

1The style attribute uses property: value; pairs — colon separates, semicolon ends each declaration

2background-color sets any element's background — works on body, headings, paragraphs, anything

3color sets text color — use names, hex codes, or rgb() — all three work the same way

4font-family sets the typeface — always include a fallback like sans-serif or serif

5font-size in px is fixed and beginner-friendly; % is relative to the parent element

6text-align: left (default), center, right, or justify — controls horizontal text position

Questions About HTML Styles

The questions beginners ask most often about the style attribute:

What's the difference between the style attribute and a CSS file?

The style attribute applies CSS to one specific element. A CSS file applies CSS to elements across your entire website. If you write style="color:red" on a paragraph, only that paragraph is red. If you write p { color: red; } in a CSS file, every paragraph on every page linked to that file turns red. Use the style attribute for learning and one-off overrides. Use external CSS for real projects.

Why isn't my style working? I wrote it correctly but nothing changed.

Three most common causes: first, check if you used a colon (not equals) — it should be color: red not color = red. Second, check if you have a semicolon between multiple properties. Third, save the file and hard-refresh the browser with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) — the browser may be showing a cached version. Open the browser's DevTools (F12) and look at the Styles panel to see exactly what CSS is being applied.

When should I use px vs % for font size?

Start with px — it's predictable and easy to understand. font-size: 16px always means 16 pixels, on any device, in any element. Percentages are relative to the parent element's font size, which means the result changes depending on context. For example, font-size: 200% inside a paragraph that's already 20px will give you 40px text — which may surprise you. Once you understand the cascade and inheritance in CSS, percentage and em/rem units become much more useful.

Can I use the style attribute on any HTML element?

Almost. You can apply the style attribute to virtually any visible HTML element — headings, paragraphs, divs, spans, tables, images, buttons, lists — anything that renders in the browser. The exceptions are invisible elements like <meta>, <script>, and <title> where styling makes no sense. In practice, if you can see it on the page, you can style it.

How many CSS properties can I put in one style attribute?

There's no hard limit — you can chain as many as you need, separated by semicolons. In practice, if you're writing more than 4–5 properties on a single element, it becomes very hard to read and maintain. At that point, the right move is to write a CSS class in a stylesheet instead. That said, for learning purposes, go ahead and experiment with as many as you like — it's a great way to discover what each property does.

HTML Paragraphs

Next Lesson

HTML Text Formatting

HTML Styles Tutorial