HTML Styles — the style Attribute
Your first taste of CSS: add colour, size and alignment directly to any element with the style attribute.
What you will learn
- Apply inline styles with the style attribute
- Set colour, background, font and size
- Understand this is a preview of CSS
The style attribute
Any element can be styled with the style attribute. Inside it you write CSS as property: value; pairs.
<p style="color: blue;">This text is blue.</p>Inside the style attribute we wrote one CSS rule: color: blue;. The part before the colon (color) is what to change; the part after (blue) is the new value; the semicolon ends the rule. So this paragraph’s text turns blue, while everything else stays default.
Note: Output: This text is blue. (the words appear in blue)
The properties you will use first
| Property | Changes |
|---|---|
color | Text colour |
background-color | Background colour |
font-size | Text size (e.g. 20px) |
font-family | The typeface |
text-align | Alignment: left, center, right |
<h1 style="color: white; background-color: #4338ca; text-align: center; padding: 16px;">
CodingClave
</h1>
<p style="font-family: Georgia; font-size: 20px; color: #333;">
Styled with inline CSS.
</p>Note: You can put several styles in one style attribute — just separate each property: value pair with a semicolon ;.
Watch out: Inline styles are fine for learning and quick tests, but they get messy fast. In the CSS module you will move styles into a separate file so one rule can style your whole site at once.
Q. Inside the style attribute, how do you separate two style rules?
✍️ Practice
- Make a heading with a coloured background, white centred text, and some padding.
- Style three paragraphs with three different
font-sizevalues.
🏠 Homework
- Take your profile or any page and add inline styles to give the heading a colour and the body a readable font size.