CSS file help? Can I use more than one on a certain page?

domainpush · 12-22-2010, 02:41 PM

Is it possible to incorporate more than one style sheet on a page. Can you define certain sections of the webpage to that particular style sheet?

I have a main style sheet that is for the majority of the website. However, I got a second style sheet for an advanced particular table that I want to use. I do not want this table to get mixed up with the rest of my tables.

How can I define that certain part of the page to that particular style sheet?

For Example: This is what the main style sheet code for the entire page looks like.

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blah page</title>
<meta name="description" content="Blah blah blah" />
<meta name="keywords" content="blah blah blah " />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

I would like to add another style sheet for one specific part of this page. Please help. Also, if this is a php page, is my doc type and meta content correct as seen here?

What about this. Can I change the position of the table directly in the html instead of using two css files?

Here is what the beginning of my table looks like:

Quote:

My table is floating all the way to the right and I cannot center it up for nothing. How can I center this or even align up to the left with the banner margin? Also, what is the table id?

Hobnob · 12-26-2010, 03:14 PM

You can center the dive by adding "margin: 0px auto;" to the style.

But it is better to keep all styles in a css file because it's easier to maintain.
You can fix that by changing

HTML Code:

<div STYLE="height: 500px; width: 500px; font-size: 12px; overflow: auto; ">

to
????: NamePros.com http://www.namepros.com/programming/693115-css-file-help-can-i-use.html

HTML Code:

<div id="AdvancedTable">

or, if you are going to have more than one table on a page:

HTML Code:

<div class="AdvancedTable">

and then your css would look like this:
????: NamePros.com http://www.namepros.com/showthread.php?t=693115

Code:

#AdvancedTable, .AdvancedTable { /* which ever one you decided to go with */
    height:    500px; 
    width:     500px; 
    font-size: 12px; 
    overflow:  auto;
    margin:    0px auto;
}

Then as far as having two css files, you can link as many css files as you want to a document.
Just remember that the last one added has precedence over the previously included ones.

So if you change

HTML Code:

<head>
    [...]
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

to

HTML Code:

<head>
    [...]
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="another.css" rel="stylesheet" type="text/css" />
</head>

the styles from both files will be applied.

But if you have

Code:

p {
    border: 3px solid green;
    font: 12px sans-serif;
}

in style.css

and

Code:

p {
    border: none;
    color: pink;
}

in another.css

the result would be a paragraph with 12px sans-serif font, no border and pink text.

and by using this method you can achieve what you want.
Because you can just override the css that you don't want the table to have and then add the extra css. So the result would look like this:

style.css

Code:

table {
    width: 100%;
}

table td {
    font-family: 12px sans-serif;
    text-align: right;
}

another.css

Code:

#AdvancedTable {
    height:    500px; 
    width:     500px; 
    font-size: 12px; 
    overflow:  auto;
    margin:    0px auto;
}
#AdvancedTable table td {
    text-align: left;
    border: 1px solid green;
}

html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Blah page</title>
    <meta name="description" content="Blah blah blah" />
    <meta name="keywords" content="blah blah blah " />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="another.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table>
        <tr>
            [...]
            <!-- this table uses style.css rules -->
        </tr>
    </table>

    <div id="AdvancedTable">
        <table>
            <tr>
                [...]
                <!-- this table uses another.css rules -->
            </tr>
        </table>
    </div>
</body>
</html>

superiordomainnames · 12-29-2010, 08:04 PM

If you wanted to load per specific page you would need to do some programing, using a server-side language such as php, ruby, or phython.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Nice 54 Databases for sale	chandan	Content For Sale	113	06-19-2011 03:48 AM
plr articals and database package	The_Inferno	Content For Sale	0	09-09-2009 01:56 AM
FIFTY FOUR ( 54 ) Database MEGA Package - Master Resale Rights!	Hurley4540	Content For Sale	14	10-15-2008 05:08 PM
The Google PageRank formula fails!!!	leusmith	Search Engines	17	05-09-2007 07:44 PM
google ranking (Tips)	lilgee	Search Engines	8	10-20-2005 02:04 PM

12-29-2010, 08:04 PM	#3 (permalink)
superiordomainnames NamePros Member Join Date: Dec 2008 Posts: 59	If you wanted to load per specific page you would need to do some programing, using a server-side language such as php, ruby, or phython.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)