HTML Style Attribute

View HTML Tutorial

The style attribute in HTML allows you to apply inline styles to individual elements. This means you can specify styling directly within the HTML tag rather than in a separate CSS file. The syntax for the style attribute is as follows:

				
					<tagname style="property: value;">
  Content
</tagname>

Here’s a breakdown of the key components:

tagname: Replace this with the HTML tag you want to style (e.g., p for paragraphs, div for divisions, h1 for headers, etc.).
style: This is the attribute name. It tells the browser that you are going to provide styling information.
property: Replace this with the specific CSS property you want to apply (e.g., color, font-size, background-color, etc.).
value: Replace this with the desired value for the CSS property.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Style Attribute Example</title>
</head>
<body>

  <!-- Example: Applying styles to a paragraph -->
  <p style="color: blue; font-size: 18px; font-family: 'Arial', sans-serif;">
    This is a styled paragraph.
  </p>

  <!-- Another example: Applying styles to a heading -->
  <h2 style="color: green; text-align: center;">
    Centered Heading with Green Color
  </h2>

</body>
</html>

In this example, the style attribute is used to apply styles directly to a paragraph (<p>) and a heading (<h2>). Multiple styles are separated by a semicolon.

Common Styling Properties:

Here are some common CSS properties you can use with the style attribute:

color: Text color
font-size: Font size
font-family: Font family
background-color: Background color
text-align: Text alignment
margin, padding: Spacing around the element
border: Border around the element

Conclusion

Remember that while the style attribute is convenient for quick styling, it’s often recommended to use an external CSS file for larger projects to maintain a clear separation of structure and presentation. The style attribute is useful for small-scale styling within individual HTML tags.

Browse

View HTML Tutorial