The HTML style attribute allows inline CSS to be applied directly to an HTML element, affecting its presentation without requiring external stylesheets. It can include various CSS properties, such as color, font-size, and background-color, to control the element's appearance. While convenient for quick styling, overusing inline styles can make maintenance difficult, so it's generally recommended to use external or internal stylesheets for larger projects.
Examples:
<p style="color: blue; font-size: 18px;">This text is blue and 18px in size.</p>
<div style="background-color: yellow; padding: 10px;">
This div has a yellow background and 10px padding.
</div>
<button style="border: 2px solid red; border-radius: 5px;">
This button has a red border and rounded corners.
</button>
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Tutorial</title>
</head>
<body>
<h1>HTML Style Attribute</h1>
<p>The style attribute is used to add styles to an element, such as color, font, size, and more.</p>
<p style="color: blue; font-size: 18px;">This text is blue and 18px in size.</p>
<div style="background-color: yellow; padding: 10px;">
This div has a yellow background and 10px padding.
</div>
<button style="border: 2px solid red; border-radius: 5px;">
This button has a red border and rounded corners.
</button>
</body>
</html>
The Output of the above code:
HTML Style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
This text is blue and 18px in size.