HTML colors, text, background and border
HTML Tutorial » HTML colors, text, background and border
HTML colors are used to give a specific web page design, highlight certain words or paragraphs, a proper contrast, etc.
HTML colors are specified using color name, RGB, HEX, HSL, RGBA and HSLA value.
Syntax:
HTML background color - using inline CSS
HTML text color - using inline CSS
HTML border color - using inline CSS
<body bgcolor="value">
HTML text color - using inline CSS
<div style="color:value">your text here text color</div>
HTML border color - using inline CSS
<div style="border: value "> your text here </div>
HTML background color - using inline CSS - examples
All you have to do is search the table with names and color codes in this lesson, choose one you like and write its name or code in the bgcolor attribute.
Let's have an example: using <body bgcolor="value">.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML background color</title>
</head>
<body bgcolor="#CCCCFF">
<h1> HTML background color</h1>
<p>In this lesson you will have color codes at the end of this page </p> <br />
<strong> Here we have a strong Paragraph </strong> <br />
<em> Here we have an italic Paragraph </em> <br />
<a href="https://www.agernic.com/html-tutorial.html">Visit our HTML tutorial - this is a link</a> <br />
</body>
</html>
Note: In the above example I used inline CSS, but it is better to avoid and use external CSS
Note: HTML colors supports 140 standard color names.
Note: HTML colors supports 140 standard color names.
Related subjects:
HTML Font Color
HTML Text Color
<div> box border color
HTML text color - using inline CSS
To put a text in a certain color can be done in several ways, as:
1. inside a paragraph <p> text here </p>,
2. inside a box <div> text here </div>
Let's have an example using:
<p style="color:value">your text here text color</p>
<div style="color:value">your text here text color</div>
Example
<!DOCTYPE html>
<html>
<head>
<title> Colored HTML text</title>
</head>
<body>
<h1>Colored HTML text</h1>
<p style="color:green"> your description here colored in green </p>
<div style="color:red"> your description here colored in red </div>
</body>
</html>
Note: In the above example I used inline CSS, but it is better to avoid and use external CSS
More examples for a better understanding text color
Example
<!DOCTYPE html>
<html>
<head>
<title> Colored HTML text</title>
</head>
<body>
<h1>Colored HTML text</h1>
<p style="background-color:rgb(255, 99, 71);"> your description here RGB colored </p>
<p style="background-color:#ff6347;"> your description here HEX colored </p>
<p style="background-color:hsl(9, 100%, 64%);"> your description here HSL colored</p>
<div style="color:red"> your description here colored in red </div>
</body>
</html>
HTML border color - using inline CSS
To put border color to a text can be done in several ways, as:
1. border inside a paragraph <p> text here </p>,
2. border for a box <div> text here </div>
Let's have an example using:
<p style="color:value">your text here text color</p>
<div style="color:value">your text here text color</div>
例
<!DOCTYPE html>
<html>
<head>
<title>HTML border color - using inline CS</title>
</head>
<body>
<h1>HTML border color - using inline CS</h1>
<p style="border: 2px solid red; "> your text here red color </p>
<div style="border: 2px solid #0C6; "> your text here green color </div>
</body>
</html>
Note: In the above example I used inline CSS, but it is better to avoid and use external CSS
THE most important colors that are recognized by most browsers:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML colors, Text color, Border Color, background color
HTML colors, background, text and border color - html tutorial
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.