CODEWITHSUNDEEP
htmlcss
user6477667
user6477667

Reputation:

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.

Upvotes: 2

Views: 26599

Answers (1)

j3ff
j3ff

Reputation: 6089

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>

Upvotes: 6

Related Questions