Making text show up as white on a black background can be useful for creating high contrast pages that are easier to read. There are a few different ways to achieve this effect using HTML and CSS.
Using CSS
The easiest way is to use Cascading Style Sheets (CSS) to set the background color and text color. Here is an example:
<!DOCTYPE html> <html> <head> <style> body { background-color: black; color: white; } </style> </head> <body> <p>This text will be white on a black background.</p> </body> </html>
The key points are:
- Set the
background-color
of thebody
to black - Set the
color
of thebody
text to white
This will make all text inside the <body>
tags white. You can also target specific elements to have a white text color:
<p style="color: white;">This paragraph will be white</p>
Using HTML Background Color
You can also set the page background color directly in the <body>
tag:
<body bgcolor="black">
And set the text color on each element:
<p style="color: white;">This text will be white</p>
Creating Contrast with CSS Classes
For more control, you can create CSS classes to apply the white text on black background only where you need it:
<style> .black-bg { background-color: black; color: white; } </style> <p>Regular text here</p> <p class="black-bg">This text will be white on black</p>
You can reuse the .black-bg
class on any element you want to have that high contrast style.
Using Data Tables
Data tables with white text on a black background can look very clean and easy to read. Here is an example:
<style> .black-table { background-color: black; color: white; } </style> <table class="black-table"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>John</td> <td>30</td> </tr> <tr> <td>Sarah</td> <td>28</td> </tr> </table>
This applies the .black-table
class to the <table>
element to make the background black. All the text inside will automatically become white.
Using Black Background Section Styling
You may want to have just part of your page have a black background and white text. This is easy to do by creating a <div>
or <section>
element and styling it:
<section class="black-section"> <h2>White Header Text</h2> <p>White paragraph text...</p> </section>
With the CSS:
.black-section { background-color: black; color: white; }
This allows you to have just a portion of the page be high contrast, while other sections remain regular colors.
Using Black Background Inline Styling
For quick changes, you can also use inline styling to make elements black background with white text:
<p style="background-color: black; color: white;">This paragraph will have a black background!</p>
However, inline styles should generally be avoided in favor of using CSS classes or general CSS rules for better code organization.
Making Entire Website Black and White
To make an entire website have a black background with white text on every page, there are a couple approaches:
- Set the
background-color
andcolor
on thebody
element in your main CSS file that is imported across all pages - Set the
background-color
andcolor
on the:root
CSS pseudo-class which will apply to the whole document - Set default colors on HTML elements like
p
,h1
, etc to be white
For example:
/* In main.css imported by all pages */ :root { background-color: black; color: white; } p, h1, h2, h3 { color: white; }
This will make every page have a black background and white text sitewide.
Design Considerations
A few things to keep in mind when using a black background and white text:
- Can cause eye strain – use sparingly and avoid large sections of black background
- Low contrast – avoid light gray or off-white text as it can be hard to read
- Limit width – keep lines short for easier reading
- Careful with links – distinguish links from normal text
- Test for accessibility – ensure text passes accessibility standards
Conclusion
Making text show up as white on a black webpage background is straightforward using CSS properties. The key is setting the background-color
to black and color
to white on the body or other elements. This can be done with CSS rules, classes, inline styles, or setting default colors on HTML tags. Be thoughtful in applying high contrast black and white styling for best readability and accessibility.