HTML Styles
On this page
HTML Styles
The HTML style attribute is used to apply inline CSS to an element, such as colors, fonts, sizes, and alignment.
Example
<p style="color: green;">This text is green.</p> <p style="color: purple;">This text is purple.</p> <p style="font-size: 24px;">This text is larger.</p>
The HTML Style Attribute
The style attribute allows you to set CSS properties directly on an HTML element.
<tagname style="property: value;">
The property is a CSS property, and the value defines how it should be applied.
Background Color
The background-color property sets the background color of an element.
<body style="background-color: lightgray;"> <h1>Page Title</h1> <p>Introductory text.</p> </body>
Background Color on Elements
You can apply different background colors to individual elements.
<h2 style="background-color: lightblue;">Section Heading</h2> <p style="background-color: peachpuff;">Highlighted paragraph.</p>
Text Color
The color property defines the text color of an element.
<h1 style="color: navy;">Dark Blue Heading</h1> <p style="color: darkred;">Dark red paragraph.</p>
Fonts
The font-family property defines which font is used to display text.
<h1 style="font-family: Arial, sans-serif;">Sans-serif Heading</h1> <p style="font-family: 'Times New Roman', serif;">Serif paragraph.</p>
Text Size
The font-size property controls the size of the text.
<h2 style="font-size: 200%;">Large Heading</h2> <p style="font-size: 14px;">Smaller paragraph text.</p>
Text Alignment
The text-align property sets the horizontal alignment of text.
<h2 style="text-align: right;">Right Aligned Heading</h2> <p style="text-align: justify;">This paragraph is justified across the width.</p>
Summary
- Use the
styleattribute to apply inline CSS. - Use
background-colorto set background colors. - Use
colorto change text color. - Use
font-familyto define fonts. - Use
font-sizeto control text size. - Use
text-alignto align text.
Inline Text Color