Learn HTML Styles: How to Use HTML Style Attribute for Inline CSS with Visual Examples
Introduction
In HTML, the style attribute is a powerful way to add CSS directly to individual elements. Want to change the color, font, or size of a specific part of your webpage? The style attribute lets you apply inline CSS in just a few lines of code—no separate CSS file needed. In this guide, we'll break down how to use the style attribute with live, visual examples to see how each property affects your web page.
This guide will cover:
- How to use the
styleattribute in HTML - Applying background colors, text colors, fonts, and sizes
- Aligning text with inline CSS
- Visual examples for easy learning
Let’s get started!
The HTML Style Attribute
The style attribute allows you to apply inline CSS to an HTML element. Here's the basic syntax:
<tagname style="property:value;">
property: The CSS property you're applying (e.g., color, font-size, background-color).
value: The setting for that property (e.g., red, 16px, center).
Now, let's dive into examples of how you can style your webpage.
1. Setting Background Color with the style Attribute
The background-color property defines the background color of an element. You can use color names, hexadecimal values, or RGB.
Example 1: Setting Background Color for the Entire Page
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Output:
This is a heading
This is a paragraph.
In this example, the entire page has a powder blue background.
Example 2: Different Background Colors for Specific Elements
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Output:
This is a heading
This is a paragraph.
In this case, the heading has a powder blue background, while the paragraph has a tomato background.
2. Setting Text Color
The color property defines the color of text within an element. You can apply color names, hex codes, or RGB values.
Example: Changing Text Color
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Output:
This is a heading
This is a paragraph.
In this example, the heading text is blue, and the paragraph text is red.
3. Setting Font Family
The font-family property specifies the font to be used for an element. You can use web-safe fonts or custom fonts by specifying their names.
Example: Setting Different Fonts
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Output:
This is a heading
This is a paragraph.
In this example, the heading uses the "Verdana" font, and the paragraph uses "Courier."
4. Setting Text Size
The font-size property controls the size of the text. You can use percentage values, pixels (px), or other units like em.
Example: Changing Text Size
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Output:
This is a heading
This is a paragraph.
Here, the heading is set to 300% of its default size, and the paragraph is set to 160%.
5. Aligning Text
The text-align property specifies how text is aligned horizontally within its container. Common values are left, center, and right.
Example: Centering Text
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Output:
Centered Heading
Centered paragraph.
Both the heading and paragraph text are centered in this example.
Quick Reference for Common Inline CSS Styles
Here's a summary of the most common inline CSS properties you can use with the style attribute:
- Background Color:
background-color: color; - Text Color:
color: color; - Font Family:
font-family: font-name; - Font Size:
font-size: value; - Text Alignment:
text-align: alignment;
0 Response to Learn HTML Styles: How to Use HTML Style Attribute for Inline CSS with Visual Examples
Post a Comment