HTML style Object:
- “style” is an object
- It is providing number of properties.
- “style” properties we can apply on any type of element.
- “style” properties must be placed in “quotes”
- “style” object property name and value seperates by colon( : ) .
- Syntax: style=”property:value”
Note: Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
<!DOCTYPE html>
<html>
<body>
<h2 style="color:red">I am Red</h2>
<h2 style="color:blue">I am Blue</h2>
</body>
</html>
HTML <font> Tag :
- Not Supported in HTML5.
- Use CSS instead.
- The <font> tag specifies the font face, font size, and color of text.
<!DOCTYPE html>
<html>
<body>
<p><font size="3" color="red">Hi, Hello!</font></p>
<p><font size="2" color="blue">This is Tutipy tutorials site</font></p>
<p><font face="verdana" color="green">Enjoy contents.....!</font></p>
</body>
</html>
Font setting using style object: The font-family property defines the font to be used for an HTML element
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>
</html>
Text Size : The font-size property defines the text size to be used for an HTML element
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>
</html>
Text Alignment: The “text-align” property defines the horizontal text alignment for an HTML element
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">This heading will be centered</h1>
<p>A paragraph without alignment</p>
</body>
</html>
Generally a hyperlink on the web page as follows
<!DOCTYPE html>
<html>
<body>
<a href="demo.fullstackedutech.com">HTML Tutorials</a>
</body>
</html>
But we can apply fonts and increase the size and decorate the hyper link using style object attributes
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<a href="demo.fullstackedutech.com" style="font-size:40px ; text-decoration:none">Learn HTML</a>
<p style="font-family:arial ; color:red ; font-size:20px ;">A paragraph.</p>
</body>
</html>
Setting colors to individual elements:
<!DOCTYPE html>
<html>
<body style="background-color:cyan">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
