Table of Contents
HTML Style Attribute
HTML styles is a way to style an HTML element. The HTML style attribute is used to add styling to a specific HTML element. It is used to define the presentation of an HTML document by using CSS.
The syntax of the style attribute is as follows:
<element style="property: value;"> Text </element>Text Color
CSS color property is an HTML styles property that defines the text color of an HTML element. We can use a color code or color name as a value.
<!DOCTYPE html>
<html>
<body>
<p style="color: blue;">This is a blue text</p>
<p style="color: red;">This is a red text</p>
<p style="color: #00ff00;">This is a green text (color defined by hexadecimal color code)</p>
<p style="color: rgb(255,255,0);">This is a yellow text (color defined by RGB color code</p>
</body>
</html>We can use any CSS properties and values.
Note: You will learn more about css in this series tutorials.
Background Color
The CSS background-color property defines the background color of an HTML element. The value can be a color code or color name like the color property.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color: blue; color: white">This is a heading with a background color and text color</h1>
<p style="background-color: rgb(255,255,0);">This is a paragraph with background color</p>
</body>
</html>Font Family
The CSS font-family property defines the font of an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family: Verdana">This is a heading with defined font</h1>
<p style="font-family: Courier">This is a paragraph with another font</p>
</body>
</html>Text Size
CSS font-size property is used to define the font size of an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size: 60px">This is a heading</h1>
<p style="font-size: 30px">This is a paragraph</p>
</body>
</html>Text Alignment
The CSS text-align property is used to align text horizontally.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: left">This is left aligned</h1>
<p style="text-align: center">This is centered</p>
<h2 style="text-align: right">This is right aligned</h2>
<p style="text-align: justify">This is another paragraph text that has justified text. Browser will try to make this text justified from left and right both. More text is required to see the changes. A newspaper use this justified text, so it looks very smart in a newspaper column.</p>
</body>
</html>