Skip to main content
WPFSharp Academy
Syllabus

HTML Styles (Inline CSS Basics)

Badar KhalilUpdated September 27, 2026 2 min read
Share X Facebook LinkedIn WhatsApp

HTML Styles (Inline CSS Basics)

The HTML style attribute lets you apply CSS directly to a single element using inline styling. While it's the fastest way to see CSS in action, understanding when (and when not) to use it is an essential modern web development skill.

The style Attribute Syntax

Code
<tagname style="property: value; property2: value2;">Content</tagname>

Common Inline CSS Properties

  • color — sets text color
  • background-color — sets background color
  • font-size — sets text size
  • font-family — sets the font
  • text-align — aligns text (left, center, right, justify)
  • padding / margin — controls spacing
  • border — adds a border around the element
Code
<p style="color: blue; font-size: 20px; text-align: center;">
  Styled paragraph text.
</p>

Inline vs Internal vs External CSS (Quick Preview)

Inline CSS is just one of three ways to apply styles — we cover the full comparison in the next lesson, HTML & CSS Integration. For now, remember:

  • Inline CSS — written directly in the style attribute of one element.
  • Internal CSS — written inside a <style> tag in the document's <head>.
  • External CSS — written in a separate .css file and linked to the page.

Why Inline Styles Should Be Used Sparingly

Modern web development best practices strongly favor external CSS over inline styles because inline styles:

  • Mix content (HTML) with presentation (CSS), making code harder to maintain.
  • Cannot be reused across multiple elements.
  • Have the highest CSS specificity, making them difficult to override.
  • Bloat HTML file size on larger projects, hurting page performance.

Inline styles are still useful for quick prototyping, one-off overrides, or when generating dynamic styles with JavaScript.

Key Takeaways

  • The style attribute applies CSS directly to a single HTML element.
  • Inline styles use property: value; pairs separated by semicolons.
  • Inline CSS has the highest specificity and is hardest to override or reuse.
  • Prefer external CSS for real projects; use inline styles sparingly.
Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Exercise: Style a Card with Inline CSSHTML

Add inline styles to give the div a light gray background, 20px padding, and centered text, and make the h3 red.

Try it Yourself HTML
Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?