Thanks
pk
... so much to learn!!
Overriding external style sheet...
pk
Registered User
88 posts
I am working on a site where all the pages have the same background except for one page. I have created an external style sheet that includes the body background CSS. How do I override the style sheet 'body' for the one page that has a different background? I have tried different approaches but none work. Do I have to create a 2nd style sheet just for the one different page?
Thanks
pk
Thanks
pk
BillR
Ambassador
3,144 posts
pk,
Cascading Style Sheets are designed to do just what you are describing. You create the external style sheet and apply it to all your site pages with a link command. Any changes you want to make to just one page can be done in the head section using style tags.
It would look something like this:
<head>
<title>your title</title>
<link rel="stylesheet" href="yourmainstyle.css" type="text/css">
<style type="text/css">
body {
background-image: url('/images/backgnd.gif');
}
</style>
You can also change anything you want different by styling it here inside the style tags.
For those single item changes, you can make inline changes, so maybe a paragraph needs to have a yellow background color and bold text, you could use this:
<p style="background-color:yellow; font-weight:bold;"> your text here </p>
For more information about CSS, you can visit the W3Schools website at http://www.w3schools.com/css/css_reference.asp and even play around with some CSS on their site.
Cascading Style Sheets are designed to do just what you are describing. You create the external style sheet and apply it to all your site pages with a link command. Any changes you want to make to just one page can be done in the head section using style tags.
It would look something like this:
<head>
<title>your title</title>
<link rel="stylesheet" href="yourmainstyle.css" type="text/css">
<style type="text/css">
body {
background-image: url('/images/backgnd.gif');
}
</style>
You can also change anything you want different by styling it here inside the style tags.
For those single item changes, you can make inline changes, so maybe a paragraph needs to have a yellow background color and bold text, you could use this:
<p style="background-color:yellow; font-weight:bold;"> your text here </p>
For more information about CSS, you can visit the W3Schools website at http://www.w3schools.com/css/css_reference.asp and even play around with some CSS on their site.
pk
Registered User
88 posts
Thanks BillR but it did not work. However, there is something strange going on that I do not understand.
Here is my code....
<link rel="stylesheet" type="text/css" href="pc1208style.css" />
<style type="text/css">
body {
background-color:#f4e8f0
}
</style>
The background image that is called for in the body tag in the linked style sheet appears and not the color called for in the document itself.
Now here's the part I do not understand. When I add the sample code you supplied in your response, the background color renders properly!! Here is the code...
<link rel="stylesheet" type="text/css" href="pc1208style.css" />
<style type="text/css">
body {
background-color:#f4e8f0
}
body {
background-image: url('/images/backgnd.gif');
}
</style>
I do not understand this strange behavior. Hopefully you do.
Thanks
pk
Here is my code....
<link rel="stylesheet" type="text/css" href="pc1208style.css" />
<style type="text/css">
body {
background-color:#f4e8f0
}
</style>
The background image that is called for in the body tag in the linked style sheet appears and not the color called for in the document itself.
Now here's the part I do not understand. When I add the sample code you supplied in your response, the background color renders properly!! Here is the code...
<link rel="stylesheet" type="text/css" href="pc1208style.css" />
<style type="text/css">
body {
background-color:#f4e8f0
}
body {
background-image: url('/images/backgnd.gif');
}
</style>
I do not understand this strange behavior. Hopefully you do.
Thanks
pk
... so much to learn!!
BillR
Ambassador
3,144 posts
pk,
Your code looks correct. It could be that you copied and pasted the original code and in the process picked up an invisible character. Can you provide a link to the page that you are trying to style?
Your code looks correct. It could be that you copied and pasted the original code and in the process picked up an invisible character. Can you provide a link to the page that you are trying to style?
pk
Registered User
88 posts
Hi Bill:
Here is the link to the page with the problems. The layout needs work ( the whole site is under construction at the moment) but since the background in the rest of the site is dark ( if you remove the sample code you provided originally you'll see what I mean) it makes it hard to see how it looks.... but this is another chore for another day once we can get the page background to work.
Here's the link....
http://www.paperandclay.com/faqs.html
Thank for all your help
pk
Here is the link to the page with the problems. The layout needs work ( the whole site is under construction at the moment) but since the background in the rest of the site is dark ( if you remove the sample code you provided originally you'll see what I mean) it makes it hard to see how it looks.... but this is another chore for another day once we can get the page background to work.
Here's the link....
http://www.paperandclay.com/faqs.html
Thank for all your help
pk
... so much to learn!!
Cary
Ambassador
1,086 posts
Your external style sheet calls for the background image, but your embedded styling only specifies a background color, which is being used. You just can't see the background color because your embedded styling isn't saying a background image shouldn't be used.
When you used all of Bill's code, it told the browser to use an image which doesn't exist, so the browser can't show the image.
So try this code:
When you used all of Bill's code, it told the browser to use an image which doesn't exist, so the browser can't show the image.
So try this code:
body {
background-image:none;
background-color:#f4e8f0;
}
background-image:none;
background-color:#f4e8f0;
}
pk
Registered User
88 posts
Thanks Cary... it works. It never occurred to me about one background covering the other but now that you mention it, it makes a lot of sense.
Thanks agian,
pk
Thanks agian,
pk
... so much to learn!!
BillR
Ambassador
3,144 posts
pk,
Sorry I was not here yesterday, I was traveling all day.
Sounds like Cary has the solution. Sure is wonderful that we have so many members like Cary. I can't remember how many times he has helped me.
Sorry I was not here yesterday, I was traveling all day.
Sounds like Cary has the solution. Sure is wonderful that we have so many members like Cary. I can't remember how many times he has helped me.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
