Have you ever visited website where the colors don’t match? People are attracted to colors so if your web page colors are unattractive it may affect the retention rate of your visitors. Site owners may fall love with a particular color they like however it may turn off their visitors. When designing a website choose colors that suit your products or services then ask for opinions from other people before you begin building the actual site.
How to add color to an HTML web page in 4 different ways
1. Edit HTML
If you want to change the background color of an HTML page simply open it with your web editing software. A professional web designer would either use website editing software such as Dreamweaver or hand code the HTML in Notepad.
- Place your cursor after the head tag and type body bg>
- Choose your favorite color e.g. #003399 will give you a dark blue background.
- Save the web page by clicking on file — save.
- Open your web browser to view the new web page color
- Upload your HTML page to the server
2. Use a cascading style sheet(CSS)
CSS is a popular way to change the design of your web page without affecting the HTML. This keeps the design separate from your content. To change the background color of your web page simply enter the color you wish to use in your style sheet
body background-color: #00CC66;
- This will make the background color of your web page a light green.
- Save the file as style.css
- Code the CSS file into your web page between the head tags at the top of your page
link href=”style.css” rel=”stylesheet” type=”text/css”
This creates an external style sheet which allows you to change the color or any of your design elements by editing one file. There is no need to edit any HTML of your web pages.
3. Create background image
A background image allows a lot of design flexibility to create gradients or a mixture of colors within the image. The best way to achieve this without editing your HTML is to use CSS.
body background-image: url(images/gradient.gif);
background-position: 280px 440px;
The above CSS code shows an image called gradient.gif that doesn’t repeat on the page. This means the image will serve as a background to the web page. The background position denotes where the image is positioned on the page.
4. In-line CSS
If you don’t wish to use a CSS style sheet to change the background colors you can code the CSS directly into the HTML code.
body url(images/gradient.jpg);background-repeat: no-repeat;background-position: 280px 440px;”
Sidebar: place < at the beginning of the above code and > at the end.
You can use CSS to change the color of your font, background of a single line, paragraph, images, navigation, links etc.
Whether you’re designing a new website, redesigning your current one or wish to change the color of some of your design elements use CSS to quickly and easily make design changes.