AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

HTML colors, text, background and border color

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.

HTML colors specified by name for background of item


HTML colors are specified using predefined color names as: LightGrey, Gold, Tomato, Orange, Blue, DodgerBlue, Green, MediumSeaGreen, Gray, Blue, SlateBlue, Violet, LightGray, Black etc. In the next example we give background color for div box.

Example 1:
<div style="height:100px; width:250px; color:#000000; background:Gold"> background color for this box it is Gold</div>
<div style="height:100px; width:250px; color:#000000; background:DodgerBlue"> background color for this box it is DodgerBlue </div>
Note: HTML colors supports 140 standard color names.

Text color and border color

You can set up text color inside box with different background color and differen border.
Example2:
<h1 style="color:Brown;">Hello World. This text is brown color</h1>
<p style="color:DarkCyan; border:2px blak;">Hello World. This text is DarkCyan color with blak color border</p>
<div style="color:DarkRed;">Hello World. This text is DarkRed color inside div box</div>
2. External style for html div text color.
Example 3: named index.html and we add external file named style.css in Example 4.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>this box is background-color:red, blak border with FloralWhite color text</div>
</body>
Example 4 named style.css
div
{
height:150px;
width:450px;
background-color:red;
color: FloralWhite ;
border:2px blak;
}

HTML Color Values

The HTML div style class attribute is used to define equal styles for item with the same class name.
So, all HTML div style class item with the same attribute will have the same format and style.
Here we have three HTML <div> class elements that point to the same class name:
Example 5:
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
The result:

The same background color but in different RGB values

The same background color but in different RGB values and different text color

The same background color but in different RGB values with different text color


HTML colors, Text color, Border Color, background color
HTML colors, background, text and border color - html tutorial

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


HTML Img Background
HTML Image Link
HTML Image Size
HTML Text Style
HTML Text Align
HTML Text Size
HTML Text Color Style
HTML Text Color
HTML Table Color
HTML Table Row Colspan
HTML Table Width
HTML Table Style
HTML Table Border
HTML Table
HTML Font Face
HTML Font Size
HTML Font Color
HTML Headings
HTML div border color
HTML div class
HTML class container
HTML form action
HTML comment
HTML link new tab
HTML link underline
HTML link tag
HTML button action
HTML button onclick
HTML button link
HTML table style
HTML image
HTML colors
HTML div style
Text, paragraf in HTML
HTML Tags Attributes
HTML - Elements
HTML Introduction
Home HTML Tutorial
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.