HTML Styles

There are three main ways to apply styles to HTML:

  • Inline — using the style attribute directly on an element.
  • Internal — using a <style> block inside the page’s <head>.
  • External — using a separate .css file linked via <link>.

Best Practice: Prefer external CSS for real projects (cleaner HTML, reusable styles, better performance). Use inline styles only for quick tests or very small overrides.

1) Inline Style (style attribute)


<h2 style="color: blue; text-align: center;">Inline Styled Heading</h2>

<p style="font-size: 18px; color: #333;">
  This paragraph uses inline CSS with multiple properties.
</p>

2) Internal CSS (<style> in <head>)


<head>
  <style>
    h1 { color: #e11d48; text-transform: uppercase; }
    .card { border: 1px solid #ddd; padding: 12px; border-radius: 6px; }
  </style>
</head>

3) External CSS (recommended)


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

Create a file named styles.css and place all your CSS rules there.

Common CSS Properties

  • color, background-color
  • font-size, font-family, font-weight
  • text-align, text-transform, text-decoration
  • margin, padding, border, border-radius
  • width, height, display

Colors: Names, HEX, RGB


<p style="color: red;">Named color (red)</p>
<p style="color: #16a34a;">HEX color (#16a34a)</p>
<p style="color: rgb(59,130,246);">RGB color (59,130,246)</p>

Output in Browser

Inline Styled Heading

This paragraph uses inline CSS with multiple properties.

Internal/External CSS Example

In real projects, move these rules into <style> or a .css file.

Named color (red)

HEX color (#16a34a)

RGB color (59,130,246)

Tip: When using multiple CSS sources, the browser applies the cascade: Inline > Internal > External (unless overridden with !important).