Using the HTML Style Attribute for Inline CSS

The style attribute provides a way to apply CSS (Cascading Style Sheets) rules directly to a single HTML element. This is known as "inline styling." While it's useful for quick, specific adjustments, for larger websites, it is generally recommended to use external or internal stylesheets for better organization and maintainability.

The syntax is straightforward: <tagname style="property:value;">, where 'property' is a CSS property (like color) and 'value' is the desired CSS value.

Background Color

The background-color property is used to define the background color of an element. You can apply it to the entire page body or to specific elements like <div> and <h1> to highlight specific sections.

This is a heading

This is a paragraph.

Text Color

To change the color of the text itself, use the CSS color property. This is one of the most fundamental styling adjustments for making text readable and visually appealing.

This is a blue heading

This is a red paragraph.

Fonts

You can change the typeface of your text using the font-family property. It's a good practice to provide a list of "fallback" fonts in case the user's browser does not support the first choice.

This Heading is in Verdana

This paragraph is in Courier.

This heading is 300% bigger

This paragraph is 160% bigger.

Text Alignment

The text-align property controls the horizontal alignment of text within an element. Common values are left, right, and center.

Centered Heading

This paragraph is also centered.

Chapter Summary

Use the style attribute to add inline styles to HTML elements.
Use background-color to change the background of an element.
Use color to change the text color.
Use font-family to change the text font.
Use font-size to change the text size.
Use text-align to set the horizontal alignment of the text.

HTML Styles