![[advertisement]quality hosting plans](images/banners/hosting.jpg)
How to add color to your web page
Adding color to your page can make your page more attractive, more interesting and give it a more professional appearance. In this tutorial we are going to learn how to add color to your background, text and more. Just remember to use self control when it comes to using color on your page. To much color can be as bad, if not worse, than none at all.
Hex colors
Their are 16 color names that are supported by html 4.0. Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. That means, you can type the "name" of the color into your code and it will work. Example: <body style="background-color: purple;"> All other colors you must use the Hex color. You can see a complete hex chart at w3schools or just do a search for hex chart.
Adding color to text
Change the color of your text in a paragraph or page like this. <p style="color:red;">. That's it.
Adding color to the background of your web page
The best way to add color to your web page is by using a style sheet (css file) but you can also use the in-line style attribute to make changes on individual pages.
The <body> of your page is by default white (#FFFFFF). To change the background-color of your page use the in-line style attribute. <body style="background-color: #cccccc;"> This syntax will change the background color to light Gray.
<head>
<meta name="description" content="The meta description is used to describe your web page." />
<meta name="keywords" content="keywords, another keyword" />
<link href="/css/sample-css.css" rel="style sheet" type="text/css" />
</head>
<body style="background-color:#cccccc;">
<div class="wrapper">
<div id="header">Sample Web Page</div>
<div id="left-side">Left side panel</div>
<div id="center">
<h1>This is your most important header</h1>
<p> This is a paragraph. This paragraph should capture your readers attention. The lead header and following paragraph should contain your most relevant keywords.</p>
<p> Another paragraph. </p>
</div>
<div id="right-side">Right side panel</div>
<div style="text-align:"center;" id="footer">This is your footer</div>
</div>
</body>
</html>
Adding borders
You already know how to add color to your text so we will go to adding a border and its color. I have added a blue solid border to this paragraph.
<p style="border: solid 1px #0000ff;">
As you can see, in the paragraph
above, that the text crowds the border and doesn't look as well as it
could. To remedy the problem, I have added 5 pixels of padding to the
border.
<p style="border: solid 1px #0000ff; padding:5px;">
In this paragraph, the border is red, the background-color is light gray and the font-color is black. See if you can do it. The hex color for light gray is #cccccc.
To add a form to your web page