How to Add Color to HTML Pages
When color is used properly on an HTML page, it can enhance the appearance and even the usability of that page.
Too much and clashing (unrelated) color detracts from its effectiveness as a tool.
Color can be applied to most page elements of HTML.
Paragraph and heading text, horizontal lines, shadow, borders and backgrounds in the body, divisions , tables and other box type elements can all use the color or background-color attribute.
If not specified the default color for text lines and borders is black.
The default background color is white.
There are also default colors for the different states of hyperlinks.
Methods
Color can be set using different methods.
It can be defined by color name or color code.
Set inline using:
<p style="color: red"></p>
Embedded or Linked style sheet:
p {
color : #ff0000
}
Color can be set using Hexidecimal or RGB code.
div { background: black }
p { color : #ff0000 }
p { color : #ff0 } and
p { color : rgb(255, 255, 0)}
Example:
<p STYLE="color : #ade;background-color :#000">Hello world</p>
produces:
Hello world
Note: Six digit hexidecimal or RGB code give you the most variation in color choices.
Color and Browsers
It should be noted that the final word on how color displays in a browser is determined by the user's browser and the type of hardware on the viewers PC.
At one time that there were 216 colors that would display the same from browser to browser.
With today's monitors using 24 to 32 bit displays, just about any color you choose is safe.
Check our hexidecimal color code chart for standard and non standard web palette colors.
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried our Free Mobile Ready website template kit? Download Template #402 - 6 Page Kit