HTML Basics

HTML Styles

HTML allows you to style your web page content to make it visually appealing.
Styles define colors, fonts, spacing, and layout of elements. You can apply styles inline, internally, or externally using CSS.

What Are HTML Styles?

Styles control the visual presentation of HTML elements.
While HTML defines structure, styles define appearance.

HTML Style Example

html

<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

style → Attribute to apply inline CSS
color → Sets text color
font-size → Sets size of text

Types of Styling in HTML

a) Inline Styles

Applied directly to an element using the style attribute.

Inline Style Example

html

<h1 style="color: #29AB87; text-align: center;">Welcome!</h1>

b) Internal Styles

Defined within <style> tags inside the <head> section.

Internal Style Example

html

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This paragraph is styled using internal CSS.</p>
</body>

c) External Styles

Stored in a separate .css file and linked to HTML using <link> in <head>.

External Style Example

html

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

styles.css:

Style Example

css

body {
  background-color: #f0f0f0;
}
h1 {
  color: #29AB87;
}

Common Style Properties

Property	Description	Example
color	Text color	color: blue;
background-color	Background color	background-color: yellow;
font-size	Text size	font-size: 18px;
font-family	Font style	font-family: Arial, sans-serif;
text-align	Text alignment	text-align: center;
margin	Space outside element	margin: 10px;
padding	Space inside element	padding: 5px;

Example: Combining Styles

Combined Style Example

html

<p style="color: white; background-color: #29AB87; font-size: 18px; padding: 10px; text-align: center;">
Styled paragraph with multiple properties.
</p>

This paragraph has text color, background color, font size, padding, and centered alignment.

Tips for Using Styles

Use CSS classes instead of repeating inline styles.

Example HTML

html

<p class="highlight">This is highlighted text.</p>

Define classes in <style> or external CSS.

Example CSS

css

.highlight {
  color: #29AB87;
  font-weight: bold;
}

Avoid overusing inline styles for cleaner code and better maintainability.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML styles enhance the appearance and readability of your web page.
Learning to use inline, internal, and external styles effectively is essential for creating visually appealing and professional-looking websites.

PreviousHTML Comments NextHTML Text Formatting