HTML Styles
The HTML Styles style attribute is used to add styles to an element, such as color, font, size, and more.
Example
I am Red
I am Blue
I am Black
The HTML Style Attribute
The style attribute can be used to set an HTML element’s style.
The syntax for the HTML style attribute is as follows:
Background Color
An HTML element’s background color is specified using the CSS background-color attribute.
Example
Set the background color for a page to red:
<body style="background-color:red;">
<h1>This is a title</h1>
<p>This is a sentence.</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
Example
Set background color for two different elements:
<body>
<h1 style="background-color:red;">This is a title</h1>
<p style="background-color:blue;">This is a sentence.</p>
</body>
Text Color
The text color of an HTML element is specified by the CSS color property:
Example
<h1 style="color:blue;">This is a title</h1>
<p style="color:red;">This is a sentence.</p>
Fonts
The font that will be used for an HTML element is specified using the CSS font-family property:
Example
<h1 style="font-family:verdana;">This is a title</h1>
<p style="font-family:courier;">This is a sentence.</p>
Text Size
The text size of an HTML element is specified via the CSS font-size property:
Example
<h1 style="font-size:300%;">This is a title</h1>
<p style="font-size:160%;">This is a sentence.</p>
Text Alignment
An HTML element’s horizontal text alignment is specified using the CSS text-align property:
Example
<h1 style="text-align:center;">Centered Title</h1>
<p style="text-align:center;">Centered sentence.</p>
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML style attribute
HTML styles attribute tag
inline CSS
background-color
color
font-family
font-size
text-align
HTML provides a variety of ways to style web content, from inline styles to external stylesheets. Understanding these styling options is crucial for creating visually appealing and well-structured web pages.
The HTML `style` (HTML Style Attribute tag)attribute allows you to apply CSS directly to an HTML element. This is known as inline CSS and can be used to set properties like `background-color`, `color`, `font-family`, `font-size`, and `text-align`.
