HTML
📌 What Are HTML Styles?
1. The style Attribute
In HTML, you can apply styles directly to elements using the style attribute. It is written inside the opening tag in this format:
<h1 style="color:blue;">This is a heading</h1>Here, color is the CSS property and blue is its value.
This approach is called inline styling, because the style is applied directly inside the HTML element. While it’s useful for quick changes or testing, it is not the best method for large projects. In most cases, styles should be managed using CSS files.
2. Background Color
The background-color property is used to set the background color of an element.
Example (entire page background):
<body style="background-color:powderblue;">
</body>
Each element can have its own background color.
3. Text Color
The color property changes the color of the text.
<h1 style="color:blue;">Heading</h1>
<p style="color:red;">This paragraph contains red text.</p>
4. Font Family
The font-family property defines which font is used to display the text.
<h1 style="font-family:verdana;">Heading</h1>
<p style="font-family:courier;">This paragraph uses Courier font.</p>
5. Font Size
The font-size property controls how large or small the text appears.
<h1 style="font-size:300%;">This heading is large</h1>
<p style="font-size:160%;">This paragraph is larger than normal.</p>
You can use percentages, pixels, or other units to adjust the size.
6. Text Alignment
The text-align property is used to align text horizontally.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph text.</p>
Text can be aligned to the left, right, or center.
Summary
- The style attribute allows you to add CSS directly to HTML elements
- background-color sets the background color
- color changes text color
- font-family defines the font
- font-size controls text size
- text-align aligns text