HTML Styles
The HTML style attribute allows CSS to be applied directly within HTML tags. This enables styling of an element without the need for an external CSS file or a <style> block. It provides a quick, inline way to apply styles to individual elements.
Usage and Syntax
The style attribute can be added to any HTML element. Its value is a series of CSS property and value pairs, formatted as "property: value;". Multiple pairs must be separated by semicolons.
Syntax
<tagname style="property: value;">
Content goes here
</tagname>
- tagname: This is the HTML element to which you want to apply styles (like <p>, <div>, <h1>, etc.).
- property: This is the style property you want to change (e.g., color, font-size, background-color).
- value: This is the value that defines how the property should look (e.g., red, 16px, #00FF00).
Key Characteristics
- Inline Styling: It affects only the specific element where it is applied.
- Overrides: Styles defined using the style attribute take precedence and override any styles set globally in a <style> tag within the <head> or in an external CSS file.
- Specific Styling: It is useful for applying unique styling to a single element without affecting others of the same type.
Example
Run Code<!DOCTYPE html>
<html>
<body>
<p style="color:blue; font-size:18px;">
This paragraph has blue text and a font size of 18 pixels.
</p>
<h1 style="color:red;">
This heading has red text.
</h1>
</body>
</html>