HTML Styles

What Are HTML Styles?

HTML styles let you change the appearance of your webpage using CSS (Cascading Style Sheets). You can style things like:

Colors
Fonts
Backgrounds
Layouts
Spacing

There are 3 main ways to add styles to HTML:

1. Inline CSS

CSS is added directly inside an HTML tag using the style attribute.

Syntax:

<tag style="property:value;">Content</tag>

Example:

<p style="color: red;">This is red text</p>

2. Internal CSS

CSS is added inside a >style< tag in the <head> section of the HTML file.

Syntax:

<head>
  <style>
    p {
      color: red;
      font-size: 18px;
    }
  </style>
</head>

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
    }
    p {
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Main Heading</h1>
  <p>This is italic text.</p>
</body>
</html>

3. External CSS

CSS is written in a separate .css file and linked to the HTML file using the <link> tag.

HTML File:

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

styles.css:

<style>
  body {
    background-color: #f0f0f0;
  }
  h1 {
    color: navy;
  }
  p {
    font-size: 16px;
  }
</style>

Comparison Table

Style Type	Where it's Written	Applies To	Best For
Inline CSS	Inside HTML tag	One element	Quick fixes
Internal CSS	style> in <head>	One HTML file	Small projects/pages
External CSS	Separate	css file Multiple pages	Large websites/projects