HTML style Tag

HTML <style>Tag: The HTML<style> tag specifies the information about styles of a HTML document. And each HTML document can contain multiple <style> tags. This modification includes changing font size, font family, font color etc. Not only the texts but also we can change the style of a body ar part of a page.

HTML<style>Tag

This HTML style tag supports both the global and the event attributes.

Syntax: <tagname style=”property:value;”>

  • The tagname includes <p>, <body>, from <h1> to <h6> etc.
  • The property is borrowed from CSS like color, font-size, font-family, etc
  • The value is also borrowed from CSS.

Browser compatibility

The HTML<style> tag is supported by different types of browsers.

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Internet Explorer

HTML Font Family

The font family changes the font style of a text and can be used in any text writing tag like <p> or heading tag. And these font families include all the names that you find in Microsoft Office or any other writing-based software.

Example:

<html> 
<head> 
    <title>Font Family</title> 
</head> 
<body> 
    <h1 style="font-family:commanders;">Hello Freshersnow</h1> 
    <h2 style="font-family:Chaparral Pro Light;">Hello Freshersnow</h2> 
    <h3 style="font-family:algerian;">Hello Freshersnow</h3> 
    <p style="font-family:Castellar;">Hello Freshersnow</p> 
</body> 
</html>

Output:

html style tag

HTML Font Size

The font size changes the size of a text and this can also be used in any text writing tag like <p> or heading tag. The units can be given in “%” or pixels or other units can also be included.

Example:

<html> 
<head> 
    <title>Font Family</title> 
</head> 
<body> 
    <h1 style="font-size:80%;">Hello Freshersnow</h1> 
    <h2 style="font-size:150%;">Hello Freshersnow</h2> 
    <h3 style="font-size:20px;">Hello Freshersnow</h3> 
    <p style="font-size:30px;">Hello Freshersnow</p> 
</body> 
</html>

Output:

html style tag

HTML Font Color

The font color tag changes the color of a text and can be used in any text writing tag like <p> or heading tag. We can use both names of the colors or also the color codes that are mainly used in Photoshop. For various color codes or to pick from various color, ranges refer to HTML Color Codes.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:green;}
</style>
</head>
<body>
<h1>Freshernow!!</h1>
</body>
</html>

Output:

html font color

Attributes that are supported by the <style> tag

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text Specifies the media type of the style tag