CSS Forum

**zerox3k** · 07-18-2005, 03:51 PM

Hello all

I have found that i use a layout for a table for example.

Code:

<td>
  <table border=1 bordercolor=#000000 cellpadding=0 cellspacing=0 style="border-collapse: collapse;" width=186 height="150">
    <tr> 
  <td style="background-image: url(images/tbg.gif); font-family: verdana; font-size: 10px; color: #ffffff; vertical-align: middle; height: 21px; width: 186px; padding-left: 3px;">
  Header text here
 </td>
 </tr>
<tr>
<td align="center" id="box" style="background-image: url(images/bg1.gif); padding-left: 3px; font-family: verdana; font-size: 10px; color: #000000;">
Information text
</td>
</tr>
</table>

I use this quite allot on a site im creating, is there a way i could use CSS or somthing to store the table infomation and just enter the text info into the html instead of having to have lots of that above code on the page.

Thanks

**Enigmatic** · 07-19-2005, 03:51 AM

Create an external CSS file, something along the lines of whats below would work for you.

Code:

#id1 { 
background-image: url(images/tbg.gif); 
font-family: Verdana, Arial 10px #FFFFFF; 
vertical-align: middle; 
height: 21px; 
width: 186px;
padding-left: 3px
}

#id2 {
border-width:1px;
border-color:#000000;
border-collapse: collapse
}

etc ...

Save that to a .css file called styles.css then in your HTML call the CSS file using:

<link rel="stylesheet" type="text/css" rel="styles.css">

**zerox3k** · 07-19-2005, 04:57 AM

Thanks for the reply, i will try what you have suggested.

How do i use this in the main html file tho?

Thanks again for your help

**Synchronize** · 07-19-2005, 11:39 AM

Between the <head> and </head> tags in your HTML file you need to add a new section

<style>
..put your css here..
</style>

Make sure you don't put it in between other tags like the <title> It has to be on its own inside the <head>

**Hudson** · 07-19-2005, 12:07 PM

Quote:

Originally Posted by Enigmatic

Save that to a .css file called styles.css then in your HTML call the CSS file using:

<link rel="stylesheet" type="text/css" rel="styles.css">

Sorry to be pedantic, but that should be

<link rel="stylesheet" type="text/css" href="styles.css">

**zerox3k** · 07-19-2005, 04:13 PM

but how do i use it in the main html file? like in a table where i enter data etc?

**Enigmatic** · 07-19-2005, 05:36 PM

Quote:

Originally Posted by Hudson

Sorry to be pedantic, but that should be

<link rel="stylesheet" type="text/css" href="styles.css">

Naa man, thats cool, should have noticed I had an error in it. No idea why I put rel there rather than href.

To call the CSS in your table, if you are using CSS id's [ CSS id's use # in the CSS file ], you call them using id="" in your tags. If you just calling a class [ CSS classes use . in the CSS file ], you call them using class="".

You can do as has also been suggested and just use <style></style> tags in the head of you HTML but using a CSS file is less hassle becase it can be linked to any page using the <link rel ... > tag rather than having to re-write code over and over multiple pages.

Hope that helps.

**zerox3k** · 07-19-2005, 06:22 PM

ok i see what you mean i will have to recall the #id1 and #id2 in the above example

but in a html

example

<html>

i want to use this text as the header

and this as the main text in the cell below

</html>

normally i would do all the table properties and enther the text where needed.

example

<td>
<table border=1 bordercolor=#000000 cellpadding=0 cellspacing=0 style="border-collapse: collapse;" width=186 height="150">
<tr>
<td style="background-image: url(images/tbg.gif); font-family: verdana; font-size: 10px; color: #ffffff; vertical-align: middle; height: 21px; width: 186px; padding-left: 3px;">
<center>.:: Members Login ::. </center>
</td>
</tr>
<tr>
<td align="center" id="box" style="background-image: url(images/bg1.gif); padding-left: 3px; font-family: verdana; font-size: 10px; color: #000000;">
Welcome to the members login area etc....
</td>
</tr>
</table>

**zerox3k** · 07-19-2005, 06:28 PM

sorry for my n00bness by the way, im still learning.

**Enigmatic** · 03:21 AM

You call the different CSS types using the class and id attributes.

So, either in your page, or a seperate CSS file, you have something like :

#id1 { border-width: 1px; border-color: #000000; border-collapse: collapse; }
.tdBorder { border-width: 1px; border-color: #006699; border-style: dashed; }
.text { font-family: Verdana, Arial, Helvetica, sans-serif; font-color: #000000; font-size: 9px;

Your HTML would look similar to :

<html>
<head>
<title>##----[ YOUR PAGE TITLE ]----##</title>

</head>
<body>
<table id="id1">
<tr>
<td class="tdBorder">Something Goes Here</td>
</tr>
<tr>
<td>The text contained within the span tags <span class="text">is formatted like this</span></td>
</tr>
</table>
</body>
</html>