Forum Moderators: not2easy
I hope you all are having a good weekend. :-)
I am having a problem adding a page background color using the css folder file. I am by no means a coding exspert but I figure this should be a simple task. I need help. The code I added to my css only gave me a page border. Could someone please take a look at ths css and tell me what I need to do or code I need to add to change this page background color? It is the whole page bacground color I want to change not any cell within. Any and all help will be greatly appreciated.:-)
Thank You
Tony S.
[code]/* CSS Document */
body{
margin:0px;
}
.border{
border:#000000 1px solid;}
.naigation_text{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration:none;
}
.naigation_text:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #f7ae47;
text-decoration:none;
}
.latest_news{
background-image:url(../images/latest_news.jpg);
width:165px;
height:29px;
background-repeat:no-repeat;
padding-top:5px;
}
.left_simple_text{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #494646;
text-align:justify;
padding-left:14px;
padding-top:7px;
}
.copyright{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
.right_table2{
width:517px;
border-right:#000000 1px solid;
}
.right_simple_text{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:justify;
padding-right:13px;
padding-top:7px;
}
.more{
font-family: Arial, Helvetica, sans-serif;
color: #aa6626;
font-size: 11px;
font-weight: bold;
padding-left:5px;
text-decoration:underline;
}
.more :hover{
font-family: Arial, Helvetica, sans-serif;
color: #aa6626;
font-size: 11px;
font-weight: bold;
padding-left:5px;
text-decoration:none;
}
.right_middletable{
border-right:#000000 1px solid;
height:20px;
}
[code]
.....a problem adding a page background color.....
1) This will provide the style requested.
html, body {
background-color: #fff;
}
2) .....only gave me a page border......
This indicates a likelihood of a 'wrapper' container that has the effect of 'seeming' to give a page border. No page border is directly declared. border: and background-color: are very different properties.
3) You can shorthand some color related declarations, such as #000000: to #000; and #ffffff to #fff - Lower case not required but 'best practice', IMO.
4) You can also shorthand the font: declarations. For example:
{font: bold 11px Arial, helvetica, sans-serif;}
Much more compact and easier to follow.
5) It is unlikely, unless there is a specificity issue to be over-ridden, that {text-decoration: none;} is needed in .naigation_text {
6) Is there a typ0 there? Did you intend .navigation_text ?
7) .more :hover { - is not valid and should not work. It does pass the W3C validator with a 'green' result - but it should not work. If the validation is correct, I would like further details, and appropriate usage.
7) .more :hover { - is not valid and should not workit is valid CSS! And if the elements that have the class "more" have any children, it should work when those children are hovered.
":hover" select all elements that are hovered, regardless of the elements, any class or any id applied to the element.
There is some language in the standards to not write it like ".foo :hover" in order to not confuse people reading the code (it suggests to use ".foo *:hover" which means exactly the same).
it is valid CSS!
I stand corrected regarding validity. What browsers/versions support this without hacking? FF 3.5.1 does not seem to. Opera does support for children.
Another option:
.more > :hover{
Thank You,
Tony S.
/* CSS Document */
html, body {
background-color: #7fffe7;
}
margin:0px;
}
.border{
border:#000000 1px solid;}.naigation_text{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration:none;
}
.naigation_text:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #f7ae47;
text-decoration:none;
}
.latest_news{
background-image:url(../images/latest_news.jpg);
width:165px;
height:29px;
background-repeat:no-repeat;
padding-top:5px;
}
.left_simple_text{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #494646;
text-align:justify;
padding-left:14px;
padding-top:7px;
}
.copyright{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
.right_table2{
width:517px;
border-right:#000000 1px solid;
}
.right_simple_text{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #000000;
text-align:justify;
padding-right:13px;
padding-top:7px;
}
.more{
font-family: Arial, Helvetica, sans-serif;
color: #aa6626;
font-size: 13px;
font-weight: bold;
padding-left:5px;
text-decoration:underline;
}
.more :hover{
font-family: Arial, Helvetica, sans-serif;
color: #aa6626;
font-size: 13px;
font-weight: bold;
padding-left:5px;
text-decoration:none;
}
.right_middletable{
border-right:#000000 1px solid;
height:20px;
}
Will it make a difference where I enter the above given code? I should ask where should I enter the code?
Option 1: External style sheet. Advantage - It can be called from any page on your website and used on hundreds, or thousands, of pages - served from one file, one time. Link to the .css file in the head of each page that needs access to the declarations. The following link uses a relative path. You may well get advice that that is a stupid thing to do and that an absolute file path is far superior. Both have their place, IMO, and I use both.
<link rel="stylesheet" type="text/css" href="../../css/gallery.css" />
Option 2: Embedded in the page <head>
<style type="text/css" media="all">
body {
background-color: #faebd7;
}
</style>
Advantage - Some CSS is never going to be used anywhere but on a very specific page. Don't bog down your primary external stylesheet with declarations that rarely get used. Multiple stylesheets are a wise idea - a 'global' sheet that every page on the website uses, and 'template' stylesheets that different sections of the websites will use, e.g., one for gallery pages, one for article pages. Disadvantage - Embedded styles are only used on that one page. Need to use them in the future on another page? Oops! Thus, the advantage of using multiple external stylesheets.
Option 3: Declared 'inline', right in the HTMl.
<body style="background-color: red;"> Disadvantage - Extra markup on page. Advantage - Power.
External stylesheets are the most useful. Embedded stylesheets are more powerful and will take priority if there is a conflict. inline declarations are the most powerful of all and will over-ride any embedded and external conflicts.
............................
One has to be aware of the definition of 'power' for stylesheets. External .css files are incredibly powerful, but can be over-ridden. inline styles trump all, but the scope of the power is minimal.
............................
Also should "#fff" be the hex code for the color
I want my background to be?
No, not necessarily. That is a question only the designer can answer. There isn't a right or wrong answer. Most websites benefit from black text on a fairly light background. White is optional.
If you want white, there are numerous correct ways of making the declaration. White is one of the CSS official color names. You can also use hex codes and rgb codes,
For starters:
white (CSS 'official' color)
#ffffff
#fff (shorthand for above)
{
background-color: rgb(255, 255, 255);
}
Also - SVG named colors, rgba, hsl, hsla..... Some partly usable now; most CSS3, some who-knows-when, CSS3 or not.
Thank You,
Tony S.
It worked like a champ. :-)
Thank you all again,
Tony S.
