Introduction :

The HTML style attribute allows you to apply inline styles directly to individual HTML elements. With the style attribute, you can control the appearance of elements by specifying CSS properties and values. This attribute is useful when you want to apply styles to a specific element without creating an external CSS file or modifying the internal CSS.

To use the style attribute, follow these steps:

Select the HTML element to which you want to apply styles. For example, let's say you have a paragraph element <p> that you want to style.

Add the style attribute to the selected element. In this case, it would be <p style="">. The empty quotes will be filled with the CSS properties and values.

Specify the CSS properties and values within the double quotes of the style attribute. Each property-value pair should be separated by a semicolon. For example, if you want to set the font color of the paragraph to red and the font size to 16 pixels, you would write: <p style="color: red; font-size: 16px;">.

Save and reload your HTML document to see the applied styles on the selected element. The styles defined in the style attribute will override any conflicting styles defined in external or internal CSS.

It's important to note that using the style attribute for individual elements can lead to code duplication and is not recommended for larger projects. Instead, it's better to use internal or external CSS for consistent and maintainable styling across multiple elements and pages.

Example

In this example, we have a <div> element with the ID myDiv and the class myDiv. The CSS styles are defined within the <style> tags in the <head> section. The style attribute is used to define inline styles for the element.

Styling a paragraph element :

Styling a heading element

Styling an image element

Styling a link element

Styling a table element