style

Anonymous contributor's avatar
Anonymous contributor
Published Feb 27, 2023Updated May 21, 2024
Contribute to Docs

The style attribute specifies how an element will render in a web browser, e.g., the color or size of a font in a paragraph.

When the style attribute is used inline, it overrides any styles set globally.

Note: The styling of a page or elements on the page can also be embedded in the <head> element using the <style> tag. However, it is more common to style elements through an external CSS style sheet, which helps keep the code clean and more easily maintained. The syntax for using an external style sheet can be seen in the <link> entry.

Syntax

<element_tag style="property1:value; property2:value;"></element_tag>

Like all global attributes, the style attribute supports all HTML tags and can take many properties, e.g., the style attribute can be used in the <p>, <h1>, or <hr> tags.

Example

In the example below, the <p> element is given a style attribute to specify its color, text alignment, and font size:

<p style="color:green; font-size:20px; text-align:center;">
  Here's some text that is being styled using the style attribute.
</p>

The example above results in the following output:

Style Attribute Example

All contributors

Contribute to Docs

Learn HTML on Codecademy