Problem with CSS color change

My row colors wont change between my styles.css file and my menu.html file. When I change colors in stylesheet save to server and refresh page. No change

heres the html

<!DOCTYPE html>
<html>

<head>
<title>Tomas Family Restaurant Menu</title>
<link rel="stylesheet" type="text/css" href="styles.css">  
</head>

<body>

<header>
<img src="images/tomas2.png" alt="Tomas Family Restaurant logo">
<h1>Tomas Family Restaurant Menu</h1>
</header>

<nav>
	<ul>
    <li><a href="history.html">History</a></li>
	<li><a href="menu.html">Menu</a></li>
	</ul>
</nav>

<main><table id="group">
<tr class="rowcolor">
<th colspan="3">Steaks</th>
</tr>
<tr>
<th class="color">Special 1</th>
<th class="color">Special 2</th>
<th class="color">Special 3</th>
</tr>
<tr>
<td>20ozT-Bone</td>
<td>20ozPorterhouse</td>
<td>20ozTomahawk</td>
</tr>
<tr>
<td>$25</td>
<td>$25</td>
<td>$25</td>
</tr>
<tr class="rowcolor">
<th colspan="3">Sides</th>
</tr>
<tr>
<td>Salad Bar w/Refills</td>
<td>Collards in Steak Fat</td>
<td>Seasoned Grilled Green Beans</td>
</tr>
<tr>
<td>$7</td>
<td>$4</td>
<td>$4</td>
</tr>
<tr class="rowcolor">
<th colspan="3">Ask for Dessert Menu. 3 Flavors of Cake&Pie. Other Items Change Without Notice. Courtesy of Tomas Dessert Crew</th>
</tr>
<tr>
<td>Cake/Pie Chc Lmn Apl</td>
<td>Cake/Pie Chc Lmn Apl</td>
<td>Cake/Pie Chc Lmn Apl</td>
</tr>
<tr>
<td>$10 Whole</td>
<td>$5  Half</td>
<td>$2  Slice</td>
</tr>
<tr class="rowcolor">
<th colspan="3">Beverages</th>
</tr>
<tr>
<td>Coke Products</td>
<td>Honey-Sweet Lemonade</td>
<td>Apple-Sweet Sweet T</td>
</tr>
<tr>
<td>$2</td>
<td>$2</td>
<td>$2</td>
</tr>
</table></main>

<footer></footer>

</body>
</html>

and here is the css

@charset "utf-8";
body{
	background-color: #00c5cd;
	font-family: Arial, Tahoma, sans-serif;
	font-size: 16pt;
    color: #000000;
}

h1 {
	color: #ffffff;
}

header {
	background-color: #000000; 
	color: #ffffff;
	text-align: center;
	padding: 5px;
	width: 80%;
	margin-left: 10%;
}

#container {
	width: 100%;
}

main {
	width: 80%;
	background-color: #00FFFF;
	float: left;
	padding: 5px;
	margin-left: 10%;
}
	
footer {
	clear:both;
	background-color: #000000;
	color: #ffffff;
	text-align:center;
	margin-left: 10%;
	padding: 5px;
	font-size: 12pt;
	width:80%;
}

nav {
   color: #00FFFF;
   padding: 5px;
   width: 80%;
   margin-left: 10%;
   font-weight: bold;
}

nav ul {
	list-style: none;
}

nav ul li {
	float: left;
	padding: 5px;
}

nav ul li a:link, nav ul li a:visited {
   display: block;
   width: 150px;
   margin-right: 4px;
   color: #000000;
   padding: 2px 4px 2px 4px;
   background-color:#00FFFF;
   text-decoration: none;
}
   
   nav ul li a:hover {
	color: #ffffff;
    background-color: #9b30ff;	  	
}	
table (
	width: 100%
	background-color:#00FF00;
	font-family: arial;
}
table#group {text-align: center;
}
tr.rowcolor {background-color: #BFFF00;
	color:#;
}
th.color {
	color: #00c5cd;
}

I don’t see your code because it is not formatted. But a quick question:-
Does the colour change work when you view it locally?
If so, it could just be that the css is cached in your browser. Try clearing the cache.

no it wont change locally either

<!DOCTYPE html>
<html>

<head>
<title>Tomas Family Restaurant Menu</title>
<link rel="stylesheet" type="text/css" href="styles.css">  
</head>

<body>

<header>
<img src="images/tomas2.png" alt="Tomas Family Restaurant logo">
<h1>Tomas Family Restaurant Menu</h1>
</header>

<nav>
	<ul>
    <li><a href="history.html">History</a></li>
	<li><a href="menu.html">Menu</a></li>
	</ul>
</nav>

<main><table id="group">
<tr class="rowcolor">
<th colspan="3">Steaks</th>
</tr>
<tr>
<th class="color">Special 1</th>
<th class="color">Special 2</th>
<th class="color">Special 3</th>
</tr>
<tr>
<td>20ozT-Bone</td>
<td>20ozPorterhouse</td>
<td>20ozTomahawk</td>
</tr>
<tr>
<td>$25</td>
<td>$25</td>
<td>$25</td>
</tr>
<tr class="rowcolor">
<th colspan="3">Sides</th>
</tr>
<tr>
<td>Salad Bar w/Refills</td>
<td>Collards in Steak Fat</td>
<td>Seasoned Grilled Green Beans</td>
</tr>
<tr>
<td>$7</td>
<td>$4</td>
<td>$4</td>
</tr>
<tr class="rowcolor">
<th colspan="3">Ask for Dessert Menu. 3 Flavors of Cake&Pie. Other Items Change Without Notice. Courtesy of Tomas Dessert Crew</th>
</tr>
<tr>
<td>Cake/Pie Chc Lmn Apl</td>
<td>Cake/Pie Chc Lmn Apl</td>
<td>Cake/Pie Chc Lmn Apl</td>
</tr>
<tr>
<td>$10 Whole</td>
<td>$5  Half</td>
<td>$2  Slice</td>
</tr>
<tr class="rowcolor">
<th colspan="3">Beverages</th>
</tr>
<tr>
<td>Coke Products</td>
<td>Honey-Sweet Lemonade</td>
<td>Apple-Sweet Sweet T</td>
</tr>
<tr>
<td>$2</td>
<td>$2</td>
<td>$2</td>
</tr>
</table></main>

<footer></footer>

</body>
</html>

There are mistakes in your css.
See the table selector, you have a normal opening bracket ( which should be a ‘curly’ bracket {.

table (

Always to validate your css.
http://jigsaw.w3.org/css-validator/

ok ill try the bracket fix

Yes its the opening bracket as Sam said which is wrong and then renders the rest of the css incorrectly because its all mismatched.

One error can corrupt anything that follows which is why your first stop should be the css validator.:slight_smile:

Also in the same table selector, you are missing a semicolon after 100%.

thanks
so how do I make the paragraph background for my history page lime green.

the bracket did make the colors on the menu page show up

now i have another problem. how do I make a paragraph background lime green.

In its simplest form:-

p { background: lime; }

Though you may want to use a class to target only certain paragraphs. Substitute p for .classname

well it is an external css style sheet and it will link to the html page. im not using names of colors but hexagon 6character codes

you can see the coherence Im trying to create if you go here and click on both menu and history. http://ist2w.kaplan.edu/1603C/IT117-06/MarcusMayo1/menu.html

That’s fine, you can use whatever colour mode you prefer to get the required colour, that is just an example showing selector, property and value.
Just substitute the name for your hex value.

so what will be the selector for the paragraph body on my history page

Exactly as shown. Either p or your chosen class name: .className

p { background: blue } /* all paragraphs blue */

.myClass { background: green } /* only paragraphs with this class green */

Used on:-

<p>This will be blue.</p>
<p class="myClass">This will be green.</p>

i want the words to stay black but the canvas they sit on to be lime green.

Words are usually black by default. But if you need to be sure or to override some previous contrary rules, simply add the rule color: black or colour: #000 to the selector.

okay