HTML Styles with Examples

HTML Style defines as the Attribute Tag which decides the look of the HTML Document by changing its color and fonts and background of the webpage. let us understand HTML Style in detail.

HTML Style features

HTML Style modifies and aligns the Elements by changing the font size of HTML text.
HTML Style works more on CSS which explore several types of display features.
Style Enhance the property of HTML Element.
HTML Styles are case sensitive .

Syntax of HTML Styles

<tag style=”property: value;”>

HTML Style start with open bracket tag with the attribute properties with colon and values with semicolon double quoted and end with closing tag .

Example of HTML Styles

Eg.1 Inline HTML Style: It is used for relevant elements in HTML.

<!DOCTYPE html> 
<html> 
<head> 
  
</head> 
<body> 

  <h1 style="color:Blue;font-size:25px;"> 
    THIS IS Inline  
  </h1> 

  <p style="color:red;">PROPERTY OF INLINE STYLE</p> 


</body> 

</html>

Output :

Eg.2 Internal HTML Style: It is used to give look to many HTML webpages.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: maroon;}
h1   {color: yellow;}
p    {color: WHITE;}
</style>
</head>
<body>

<h1>this is internal HTML Style</h1>
<p>HAPPY LEARNING.</p>

</body>
</html>

Output :

Eg.3 External HTML Style: It is used to give the same look to many HTML webpages.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>this is codedec</h1>
<p>HAPPT LEARNING.</p>
 <p class = "red">This is red</p>

</body>
</html>

Output :

Eg.4 HTML Style Border color :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  border-style: solid;
  border-color: coral;
}

</style>
</head>
<body>

<h1>learning is fun</h1>

</body>
</html>

Output :