Javascript Ajax jQuery HTML PHP Example MORE
Need a Website Or Web Application Or Any Help.Contact Us: +91 9437911966 (Whatsapp) Note: Paid Service

HTML color Tutorial with Example

HTML Colors are used to add color to text, background etc. It is defined by the predefined color name. Please see the below example to get better knowledge about color.

A color name can be color names, or RGB, HEX, HSL, RGBA, HSLA values.

Text Color

You can chnage the text color in HTML.

  1. Show a title in the browser tab
  2. To show a title for the page when it is added to favorites or bookmarked.
  3. Shows a title for the page in search engine results

Example

<!DOCTYPE html>
<html>
<body>

<h3 style="color:green;">Students Tutorial</h3>

<p style="color:brown;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>


</body>
</html>

Run it yourself

Background Color

Example

<!DOCTYPE html>
<html>
<head>
     <title>Color Example</title>
</head>
<body>
 
<h1 style="background-color:green;">HTML Tutorial</h1>
 
<div style="background-color:orange;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</body>
</html>

Border Color

In HTML you can set the border color.

Example

<!DOCTYPE html>
<html>
<body>
 
<p style="border: 2px solid blue;">Hello World</p>
 
<p style="border: 2px solid green;">Hello World</p>
 
<p style="border: 2px solid orange;">Hello World</p>
 
</body>
</html>


<link> Element

The <link> element is generally used to load the css file for both internal and external file.

Example

Style.css
      P{
          Color: red;
       }
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
 </head>
<body>

<p>Hello World!</p>

  
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
    <link rel="stylesheet" href="https://studentstutorial.com/style.css">
</head>
<body>

<p>Hello World!</p>

  
</body>
</html>


<base> Element

The HTML <base> element is used to specify a base URL for all relative links contained in the document, e.g. you can set the base URL once at the top of your page.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
   <base href="https://www.studentstutorial.com/">
</head>
<body>

<p>Hello World!</p>

  
</body>
</html>

<script> Element

The <script> element is used to specify client-side script, such as JavaScript in HTML documents.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    <script>
        document.write("<p>Hello World!</p>") 
    </script>
</head>
<body>
	<p>Script element example</p>
</body>
</html>