HTML Styles

The style attribute is your first taste of styling. It sits inside an opening tag and applies CSS directly to that single element. Color the text, change the font size, add a background, all with one attribute. It is the fastest way to make a page look less plain.

The pattern is always the same. Inside the quotes you write one or more rules separated by semicolons. Each rule is a property, a colon, and a value, like color: red or font-size: 20px. Miss the colon or the semicolon and the rule is ignored, which is the most common beginner mistake.

Inline styles are easy but not reusable. Ten paragraphs that should look identical mean ten copies of the same style, and changing the look later means editing every one. Real sites keep CSS in separate files, where one rule can style every paragraph on the whole site. Inline styles stay useful for quick experiments.

Three properties to start

Three properties cover most beginner needs. Color changes the text, background-color fills the area behind it, and font-size changes the size of the letters. Combine them in one style attribute, each rule separated by a semicolon, and the element gets all three at once.

<p style="color: white; background-color: #2563eb; font-size: 22px;">Styled text</p>

Inline, internal, external

CSS can live in three places. Inline styles sit on the tag itself. Internal styles sit in a style tag inside the head. External styles sit in their own .css file, linked from the head. External CSS is what real websites use because one file can style the whole site, while inline styles win every argument because they sit closest to the element.

<style>
  p { color: green; }
</style>

Syntax

<p style="color: #2563eb;">This text is blue.</p>

<p class="alert"> // + .alert{color:red} in stylesheet