Stephen.F Stephen.F - 3 months ago 15
CSS Question

Making my text white with a black CSS background

I am having an issue with my HTML code where i want to have white text over my black background. However i do not know how i would do that.

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="home.css">
<meta charset="UTF-8">
</head>

<body>
<main>
<header>
<h1>Site Index</h1>
</header>
<nav>
<a href="homePage.html">Home</a>
<a href="blog.html">Blog</a>
<a href="news.html">News</a>
<a href="contact.html">Contact Us</a>
</nav>
<section>
<article>
<h2>This is the section</h2>
<p style="color: #50FFFF; font-size: 16px;
text-shadow:
0px 0px 2px #1040FF,
-2px -2px 2px #1040FF,
2px -2px 2px #1040FF,
-2px 2px 2px #1040FF,
2px 2px 2px #1040FF;">
This is my home page of my test HTML web page.
Right now i am using a HTML style on this paragraph. It
uses a hexidecimal color, font size of 16 px and text shadow.
</p>
</article>
</section>
<hr>
<footer>
<strong>
Copyright &copy; 2016 Stephen Fawcett, All rights reserved
</strong>
</footer>
</main>
</body>

</html>


And my CSS:

body {
background-color: #101010
}

h1 {
color: #ffffff
}

footer {
color: #ffffff
}


So basically, I want my heading and footer to appear on the webpage. But since the text is black itself, it does not appear over a black background. How do i make my heading and footer brighter ?

I appreciate all the feedback i can get.

Answer

Like @link2pk suggested, adding color: #ffffff; to body in your CSS will make text white by default.

I also added same color modification on navigation links using nav a because blue is hard to read on black background but that's really all up to you.

body {
  background-color: #101010;
  color: #ffffff;
}
h1 {
  color: #ffffff;
}
nav a {
  color: #ffffff;
}
footer {
  color: #ffffff;
}
<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
    <header>
      <h1>Site Index</h1> 
    </header>
    <nav>
      <a href="homePage.html">Home</a>
      <a href="blog.html">Blog</a>
      <a href="news.html">News</a>
      <a href="contact.html">Contact Us</a> 
    </nav>
    <section>
      <article>
        <h2>This is the section</h2>
        <p style="color: #50FFFF; font-size: 16px;
                text-shadow:
                 0px 0px 2px #1040FF,
                -2px -2px 2px #1040FF,
                 2px -2px 2px #1040FF,
                -2px 2px 2px #1040FF,
                 2px 2px 2px #1040FF;">
          This is my home page of my test HTML web page. Right now i am using a HTML style on this paragraph. It uses a hexidecimal color, font size of 16 px and text shadow.
        </p>
      </article>
    </section>
    <hr>
    <footer>
      <strong>
            Copyright &copy; 2016 Stephen Fawcett, All rights reserved
    </strong>
    </footer>
  </main>
</body>

</html>