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

domainpush · Dec 22, 2010

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.

<!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:

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

<table id="test1" cellpadding="0" cellspacing="0" border="0" class="sortable-onload-5-6r rowstyle-alt colstyle-alt no-arrow">

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 · Dec 26, 2010

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:

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

to

HTML:

<div id="AdvancedTable">

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

HTML:

<div class="AdvancedTable">

and then your css would look like this:

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:

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

to

HTML:

<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:

<!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 · Dec 30, 2010

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.

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

More options

domainpush

Established Member

Hobnob

Established Member

superiordomainnames

Established Member

Similar threads

We're social

New posts ➔

Auction activity ➔

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest ➔

Hot this week ➔

Community favorite ➔

Hot this month ➔

Blog favorites

Right-Choice.com

tyrosines.com

skysoul.pl

energyble.com

riverflow.net

YeaYou.com

campingfarm.com

L.digital

TZSS.ORG

riskalis.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling