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