style attribute
HTML elements can be styled in three ways. Namely:
- Inline style
- Internal style
- External style
styleHTML attributes are used for inline styling . styleAll CSS properties can be used in attributes.
Syntax
<tagname style="css-property: css-value;">content</tagname>
Set the color of text using the style attribute
colorThe text of an HTML element is colored through properties.
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML style attributes</title>
</head>
<body>
<p style="color: teal;">The color of this paragraph has been changed to teal using the style attribute.</p>
</body>
</html>
Output
The color of this paragraph has been changed to teal using the style attribute.
Set background color using style attribute
background-colorThe background color of an HTML element is set through a property.
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML style attribute</title>
</head>
<body>
<div id="ez-toc-container" class="ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title" style="cursor:inherit">Table of Contents</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-1" href="#This_is_Heading" >This is Heading</a></li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-2" href="#This_is_Heading-2" >This is Heading</a></li></ul></nav></div>
<h1 style="background-color: teal; color: black;"><span class="ez-toc-section" id="This_is_Heading"></span>This is Heading<span class="ez-toc-section-end"></span></h1>
<p style="background-color: red;">This is a paragraph.</p>
</body>
</html>
Output
This is Heading
This is a paragraph.
Setting the font using the style attribute
font-familyThe font of an HTML element is set through properties.
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML style attribute</title>
</head>
<body>
<p style="font-family: courier;">This is a paragraph.</p>
<p style="font-family: helvetica neue, Helvetica;">This is a paragraph.</p>
</body>
</html>
Output
This is a paragraph.
This is a paragraph.
Set text size using style attribute
font-sizeThe text size of an HTML element is determined through properties.
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML style attributes</title>
</head>
<body>
<p style="font-size:24px">This is a paragraph.</p>
<p style="font-size:10px;">This is a paragraph.</p>
</body>
</html>
Output
This is a paragraph.
This is a paragraph.
Set text alignment using the style attribute
text-alignThe position of the content of an HTML element is determined through properties.
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML style attributes</title>
</head>
<body>
<p style="text-align: center;">This paragraph will be centered.</p>
<p style="text-align: right;">This paragraph will be right.</p>
</body>
</html>
Output
This paragraph will be centered.
This paragraph will be right.
Chapter summary
styleAttributes are used to style HTML elements inline .colorProperties are used to set the color of the text .background-colorThe property is used to set the background color .font-familyProperties are used to set the font of text .font-sizeProperties are used to determine the size of the text .text-alignUsed to determine the location of content .
