HTML style Tag
The HTML <style> tag is used to define inline styles within an HTML document. It allows you to apply CSS (Cascading Style Sheets) rules directly to specific HTML elements or groups of elements.
Here’s an example of how the <style> tag can be used:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 18px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph with inline styles.</p>
<p class="highlight">This paragraph has the "highlight" class.</p>
</body>
</html>In the above example, the <style> tag is placed within the <head> section of the HTML document. Inside the <style> tag, CSS rules are defined to specify the styles for various HTML elements.
In the first CSS rule, the <p> selector is used to target all <p> elements in the document. The color property sets the text color to red, and the font-size property sets the font size to 18 pixels.
The second CSS rule uses the class selector (.highlight) to target elements with the “highlight” class. It applies a yellow background color and bold font weight to the elements that have this class.
Within the HTML body, you can see two <p> elements. The first paragraph is styled using the CSS rules defined for the <p> selector. The second paragraph has the “highlight” class applied to it, and it inherits the corresponding styles defined in the .highlight CSS rule.
By using the <style> tag, you can define inline styles directly within your HTML document. While inline styles can be useful for quick styling adjustments, it is generally recommended to separate the CSS into an external stylesheet for better organization, reusability, and maintainability.