HTML Styles
The style attribute lets you add colours, fonts, sizes and more to an element.
The style Attribute
The syntax is:
Example
<tagname style="property:value;">The property is a CSS property, like color. The value is what you want, like blue. You can add several pairs, each ending with a semicolon.
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:navy;">Ali's Mobile Shop</h1>
<p style="color:gray; font-size:18px;">Phones, chargers and covers at fair prices.</p>
</body>
</html>Background Colour
background-color sets the colour behind an element.
Example
<!DOCTYPE html>
<html>
<body style="background-color:lightyellow;">
<h1 style="background-color:orange;">Eid Offer</h1>
<p style="background-color:lightgreen;">20% off on all covers.</p>
</body>
</html>Text Colour
color sets the colour of the text itself.
Example
<p style="color:red;">Out of stock</p>
<p style="color:green;">In stock</p>Fonts
font-family chooses the typeface. Give a list; the browser uses the first one it has.
Example
<!DOCTYPE html>
<html>
<body>
<h2 style="font-family:Georgia, serif;">A classic look</h2>
<p style="font-family:Arial, sans-serif;">A clean, modern look.</p>
<p style="font-family:'Courier New', monospace;">A typewriter look.</p>
</body>
</html>When a font name has spaces, like Courier New, wrap it in single quotes inside the style attribute, because the attribute itself already uses double quotes.
Text Size
font-size sets the size of the text, often in pixels (px).
Example
<p style="font-size:14px;">Small print</p>
<p style="font-size:32px;">Big announcement</p>Text Alignment
text-align lines the text up to the left, right or center.
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Welcome</h1>
<p style="text-align:center;">We are open seven days a week.</p>
<p style="text-align:right;">- Management</p>
</body>
</html>Summary of Properties
| Property | What it changes | Example value |
|---|---|---|
color | Text colour | blue, #e34c26 |
background-color | Background colour | lightgray |
font-family | Typeface | Arial, sans-serif |
font-size | Text size | 20px |
text-align | Horizontal alignment | center |
Inline Styles vs CSS Files
The style attribute is called an inline style because it sits inside the tag. It is great for learning and quick tests. On real websites, styles usually live in a <style> block or a separate .css file, so one rule can style many elements at once. You will learn this in the CSS tutorial.
Exercise
Exercise
Which style makes a paragraph's text red?