Dofactory.com
Login Sign up
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML style Attribute

The style attribute on an element assigns a unique style to that element.

Its value is CSS that defines the appearance of the abbreviation.

Example

#

A style attribute on an <article> element.

Henri Matisse

Henri Émile Benoît Matisse was a French artist, known for both his use of colour and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter. Matisse is commonly regarded, along with Pablo Picasso, as one of the artists who best helped to define the revolutionary developments in the visual arts throughout the opening decades of the twentieth century, responsible for significant developments in painting and sculpture. 

<article style="padding: 30px; background-color: #f6f8ff;">
  <h3>Henri Matisse</h3>
  <p>
    Henri Émile Benoît Matisse was a French artist, known for 
    both his use of colour and his fluid and original 
    draughtsmanship. He was a draughtsman, printmaker, 
    and sculptor, but is known primarily as a painter. 
    Matisse is commonly regarded, along with Pablo Picasso, 
    as one of the artists who best helped to define 
    the revolutionary developments in the visual arts 
    throughout the opening decades of the twentieth century, 
    responsible for significant developments in painting 
    and sculpture.
  </p>
</article>

Using style

The style attribute specifies the styling rules for the HTML element.

Styles in a style attribute override styles from external class and style definitions.

This attribute is useful when a unique style should be given to a particular element.

The style attribute is global, meaning it can be applied to any HTML element.

Tip: The style attribute does not support the use of pseudo-elements and pseudo-classes.
For that you need to use an external stylesheet or internal <style> element.

Syntax

<a style="CSS-styles">

Values

#

Value Description
CSS-styles One or more CSS property/value pairs separated by semicolons (;).

More Examples

A style attribute that assigns a thick border to the <audio> player.
Clicking the button toggles the border color. 



<audio id="myaudio"
       style="border:10px solid lightsalmon;
              border-radius: 50px;"
       controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
</audio>

<br/><br/>
<button onclick="toggle();">Toggle style</button>

<script>
  let toggle = () => {
    let element = document.getElementById("myaudio");

    if (element.style.borderColor === "lightsalmon") {
       element.style.borderColor = "turquoise";
    } else {
       element.style.borderColor = "lightsalmon";
    }
  }
</script>

Code explanation

The style attribute assigns a thick colored border to the <audio>.

Clicking the button calls JavaScript which changes the border color of the element.

Elements using the style attribute

The style attribute is a global attributes that can be applied to any element.
Click any tag for an example of that element using the style attribute.

Tag with style Description
<a> Creates a link (hyperlink) to another page
<abbr> Defines an abbreviation
<address> Specifies contact information for the page's author
<article> Defines a container for independent and self contained text
<aside> Creates a content area that is related to the primary content on a page
<audio> Creates a player for sound such as music, sound effects, or others
<b> Specifies bold text
<blockquote> Defines a section with text quoted from another source
<body> Specifies a container for the page's content with text, links, images, etc.
<button> Creates a clickable button that can contain text or an image
<canvas> Creates a graphics container where JavaScript can draw.
<caption> Specifies a caption for a table
<code> An element that is used to display computer code
<col> Specifies column properties for a table
<dd> Adds a description of a term or name to a <dl> element
<del> Marks deleted text
<details> A control that can show and hide additional details
<div> Creates a division or section on a page
<dl> Defines a description list
<dt> Adds a term or name to a <dl> element
<em> Marks text that needs emphasis
<embed> Creates a container for an external resource or plug-in
<fieldset> Groups related form elements and displays a box with a legend around these
<figcaption> Adds a caption to a <figure> (image) element
<figure> Displays self-contained content, usually an image
<footer> Defines a footer section on a page or a section of a page
<h1>-<h6> Defines text headings in 6 different sizes
<header> Defines a header section on a page or a section of a page
<hr> Creates a horizontal line
<i> Specifies italic text
<iframe> Creates a frame in which another web page can be embedded
<img> Creates an image
<input> Creates an input field in which data can be entered
<ins> Marks inserted text
<kbd> Specifies keyboard input often with CTRL, SHIFT, or ALT
<label> Creates a label or brief description before input elements
<legend> Defines a caption for a fieldset
<li> Defines a list item. Used in <ol> and <ul> elements
<main> Specifies a container for the main content of the page
<mark> Displays marked or highlighted text
<meter> Creates a measurement control, like a guage
<nav> Creates a container for navigation links
<object> Embeds external objects in a page, such as, audio, video, image, or PDF
<ol> Creates a numerically or alphabetically ordered list
<optgroup> Groups related options in a <select> element (dropdown control)
<option> Adds an item to a <select> element (dropdown control)
<output> Displays output results of a calculation
<p> Creates a paragraph
<picture> Adds images with a bit more flexibility than the <img> element
<pre> Displays pre-formatted text in fixed-width font -- usually computer code
<progress> Creates a control that displays progress of a task
<q> Creates a short quotation enclosed with quotation marks
<samp> Displays sample output from coumputer code
<section> Defines a piece of content that can stand on its own
<select> Creates a dropdown control
<small> Displays text in a smaller font size
<span> Container for one or more inline text elements
<strong> Indicates text that is important or with high urgency
<sub> Marks subscript text where characters display lower and in smaller font
<summary> Adds a heading to a <details> element. Clicking it toggles the details
<sup> Marks superscript text where characters display higher and in smaller font
<svg> Creates an vector image
<table> Creates an HTML table with rows and colums, much like a spreadsheet
<tbody> Marks the table body in an HTML table
<td> Creates an HTML table cell
<textarea> Creates a multi-line text input control, for example for messages
<tfoot> Marks the table footer in an HTML table
<th> Creates an HTML table header cell
<thead> Marks the header rows in an HTML table
<time> Creates a human-readable date/time item
<tr> Creates a table row with either <th> or <td> elements
<u> Specifies underlined text
<ul> Creates an unordered, bulleted list
<var> Defines its content as a variable
<video> Creates a video player on a page

Browser support

Here is when style support started for each browser:

Chrome
 1.0 Sep 2008
Firefox
 1.0 Sep 2002
IE/Edge
 1.0 Aug 1995
Opera
 1.0 Jan 2006
Safari
 1.0 Jan 2003

You may also like




Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides


On this page