? HTML Styles

⚡ Quick Overview

HTML defines the content and structure of a web page, while styles control how that content looks. With the help of CSS (Cascading Style Sheets), you can change colors, fonts, spacing, and layout. Styles can be added inline (inside tags), internally (inside a <style> block), or using an external CSS file. In this topic, we focus on inline and internal styles.

? Key Concepts

Why Styles? To control how HTML content looks without changing its meaning.
Ways to Add Styles:
- Inline: Use the style attribute inside an HTML tag.
- Internal: Write CSS inside the <style> tag in the <head> section.
- External: Link a separate CSS file (common in real projects).
CSS Syntax: Rules use the format selector { property: value; } (e.g., color: red;).
Common Properties: color, background-color, font-size, font-family, padding, margin.
Why CSS? It separates design from content and makes styling easier to maintain.

? Syntax and Theory

CSS targets HTML elements using selectors. Each selector has one or more properties with values:

selector { property: value; }

For example, to style all <h1> elements:

h1 { color: blue; font-size: 32px; }

Inline styles override internal and external styles for that specific element, but they quickly become messy if overused. Internal styles (inside <style>) allow you to style many elements at once in the same file.

? Code Example

The following example shows both inline and internal styling working together:

? View Styled Page Example

<!-- Simple example using both inline and internal styles -->
<!DOCTYPE html>
<html>
  <head>
    <title>Styled Page Example</title>
    <style>
      /* Internal styles applied to the whole page */
      body {
        background-color: #f0f8ff; /* Light blue background */
        font-family: Arial, sans-serif; /* Readable font */
      }
      h2 {
        color: #2a52be; /* Subheading color */
      }
      p.intro {
        font-size: 18px; /* Larger paragraph font */
        color: #333333; /* Dark text */
      }
    </style>
  </head>
  <body>
    <h1 style="color: darkred;">Welcome to HTML Styles!</h1> <!-- Inline style for heading -->
    <p class="intro">This paragraph uses internal styling with a class.</p>
    <p style="font-weight: bold; background-color: #ffffcc;">
      This paragraph uses inline styling to appear bold with a yellow background.
    </p>
  </body>
</html>

? Live Output

? What This Example Looks Like

Welcome to HTML Styles!

This paragraph uses internal styling with a class.

This paragraph uses inline styling to appear bold with a yellow background.

Here, the page background and font family are controlled by internal CSS, while some headings and paragraphs use inline styles for quick, element-specific changes.

? Tips and Best Practices

Prefer internal or external CSS when styling many elements to avoid repeating inline styles.
Avoid using too many inline styles — they make HTML harder to read and maintain.
Choose simple, readable fonts and good color contrast for better user experience.
Use meaningful class names like .intro or .highlight instead of .style1.
Test your page on different screen sizes; good styling should remain usable on mobile and desktop.
Remember: CSS property names are not case-sensitive, but most HTML attribute values are.

? Try It Yourself

Create a heading and use an inline style to make it blue and centered.
Add an internal style rule to make all paragraphs green with a readable font.
Make one paragraph bold with a light background using inline CSS.
Experiment with font-size, margin, and padding to see how spacing changes.
Create a class called .note and apply it to a paragraph to highlight important text.

? Summary

HTML styles, powered by CSS, control the visual presentation of your web pages. You learned how to add styles using inline and internal methods, how CSS syntax works, and how properties like color and font-size change the appearance of elements. As your projects grow, you’ll rely more on internal and external stylesheets to keep design consistent and your code clean.