HTML style Attribute

Last Updated : 20 May, 2026

The HTML style attribute is used to apply inline CSS directly to an element, allowing you to control its appearance such as color, font, size, and layout within the same tag.

Written as style="property: value;" inside an HTML element.
Used for quick, specific styling without a separate CSS file.
Can modify visual properties like color, font size, spacing, and alignment.

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).

Working of style Attribute

Inline styles applied via the style attribute affect only the specific HTML element and override broader CSS rules, providing element-level styling.

Commonly Used CSS Properties in the style Attribute

Color: Changes the color of the text.

<p style="color: blue;">This is a blue paragraph.</p>

Font Size: Changes the size of the text.

<p style="font-size: 20px;">This is a larger paragraph.</p>

Background Color: Changes the background color of an element.

<div style="background-color: yellow;">This is a yellow box.</div>

Text Alignment: Aligns text (left, center, right).

<h1 style="text-align: center;">This is a centered heading.</h1>

Padding: Adds space inside an element around its content.

<div style="padding: 10px;">This box has padding around it.</div>

Margin: Adds space outside an element.

<div style="margin: 20px;">This box has margin around it.</div>

Width and Height: Controls the dimensions of an element.

<div style="width: 200px; height: 100px; background-color: grey;">This box is 200px wide and 100px tall.</div>

Border: Adds a border around an element.

<p style="border: 1px solid black;">This paragraph has a border.</p>Other Types of Styling in HTML

Below are the different types of styling in HTML

1. Inline Style

Inline styling applies CSS rules directly inside an HTML tag using the style attribute. Multiple styling properties are written within the attribute, and each property is separated by a semicolon.

2. Embedded Style

Embedded or internal styles are written within the <head> section of the HTML document, inside a <style> tag. These styles only apply to the specific document where they are defined.

3. External Style Sheet

External style sheets are useful when CSS needs to be applied to multiple web pages. They store all the style rules in a separate file that can be linked to from an HTML document. There are two ways to link external style sheets:

1. Linking External Style Sheets: Linking an external style sheet connects a separate CSS file to an HTML document using the <link> tag. This allows the styles in the CSS file to be applied to the HTML elements. The href attribute points to the location of the CSS file.

2. Importing External Style Sheets: External style sheets can also be added to an HTML document using the @import rule. This tells the browser to load the CSS file. The @import statement can be used inside the <style> element in the HTML document.

Comment

Article Tags: