HTML Styles (Inline, Internal, External)

Add W3Buddy as a preferred source on Google

Article Summary

Learn how to apply HTML styles using inline, internal, and external CSS with clear examples and best practices.

HTML styles are used to control the appearance of HTML elements using CSS.
There are three ways to apply styles in HTML: inline, internal, and external.

1. Inline Styles

Inline styles are written directly inside an HTML element using the style attribute.

<p 
  style="color: blue; font-size: 16px; background-color: #f0f0f0;">
  This paragraph uses inline styling.
</p>

Inline Style Details

style → holds CSS rules
Affects only one element
Written as property: value;

2. Internal Styles

Internal styles are written inside the <head> section using the <style> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal Styles</title>
  <style>
    p {
      color: green;
      font-size: 18px;
      background-color: #e8f5e9;
    }
  </style>
</head>
<body>
  <p>This paragraph uses internal styling.</p>
</body>
</html>

Internal Style Details

Styles apply to the current page only
Written once and reused within the page
Useful for single-page styling

3. External Styles

External styles are written in a separate CSS file and linked to HTML.

HTML File

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link 
    rel="stylesheet"
    href="styles.css"
    media="all"
    type="text/css">
  <title>External Styles</title>
</head>
<body>
  <p class="text">This paragraph uses external styling.</p>
</body>
</html>

CSS File (`styles.css`)

.text {
  color: purple;
  font-size: 20px;
  background-color: #f3e5f5;
}

External Style Details

Best practice for real projects
One CSS file can style multiple pages
Keeps HTML clean and organized

Comparison of Style Methods

Method	Scope	Best Use
Inline	Single element	Quick changes
Internal	Single page	Page-specific styles
External	Multiple pages	Real websites

Important Notes

External CSS is recommended
Avoid excessive inline styles
Use internal styles only when needed
CSS controls design, HTML controls structure