HTML Style

In HTML Style are mainly used for color of elements like font , text, size, etc. Style attribute basically describe the how a document will be presented in a browser.

There are three ways of implementing style in HTML :

Inline Style
Embedded Style or Internal style
External Style Sheet

1) Inline Style

For Inline style , According to CSS rules are directly written inside the starting tag using the style attribute. The style attribute includes a ' property : value ' separated by a semicolon ( ; ).

Example

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

	<h1 style="color:Blue;font-size:25px;">
		Example of Inline Style
	</h1>

	<p style="color:red;">First paragraph</p>

	<p style="color:green;font-size:40px;">
		Second paragraph
	</p>

	<hr style="border-color:orange;">

</body>

</html>

Output

Example of Inline Style

First paragraph

Second paragraph

2) Embedded Style or Internal style

Internal style is defined in the <head> section of an HTML like in Example.

Example

 <!DOCTYPE html>
<html lang="en">
  
<head>
    <style type="text/css">
         h1 {
            color: green;
            font-family: arial;
        }
          
        p {
            color: red;
            font-family: verdana;
        }
    </style>
</head>
  
<body>
    <h1>Example of Embedded Style</h1>
    <p>First paragraph.</p>
</body>
  
</html>

Output

Example of Embedded Style

First paragraph.

3) External Style Sheet

External Style Sheets method is used to separate document that you can link from an HTML file on your site.

Example

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" 
            href="/html/css/externalstyle.css">
</head>
<body>
    <h3>Example of Linking External Style Sheet</h3>
    <p>First paragraph.</p>
</body>
</html>

Where externalstyle.css is File name which hold the all css code.

Next TopicHTML Title

← prev next →

HTML Tutorials

HTML Tags

HTML5 Tutorial

HTML Style

There are three ways of implementing style in HTML :

1) Inline Style

Example

Output

Example of Inline Style

2) Embedded Style or Internal style

Example

Output

Example of Embedded Style

3) External Style Sheet

Example