HTML Styles

The style attribute lets you change how a single element looks, right from its start tag.

#Jobseeker

Find matching jobs & Auto apply with AI

Hyring
Jobseeker using Hyring to search, apply, and prepare with AI

You style an element by writing CSS property and value pairs inside the style attribute, separated by semicolons. This is called inline styling.

The style Attribute

Inline style

<!DOCTYPE html>
<html>
<body>

<p style="color:blue; font-size:18px;">A blue paragraph.</p>

</body>
</html>

Common Properties

PropertyControls
colorText color
background-colorBackground color
font-sizeSize of the text
font-familyTypeface of the text
text-alignLeft, center, or right alignment

Background Color

Coloring a whole element

<!DOCTYPE html>
<html>
<body>

<div style="background-color:#9ce56d;">A green box</div>

</body>
</html>

Text Alignment

Centering text

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Note: Inline styles are handy for a quick change, but once a page grows a separate stylesheet keeps things tidy and reusable.

Exercise: HTML Styles

How do you apply an inline style directly to a single HTML element?