HTML Styles: The style Attribute Explained

The HTML style attribute lets you add CSS directly to one element to change its color, background, font, size and alignment. Learn how inline styles work and when to use them.

What is the HTML style attribute?

Every HTML element can have a style attribute. Inside it you write CSS, the language that controls how a page looks. CSS stands for Cascading Style Sheets. HTML says what something is (a heading, a paragraph); CSS says how it looks (red, big, centred).

When you put CSS inside the style attribute, it is called an inline style, because the style sits "in line" with the element. Think of it like writing a note directly on one parcel: "handle with care". It only affects that one parcel.

The pattern looks like this:

<p style="property: value;">Some text</p>

• A property is the thing you want to change, like color or font-size.
• A value is the setting you choose, like red or 20px.
• A colon : separates the property and the value.
• A semicolon ; ends each rule, so you can add more than one.

Here is a small example with one style on each element:

<h1 style="color: darkgreen;">Green Leaf Cafe</h1>
<p style="font-size: 20px;">Fresh coffee and homemade cakes every day.</p>
<p style="text-align: center;">Open 8 am to 6 pm</p>

In the browser, the heading is dark green, the first paragraph has larger text, and the opening hours sit in the middle of the page.

The five most useful inline style properties

Let's look at the properties you will use most often. You can combine as many as you like in one style attribute.

Property	What it changes	Example value
color	The text color	navy, #333333
background-color	The color behind the element	lightyellow, #fff4d6
font-family	The font (typeface)	Arial, sans-serif
font-size	The size of the text	18px, 1.5rem
text-align	Left, right, centre or justified text	left, center, right

color and background-color

color changes the text. background-color paints the box behind the element. A block element like <p> gets a background across the full width of the page, while an inline element like <span> only gets a background behind its words.

<p style="background-color: lightyellow; color: saddlebrown;">Today's special: apple pie with cream.</p>
<p>Price: <span style="background-color: gold; color: black;">only £3.50</span></p>

The first paragraph has a pale yellow band across the page with brown text. In the second paragraph, only "only £3.50" is highlighted in gold, like a highlighter pen.

font-family and font-size

font-family chooses the typeface. You usually give a list: the browser uses the first font it has, and falls back to the next one. Always end with a general family like sans-serif, serif or monospace. Font names with spaces go in single quotes, because the whole attribute already uses double quotes.

font-size sets the size. px means pixels, a fixed size. rem is relative to the user's default size (usually 16px), so 1.5rem is about 24px. Many developers prefer rem because it respects people who set bigger text in their browser.

<h2 style="font-family: Georgia, 'Times New Roman', serif; font-size: 2rem;">Our Story</h2>
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 1.125rem;">We opened our first shop in 2019 with one oven and a lot of hope.</p>

The heading appears in Georgia (an elegant serif font), and the paragraph in Arial at a slightly larger size than normal text.

A complete styled card with inline styles

Here is a realistic example: a small announcement box. Notice how one style attribute can hold several properties, separated by semicolons.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Opening Party - Green Leaf Cafe</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f7f7f2;">
  <h1 style="color: #2e6b3f; text-align: center;">We are opening a new cafe!</h1>
  <p style="text-align: center; font-size: 1.25rem;">Join us on Saturday 14 November from 10 am.</p>
  <p style="background-color: #2e6b3f; color: white; text-align: center; font-size: 1.1rem;">Free coffee for the first 50 guests</p>
</body>
</html>

You will see a light cream page, a centred green heading, a centred line with the date, and a green band with white text announcing the free coffee. Styles on <body> are passed down (inherited) to the text inside, so every element uses Arial.

Common mistake: Forgetting the semicolons or using = instead of :. style="color=red" does nothing. Write style="color: red;". If one style is broken, the browser often ignores it silently, so check your spelling.

Why CSS files are better for bigger sites

Inline styles are great for learning and quick tests. But on a real website they cause problems:

• Repetition: if 30 headings need the same green, you must write the same style 30 times.
• Hard to change: to change the brand color, you must edit every element, on every page.
• Messy HTML: long style attributes make your content hard to read.
• Strong priority: inline styles beat most other CSS rules, which makes them hard to override later.

The better way is to write your CSS once, in a separate file, and connect it to all your pages. You will see how in the lesson about adding CSS to your HTML page, and the CSS course goes much deeper. Inline styles are still useful for one-off tweaks, emails, and values set by JavaScript.

Note: You may see old tags like <font> and <center> in old tutorials. They are obsolete. Use the style attribute or CSS instead. See MDN: the style attribute for details.

Practice exercise

Make a small "Lost cat" poster page. Give the <body> a font family and a light background color. Make the <h1> red and centred, add a paragraph describing the cat at 1.25rem, and put the phone number in a <span> with a yellow background.

Hint: you need color, background-color, font-family, font-size and text-align. Separate each property with a semicolon.

Key takeaways

• The style attribute adds CSS to a single element; this is called an inline style.
• Write styles as property: value; and separate several with semicolons.
• color, background-color, font-family, font-size and text-align are the most common properties.
• Always end a font-family list with a general family like sans-serif.
• For real websites, put CSS in a separate file so you write each style only once.