Jump to content
Please Use CODE Tags

Can't set separate backgrounds (HTML/CSS)

BrokeBungie
By BrokeBungie
in Programming
 Share
Posted

When I set the background in the stylesheet using a universal selector, I can't change the background later on. Example:

  

* { 
  font-family: 'Open Sans', sans-serif;
  margin: 0; 
  padding: 0; 
  border: none; 
  background-color: aliceblue;
  }

.heading { 
  border: 3px solid teal;
/*  padding: 10px;*/
  text-align: center;
  background-color: cadetblue;
}

The background for .heading is aliceblue and not cadetblue. Please provide help/an explanation as to why this is happening.

Link to comment
https://linustechtips.com/topic/734440-cant-set-separate-backgrounds-htmlcss/
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, SCHISCHKA said:

post your html so i can look at it 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles/main.css"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  </head>
  <body>
    <div class="heading">
      <h1>Testttt heading</h1>
      <h2>wdad</h2>
    </div>
    <div class="pages">
      <a class="current" href="index.html">Main page</a>
      <a href="about.html">About me</a>
      <a href="contact.html">Contact me</a>
    </div>
    <div id="main">
      <p>This is a paragraph on a webpage</p>
    </div>
  </body>
</html>

 

Link to post
Share on other sites
Posted
6 minutes ago, BrokeBungie said: 

    <div class="heading">
      <h1>Testttt heading</h1>
      <h2>wdad</h2>
    </div>

 

the problem is that only the div is using the "heading" class. If you mess with padding of the child elements you will see the div does have a cadetblue background. the child elements are being rendered using your universal block.

add this to your CSS

Quote

.heading *{ 
  background-color: cadetBlue;
}

you can replace the * with "h1, h2" or any html tag name

             ☼

ψ ︿_____︿_ψ_   

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×