How to Use a Dark Background on Web Pages

Enable a dark background color with a few lines of HTML code.

Unless the designer specifically chooses otherwise, all web browsers display web pages with white or gray backgrounds by default. Similarly, hypertext and links are displayed in black and light blue unless alternate colors are selected. Overwriting these defaults and selecting your own is a quick process involving minor edits to your page's HTML code and the insertion of a few Cascading Style Sheet (CSS) style rules.

Difficulty:

Moderately Easy

Instructions

1. Open your web page. If you use a visual editing program such as Microsoft FrontPage or Microsoft Expression Web, open your page and change your editing view to Code View. This shows you the HTML code that controls the content and appearance of your page. If you use a text editor such as Notepad, open your page in the program.

2. Locate the </head> tag near the top of your web page code. Press the "Enter" key to insert a blank line directly above the tag.

3. Copy and paste the following two lines of code onto the blank line you added in the previous step:

   <style type="text/css">
   </style>

   This code tells the web browser to look for style rules that affect the look and feel of your page.

4. Press the "Enter" key to insert a blank line directly above the </style> tag you added in the previous step. Copy and paste the following two lines of code onto the blank line:

   body { background-color: black; color: white }
   a { color: orange }

   These change the background color of your page to black, the text color to white, and the hyperlink color to orange. Adjust these colors to suit the needs of your design.

5. Save your web page and open it in your browser. Your page now has a dark background, with light-colored text and links to provide sufficient contrast and readability.

References

• CSS Property: "How CSS Style Sheet Can Be Inserted in Web Page"
• W3 Schools: "CSS Background"