HTML Styles

💅 What Are HTML Styles?

HTML styles are used to enhance the appearance of web content. You can change colors, fonts, layout, spacing, and much more using styling.

>>“Without styles, the web would be functional but flat. Styles bring design to life.” ✨

🎯 Ways to Apply Styles in HTML

There are three main ways to apply styles in HTML:

  • 🎨 Inline Styles — directly in the HTML element via the style attribute
  • 🧾 Internal CSS — within a <style> tag in the <head>
  • 🌐 External CSS — linking to a separate .css file

🔘 1. Inline Styles

Use the style attribute to apply CSS properties directly to an element.

Inline Style Example

<p style="color: green; font-size: 20px;">This is a green paragraph.</p>

Note

⚠️ Inline styles are useful for quick tweaks but not ideal for maintaining large projects.

🧩 2. Internal CSS

Internal styles are defined in the <head> section using the <style> tag.

Internal CSS Example

<html>
  <head>
    <style>
      p {
        color: navy;
        font-family: Arial;
      }
    </style>
  </head>
  <body>
    <p>This paragraph is styled with internal CSS.</p>
  </body>
</html>

Note

✅ Use internal styles when working with single HTML pages or demos.

🌐 3. External CSS

External styles are written in a separate file and linked using the <link> tag. This is the preferred way for real-world projects.

HTML File with External CSS

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

styles.css

p {
  color: teal;
  font-size: 18px;
}

Note

📁 External styles make your HTML cleaner and your styling reusable across pages.

🎨 CSS Properties You Can Use

PropertyPurposeExample Value
colorText colorred
font-sizeText size16px
background-colorBackground filllightgray
marginSpacing outside the element10px
paddingSpacing inside the element20px

🧠 Styling Best Practices

  • 🎯 Use external stylesheets for scalable projects
  • 📁 Keep styles organized in a /css or /assets folder
  • 🧹 Avoid using inline styles unless absolutely necessary
  • ♿ Use readable color combinations for accessibility

📚 Learn More

>>“Code is structure, but style is expression. Master both to create exceptional web experiences.” 🧑‍🎨