HTML Styles

HTML handles the structure of a web page, while CSS (Cascading Style Sheets) handles its appearance. You can write styles in HTML in three ways: inline styles, internal style sheets, and external style sheets.

Inline Styles

Write CSS directly in an element's style attribute — it only affects that specific element:

HTML

<p style="color: blue; font-size: 18px;">
  This is a paragraph with large blue text.
</p>
<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
  This is a gray card with rounded corners.
</div>

▶ Try It Yourself

💡 When to Use: Inline styles have the highest priority and are great for quick testing or scenarios where JavaScript dynamically modifies styles. However, avoid them in production because they're hard to maintain.

Internal Style Sheet

Define styles inside the <head> using the <style> tag — all elements on the page can reference them:

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; }
    h1 { color: #333; text-align: center; }
    .card {
      background: #fff;
      border: 1px solid #ddd;
      padding: 16px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>My Page</h1>
  <div class="card">This is a card</div>
</body>
</html>

▶ Try It Yourself

External Style Sheet

Write CSS in a separate .css file and include it with <link>. This is the most recommended approach — a single CSS file can control the style of an entire website:

HTML

<head>
  <link rel="stylesheet" href="style.css">
</head>

<!-- Contents of style.css: -->
<!-- h1 { color: navy; } -->
<!-- .highlight { background: yellow; } -->

▶ Try It Yourself

📌 Priority of the Three Methods: Inline styles > Internal style sheet > External style sheet > Browser default styles. When the same element is styled by multiple methods, the one with higher priority takes effect.

Common CSS Properties at a Glance

Here are some of the most commonly-used CSS properties in HTML — master these and you can create decent-looking pages:

color — Text color
background-color — Background color
font-size — Font size
font-weight — Font weight (bold = thick)
text-align — Text alignment (left/center/right)
padding — Inner spacing (space between content and border)
margin — Outer spacing (space between elements)
border — Border
width / height — Width and height
display — Display mode (block/inline/flex/none)

📖 Summary

Three ways to write styles: inline (style attribute), internal (<style> tag), external (<link> to .css file)
External style sheets are the best practice — reusable, cacheable, and separate structure from presentation
Style priority: Inline > Internal > External > Browser default
CSS properties consist of "property-name: value" pairs, separated by semicolons

📝 Exercises

Style practice: Create an HTML page and use all three styling methods on different elements. Observe the priority effect.
Card design: Use inline styles to create a card component with a title, image description, and button.
External styles: Create a style.css file, include it with <link>, and apply styles to multiple elements on the page.

← Previous: HTML Character Entities Next: HTML Semantics →