Codenoob2
Aug 8th, 2010, 06:37 PM
I'm using a div element and I'm giving it a class name "tablestyle." I'm using an external style sheet called OurBlog.css and I'm using a class selector (therefore a "." in the style sheet) and I've tried using an id selector. The first occurence of the class selector .tablestyle in the style sheet produces the results I want (i.e. a gold background, and adjusted font size). The second occurence which I named .tablestyle1, seems to do nothing even though I specified it in the style sheet. I will post my code here and maybe I'm making a significant mistake which can be pointed out. Here is the HTML document code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
type="text/css" href="http://www.christ-alive-community-church.com/Blog/OurBlog.css" />
<title>Our Blog</title>
</head>
<body>
<script language="JavaScript">
<!-- Hide the script from old browsers --
var img0_on = new Image(400,400);
img0_on.src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg";
var img0_off = new Image(400,400);
img0_off.src="http://www.christ-alive-community-church.com/images/throne-of-grace.jpg";
function swap_image(parm_name,over) {
document[parm_name].src = window[parm_name + (over?"_on":"_off")].src;
}
// --End Hiding Here -->
</script>
<TABLE>
<TR>
<TD>
<a href="http://www.christ-alive-community-church.com" onmouseover="swap_image('img0',true);" onmouseout="swap_image('img0')">
<img src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg" border="0" name="img0" width="400" height="400">
</a>
</TD>
</TR>
<TR>
<TD>
<div class="tablestyle">
So this blog is new and I don't have much to say,
<br>
I'm going to add more to it soon.
<br>
I've figured out how to get the images to swap.
<br>
I need to collaborate with the church to know what to
<br>
put on the website.
</div>
</TD>
</TR>
<TR>
<TD>
<div id="tablestyle1">
<p>07/08/2010
<br>
I'm STILL working on this website and I have a long way to go. I'm applying a style sheet now to make things clearer.</p>
</div>
</TD>
</TR>
</TABLE>
</body>
</html>
and here is the OurBlog.css style sheet code:
body {background-color:blue;}
.tablestyle
{
background-color:gold;
font-family:"Times New Roman", Times, serif;
font-size:2.0em;
font-weight:bold;
]
#tablestyle1
{
background-color:gold;
font-family:"Times New Roman", Times, serif;
font-size:2.0em;
font-weight:bold;
}
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
type="text/css" href="http://www.christ-alive-community-church.com/Blog/OurBlog.css" />
<title>Our Blog</title>
</head>
<body>
<script language="JavaScript">
<!-- Hide the script from old browsers --
var img0_on = new Image(400,400);
img0_on.src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg";
var img0_off = new Image(400,400);
img0_off.src="http://www.christ-alive-community-church.com/images/throne-of-grace.jpg";
function swap_image(parm_name,over) {
document[parm_name].src = window[parm_name + (over?"_on":"_off")].src;
}
// --End Hiding Here -->
</script>
<TABLE>
<TR>
<TD>
<a href="http://www.christ-alive-community-church.com" onmouseover="swap_image('img0',true);" onmouseout="swap_image('img0')">
<img src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg" border="0" name="img0" width="400" height="400">
</a>
</TD>
</TR>
<TR>
<TD>
<div class="tablestyle">
So this blog is new and I don't have much to say,
<br>
I'm going to add more to it soon.
<br>
I've figured out how to get the images to swap.
<br>
I need to collaborate with the church to know what to
<br>
put on the website.
</div>
</TD>
</TR>
<TR>
<TD>
<div id="tablestyle1">
<p>07/08/2010
<br>
I'm STILL working on this website and I have a long way to go. I'm applying a style sheet now to make things clearer.</p>
</div>
</TD>
</TR>
</TABLE>
</body>
</html>
and here is the OurBlog.css style sheet code:
body {background-color:blue;}
.tablestyle
{
background-color:gold;
font-family:"Times New Roman", Times, serif;
font-size:2.0em;
font-weight:bold;
]
#tablestyle1
{
background-color:gold;
font-family:"Times New Roman", Times, serif;
font-size:2.0em;
font-weight:bold;
}
Thanks.