HTML Styles

You can already build page structure and point to other files with paths. The next question beginners ask is how to change how content looks: text color, background, and size. In early HTML practice you can do that with the style attribute. It is a small doorway into CSS ideas — useful for demos — while full site design will move into proper CSS later in your learning path.

What is the style attribute?

The style attribute lets you attach CSS declarations directly to one HTML element’s start tag. The browser reads those declarations and paints that element accordingly. You are not inventing a second language from scratch: you are writing short CSS rules in a place HTML already provides. That makes inline style a good teaching tool, even though professional projects rarely keep all design inside attributes.

Direct answer

Add appearance with style="property: value;" on an element. Starter properties include color (text foreground), background-color (the area behind the content), and font-size (text size). Put the whole list inside quotes. Separate multiple declarations with semicolons. For real multi-page sites, prefer a CSS file or a <style> block so you do not repeat the same look on every tag — but for this lesson, focus on reading and writing clear inline declarations.

Property and value, one at a time

Each declaration has a property (what you want to change) and a value (how it should look). A colon sits between them. Beginners should learn a few properties well before memorizing a huge list.

Reading the example

• color: blue changes only the text color of that paragraph
• background-color: lightyellow colors the background behind the text
• font-size: 24px sets text size; px is a common beginner unit
• Each paragraph has its own style="..." so the three effects stay separate and easy to see
• Named colors like blue work for practice; later you will also see hex values such as #336699
  If nothing changes in the browser, confirm you saved the file, refreshed the page, and kept the quotes around the entire style value.

Several declarations in one attribute

You can combine declarations inside a single style attribute. Keep the list short so the HTML stays readable. End each declaration with a semicolon — including a final one is fine and often clearer when you edit later.

Why this pattern matters

• One element can carry color, background, and size together
• Semicolons separate the declarations so the browser can parse each pair
• #f0f0f0 is a hex color; it is optional for beginners but common in real CSS
• The visible sentence inside the paragraph is normal HTML text; only the style attribute changes appearance
  Avoid packing ten design decisions into one attribute on day one. Learn the syntax with two or three clear properties first.

Style on different elements

The style attribute is not limited to p. Headings, spans, and many other elements can use it the same way. That helps you see that style follows the element you attach it to — not a magical global switch.

What to notice

• The h1 color does not automatically restyle the paragraphs
• The second paragraph combines background and font size
• Inline style is local: it affects that element (and, by normal CSS rules, can influence children — but keep demos simple for now)

Inline style now, CSS later

Inline style is fast for experiments. It becomes painful when twenty pages need the same navy heading color and you must edit twenty attributes. Shared CSS — a <style> block in the document head, or an external .css file — keeps look-and-feel in one place. This course includes dedicated CSS learning ahead. For this HTML session, your job is to understand the property:value idea and to write a few correct inline examples without treating inline style as the final architecture for a whole website.

Practice in your editor

1. Create a page with one h1 and three short paragraphs.
2. Give the first paragraph a text color.
3. Give the second a background-color.
4. Give the third a combination of color and font-size.
5. Optionally color the h1 with its own style.
6. Save and refresh. Confirm each block looks different.
7. Break one example on purpose (remove a quote or a px), refresh, see the failure, then fix it.
   Working through a failed style teaches quotes and units faster than only copying perfect samples.

Mistakes that hide your styles

• Forgetting quotes around the value: style=color:red is invalid in normal HTML attribute writing
• Mixing up color (text) with background-color (behind the text) and thinking “color did nothing”
• Omitting units where size needs them (font-size: 24 instead of 24px in many beginner cases)
• Using a word processor that replaces straight quotes with curly quotes inside attributes
• Stuffing a whole page design into inline styles instead of learning shared CSS next
• Changing the file but forgetting to save before refresh — the browser still shows the old version

Summary

• The style attribute adds CSS declarations to one HTML element
• Write property: value; and keep the whole list inside quotes
• Starter properties: color, background-color, font-size
• Combine a few declarations with semicolons; keep demos short and readable
• Inline style is excellent for learning and tiny experiments, not for maintaining an entire site’s design
• Shared CSS comes next on the learning path when you want one place to control look-and-feel
• Always verify with save + refresh, and check quotes and units when styles “mysteriously” fail