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
Share on other sites
Link to post
Share on other sites
Posted

what happens if you swap the .heading and universal block order so the .heading is first?

             ☼

ψ ︿_____︿_ψ_   

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, SCHISCHKA said:

what happens if you swap the .heading and universal block order so the .heading is first?

Yields the same result. 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, BrokeBungie said:

Yields the same result. 

post your html so i can look at it

             ☼

ψ ︿_____︿_ψ_   

Link to comment
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 comment
Share on other sites
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 comment
Share on other sites
Link to post
Share on other sites
Posted

this is additional to the CSS you currently have

             ☼

ψ ︿_____︿_ψ_   

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
3 minutes ago, SCHISCHKA said:

this is additional to the CSS you currently have

Thanks, appreciate it.

Link to comment
Share on other sites
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

×