🎓 A1Learner
🔍

HTML Styles

The style attribute adds CSS styling to one HTML element. CSS is the language that controls how a page looks.

Colour with the color property

The color property changes the colour of text. CSS spells the property color.

<p style="color:red;">Red words</p>

A background colour

The background-color property paints the area behind the text.

<p style="background-color:yellow;">Highlighted words</p>

Change the font

The font-family property picks the letter shapes for text. Verdana is the name of one font.

<p style="font-family:Verdana;">Words in Verdana</p>

Change the size

The font-size property sets how tall the text is. Its value counts pixels, the tiny dots on a screen.

<p style="font-size:30px;">Big words</p>

Align the text

The text-align property sets where a line sits across its space. The value center puts the line in the middle.

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

Several changes at once

A semicolon separates one style setting from the next. All the settings sit inside one style value.

<p style="color:blue; text-align:center;">Blue and centered</p>

Example

<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
</head>
<body>
<h1 style="color:blue; text-align:center;">My Styled Page</h1>
<p style="font-size:20px;">This paragraph has larger text.</p>
<p style="background-color:yellow;">This line has a yellow background.</p>
</body>
</html>

Key points

  • style attribute: styling written inside an element tag
  • Property: one named kind of change, like color
  • Value: the setting written after the colon in a style pair
  • Use a semicolon to separate two style settings
  • The style attribute styles one element only.

In this example, the h1 carries two settings in one style value. The color setting makes its text blue. The text-align setting centers the heading. The first paragraph sets a larger font size. The second paragraph sets a yellow background.

Note

CSS spells colour as color in every property name.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which code makes a paragraph text red?