Table of Contents
HTML Attributes
- Every HTML element can have attributes.
- The HTML Attribute provide additional information about an element.
- The Attributes are always Used in the start tag.
- The Attributes use name/value pairs like:
name=”value”
The HTML Style Attribute
You set additional style property by Using Style attribute.
- The style attribute give styling in HTML elements.
- The background-color attribute is use for background color.
Example of HTML style Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="background-color: green;">This is a Heading</h2>
<h3 style="background-color: red;">This is a Heading</h3>
<p style="background-color: yellowgreen;">This is a paragraph.</p>
</body>
</html>HTML Color Attribute
- The color attribute is used for text colors.
Example of HTML color attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="color: red;">This is a Heading</h2>
<h3 style="color: blue;">This is a Heading</h3>
<p style="color: green;">This is a paragraph.</p>
</body>
</html>HTML Font-Family Attribute
- The font-family attribute is used for text fonts.
Example of HTML Font-Family Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="font-family: algerian;">This is a Heading</h2>
<h3 style="font-family: verdana;">This is a Heading</h3>
<p style="font-family: sans-serif;">This is a paragraph.</p>
</body>
</html>HTML Font-Size Attribute
- The font-size attribute is used for text sizes.
Example of HTML Font-Size Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="font-size: 20px;">This is a Heading</h2>
<h3 style="font-size: 25px;">This is a Heading</h3>
<p style="font-size: 35px;">This is a paragraph.</p>
</body>
</html>HTML Text-Align Attribute
- The text-align attribute is used for text alignment.
Example of HTML Text-Align Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="text-align: left;">This is a Heading.</h2>
<h3 style="text-align: center;">This is a Heading.</h3>
<h4 style="text-align: right;">This is a Heading.</h4>
</body>
</html>