HTML Styles
In this page:
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
<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
<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
<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
<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
<h1 style="text-align: center;">Centered Title</h1>
<p style="text-align: right;">Right-aligned number</p>- Forgetting to put semicolons between multiple style properties.
- Misspelling property names like writing back-ground instead of background-color.
- Using double quotes inside an inline style rule which breaks the attribute structure.
- 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.
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: