HTML Styles

HTML Styles

The style attribute lets you paint individual pieces of your page with inline CSS. Think of it as giving one specific LEGO brick a special color.

The style attribute

Every element can have a style attribute with CSS rules inside. Each rule is property: value;.

<p style="color: red;">This text is red.</p>

Background color

Paint the background of an element:

<p style="background-color: lightblue;">I have a blue background.</p>

Text color

Change the color of the text:

<h1 style="color: green;">Green title</h1>

Fonts

Change the font family and size:

<p style="font-family: verdana;">Verdana text</p>
<p style="font-size: 20px;">Bigger text</p>

Text alignment

Move text left, center, or right:

<p style="text-align: center;">Centered text</p>

Putting it all together

<p style="background-color: powderblue; color: navy; font-size: 18px; text-align: center;">
  Look at me, I'm styled!
</p>

Tip: styles vs stylesheets

The style attribute is for quick, one-off tweaks. For bigger projects, use a separate CSS file. But for learning, inline styles are a great start!

TL;DR

• style attribute holds CSS rules: property: value;.
• Common properties: color, background-color, font-family, font-size, text-align.
• Separate each rule with a semicolon.
• Use inline styles for quick tweaks.