Module 9: A Touch of CSS · Lesson 1 of 6
HTML style Attribute: How to Add Inline CSS
All lessons in Module 9
Goal: Change how one element looks by writing CSS in its style attribute.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
HTML says what things are. CSS says how they look, and Cascading Style Sheets (opens in a new tab) have been styling the web since 1996. The fastest way to try CSS is the style attribute, which works on any element:
<h1 style="color: tomato; text-align: center;">Hi</h1>
Inside the quotes go declarations. Each one is a property (what to change), a colon, then a value (what to change it to). A semicolon closes each declaration, so you can line up several.
Mind the punctuation. CSS uses : where HTML attributes use =. Make one typo and the browser drops that declaration without a word.
The style attribute is handy for experiments, but it styles only one element. The next lesson, on the style element and selectors, styles many at once.
The short version
style="property: value;"works on any element and styles that one element only.- A colon joins property and value. A semicolon ends each declaration.
- When one declaration has a typo, the browser skips that one and still applies the rest.
- Inline styles beat almost every stylesheet rule, so they are hard to change later.
Example
<h1 style="color: tomato; text-align: center;">Tomato Soup</h1>
<p style="background-color: lightyellow;">Ready in 20 minutes.</p>Your task
Make the lemonade stand sign stand out:
- Give the
<h1>a text color (trydarkorange) and center it withtext-align: center, both in one style attribute. - Give the price paragraph a
background-color(tryyellow).
The preview updates as you type.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<h1 style="color: tomato;" style="text-align: center;">Menu</h1>Right
<h1 style="color: tomato; text-align: center;">Menu</h1>Each attribute may appear once per element, so the browser keeps the first style and throws away the second.
Wrong
<p style="font-size: 20;">Big news</p>Right
<p style="font-size: 20px;">Big news</p>A length needs a unit such as px or rem (only 0 can go without), and the browser ignores a bare number.
Go deeper
Inline styles sit near the top of CSS priority. A declaration in a style attribute beats rules with element, class and even id selectors. Only a stylesheet rule marked !important can override it. That strength is the reason large sites avoid inline styles: one forgotten inline color can defeat a whole redesign.
You will still run into them. HTML email templates are full of inline styles, because many email clients strip out <style> blocks. JavaScript writes inline styles too, whenever code like element.style.color = "red" runs. Many animations and drag effects work that way.
Some sites block inline styles completely with a Content Security Policy (opens in a new tab), a security header that limits where styles and scripts may come from. Code that depends on style attributes can break there.
For quick experiments, open DevTools, select an element and find the element.style box at the top of the Styles panel. Whatever you type there behaves like a temporary style attribute. Try colors and sizes live, then copy the ones you like into your stylesheet.
Frequently asked questions
How do I change text color in HTML?
Use the CSS color property. For a single element, put it in the style attribute: <p style="color: crimson;">. For many elements, write a CSS rule such as p { color: crimson; }. The old <font color> tag is obsolete in HTML, so leave it in the past. Check that the color has enough contrast with the background (opens in a new tab) to stay readable.
How do I center text in HTML?
Add text-align: center to the element that holds the text, for example <h1 style="text-align: center;"> or the rule h1 { text-align: center; }. It centers the lines of text inside the element's box. The old <center> tag is obsolete. To center a whole box, like an image or a narrow column, you need other CSS, such as auto margins.
Is inline CSS bad practice?
For whole websites, mostly yes. You have to repeat inline styles on every element, you can't reuse them across pages, and they override your stylesheet, which makes them hard to change. They are fine for quick experiments, for one truly unique value, and in HTML emails, since many email programs ignore style elements. Everywhere else, use a stylesheet with classes. If you inherit markup full of inline styles, say text pasted from a word processor, HTML Cleaner (opens in a new tab) can strip them out in one pass.