← Back to HTML Course | Chapter 1: Introduction & Basics | Lesson 8 of 11

HTML Styles

Think of plain HTML as the raw concrete walls of a brand-new house. It is strong, but it looks gray and cold. You need paint, carpets, and lighting to make it look like a home. HTML styles are your paint brushes and design catalogs. By using the style attribute, you can inject colors, custom fonts, spacing, and sizes directly into your HTML elements. It is the easiest way to give your website a unique personality before diving deep into advanced CSS.

In this page:

  1. The Style Attribute Syntax
  2. Controlling Text and Foreground Color
  3. Background Colors and Container Fills
  4. Adjusting Typography and Fonts
  5. Text Alignment and Centering
Syntax
markup 
<tagname style="property: value;">content</tagname>

The Style Attribute Syntax

To style any HTML element, you add the style attribute inside its opening tag. This attribute accepts standard CSS declarations written as property-value pairs separated by semicolons.

Note: Always end every style declaration with a semicolon to prevent styling errors.
Warning: Make sure your style property names are written in lowercase and separated from their values by a colon.

Example: The Style Attribute Syntax

markup 
<p style="color: blue; font-size: 18px;">Styled text</p>

Controlling Text and Foreground Color

The color property changes the color of the text inside an element. You can define colors using standard English names, hexadecimal codes (like #0000ff), or RGB values.

Hex codes are the most common choice in real projects since they offer precise control over shade and tone.

Note: Hex codes and RGB values give you access to millions of unique colors beyond basic named options.
Warning: Avoid using hard-to-read color combinations like yellow text on a white background.

Example: Controlling Text and Foreground Color

markup 
<p style="color: red;">Named color</p>
<p style="color: #0000ff;">Hex color</p>
<p style="color: rgb(0,128,0);">RGB color</p>

Background Colors and Container Fills

The background-color property sets the fill color of an element's container. It is commonly used to create highlighted alert boxes, visual cards, or custom banners on your page.

Choosing a background color with enough contrast against the text color is essential for readability and accessibility.

Note: You can find beautiful hex colors using the Cookies Cursor Color Picker.
Warning: Adding a background color changes the container shape visually, so you may need to add padding for spacing.

Example: Background Colors and Container Fills

markup 
<div style="background-color: yellow; padding: 10px;">
  Highlighted alert box
</div>

Adjusting Typography and Fonts

You can completely change how your text looks using the font-family property to select a typeface, and the font-size property to control the physical size of the characters.

Because not every visitor has every font installed, it's best practice to list a fallback generic family like sans-serif after your preferred choice.

Note: Always specify a backup generic font family like sans-serif in case your primary font fails to load.
Warning: Using absolute pixel sizes like 12px for body text can make your text too small to read on high-resolution screens.

Example: Adjusting Typography and Fonts

markup 
<p style="font-family: Georgia, sans-serif; font-size: 18px;">
  Styled paragraph text
</p>

Text Alignment and Centering

By default, text is aligned to the left edge of its container. The text-align property allows you to change this alignment, making it easy to center main titles or align data numbers to the right.

Note: Centering headings looks great, but avoid centering long paragraphs of body text as it is harder to read.
Warning: The text-align property only works on block-level containers; it will not align inline elements like spans.

Example: Text Alignment and Centering

markup 
<h1 style="text-align: center;">Centered Title</h1>
<p style="text-align: right;">Right-aligned number</p>
Live Example
Related Topics

HTML Print Styles · HTML Paragraphs · HTML Formatting · HTML Headings

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to put semicolons between multiple style properties.
  2. Misspelling property names like writing back-ground instead of background-color.
  3. Using double quotes inside an inline style rule which breaks the attribute structure.
Chapter Summary
  • The style attribute applies styling properties directly inside an HTML opening tag.
  • Control element layouts using font-family, font-size, color, and background-color properties.
  • Separate multiple style properties with semicolons inside your style rule.
Browser Support

Standard inline style properties are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson HTML Paragraphs Next Lesson → HTML Formatting

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.