</>
Skip to content
HTML lessons (9/60)

HTML — Styles

HTML describes structure. Style changes how it looks.

HTML tags come with default appearances: headings are big and bold, links are blue and underlined. The style mechanism lets you change all of that.

Big picture: styling is technically CSS's job, not HTML's. But the two meet in three places, and you must understand all three to read real-world code.

Three ways to style HTML

1. Inline — with the style attribute

Put CSS directly on an element:

<p style="color: blue;">This text is blue.</p>
<p style="color: red; font-size: 24px;">Red and larger.</p>

What the browser displays

This text is blue. Red and larger. (in 24px)

(The first paragraph renders blue; the second red and noticeably bigger.)

Syntax breakdown:

style="color: blue;"
        └─┬─┘ └─┬─┘
     property value

Multiple declarations are separated by semicolons inside one pair of quotes.

2. Internal — with a <style> block

Place rules inside <head> that apply to whole page:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: linen;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: darkgreen;
        }
        p {
            color: darkslategray;
            margin-left: 20px;
        }
    </style>
</head>
<body>

    <h1>Styled Page</h1>
    <p>This paragraph inherits the styles above.</p>

</body>
</html>

Every <h1> on this page becomes dark green; every <p> gets the color and left margin. One rule, unlimited elements.

3. External — a separate .css file (the professional way)

styles.css

body { background-color: white; }
h1   { color: navy; border-bottom: 3px solid gold; }
p    { line-height: 1.6; }

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello Styling</h1>
    <p>Styled by an external file.</p>
</body>
</html>

The <link> tag pulls the stylesheet in. Now:

  • Many pages can share one stylesheet
  • Change the design once → entire site updates
  • Browsers cache the file → faster subsequent loads

Which should you use?

MethodUse whenReal-world frequency
InlineQuick test, one-off tweak, email templatesRare
InternalSingle-page demos, learning exercisesOccasional
ExternalAnything real, multi-page sitesAlmost always

Modern best practice: external stylesheets, always. Inline styles mix appearance into structure, which makes pages harder to maintain as they grow.

Useful properties for your first experiments

<h1 style="color: teal;">Color changes text</h1>

<p style="background-color: yellow;">Background fills the box.</p>

<p style="font-family: Georgia, serif;">Different font family.</p>

<p style="font-size: 20px;">Bigger text.</p>

<p style="text-align: center;">Centered text.</p>

<div style="border: 2px solid black; padding: 10px;">
    A bordered, padded box.
</div>

What the browser displays

A teal heading; a yellow-highlighted sentence; serif-font text; enlarged text; centered text; and a visible rectangle around the final div with breathing room inside it.

The style attribute vs semantic HTML

A warning from history. Before CSS matured, HTML had presentational tags like:

<!-- Deprecated — do not use -->
<font color="red">old-school red</font>
<center>old centering</center>
<big>old big text</big>

These are obsolete and removed from HTML5. If a tutorial teaches them, it's teaching 2005. The modern rule:

HTML = what things ARE
CSS  = how things LOOK

Keep them separate and your code stays maintainable forever.

How styles cascade (a first look)

When multiple rules target the same element, browsers resolve conflicts in order of specificity — roughly:

  1. Inline style="" wins most
  2. Then rules in <style> / external files
  3. Then browser defaults
<head>
    <style>p { color: green; }</style>
</head>
<body>
    <p style="color: orange;">Which color am I?</p>
</body>

The paragraph renders orange — inline beats the internal rule. We'll map the full "cascade" in the CSS course; today just remember inline has high priority.

Mini Practice

Build styled.html:

  1. Add an internal <style> block making every <h1> purple
  2. Give one paragraph an inline style with three different declarations
  3. Move your styles into an external styles.css and link it
  4. Verify all three approaches work — then commit to external going forward

Next: formatting text →

Related Topics

ParagraphsFormattingQuotationsComments

Frequently Asked Questions about Styles

What is Styles in HTML?

Styles is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Styles?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Styles.

Why is Styles important in HTML?

Styles is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.