CSS controls how HTML looks. The quickest way to try it is the style attribute, which applies CSS to one element.
index.html
HTML
<h1 style="color: #b84624; font-size: 32px;">Juniper Books</h1>
<p style="color: #49454f;">Open every day.</p>A style is written as property: value;. Separate several declarations with semicolons.
When inline CSS is useful
- Quick experiments while you learn.
- A single style that depends on data, such as a progress bar’s width.
- Emails, where other CSS options are limited.
Why not use it everywhere?
- You repeat the same style on every element.
- Changing a design means editing many places.
- Inline styles override stylesheets, which makes later changes hard.
warning
Styling the whole site inline
If you find yourself copying the same
style="..." onto many elements, move the rules into a stylesheet and use a class. You will learn how in Internal CSS and External CSS.