CSS Inclusion Problem

Question

I have a jsp page with a couple of CSS files included.

In this, each CSS has separately defined styles for table.

The problem is that I need those different styles for different tables and I'm unable to differentiate them and the menu's css styles get overlapped with the new css style.

How can I avoid this problem; the menu.jsp has been included into another page. Is there a way to avoid overriding of the styles?

Answer 1

Either just don't include those CSS files or give the table an unique ID or classname so that you can hook on it in CSS.

If you want to handle an unique table specifically, use the id:

<table id="mySpecialTable">
    ...
</table>

with a CSS rule on this ID starting with #:

#mySpecialTable {
    border: 2px solid red;
}

Or if you'd like to share the style among multiple tables, use the class:

<table class="mySpecialTable">
    ...
</table>

with a CSS rule on this classname starting with .:

.mySpecialTable {
    border: 2px solid red;
}

See also:

• W3 Schools: CSS tutorial/reference
• W3: CSS selectors
• A CSS tutorial

Answer 2

This is part of the behaviour of cascading style sheets - you can declare many rules and they get applied in order.

To avoid this, you need to add a class to your menu table and to the css rules for that menu table. In the css rules you write for the menu table, you may need to override any rules declared for the general "table" element elsewhere in css.

Answer 3

Give your CSS structure a better heirachy.

#container #sectionid .class{}

instead of

.class{}

An example would be this:

<h2>Page Title</h2>
<div id="container">
   <div id="news">
      <h2>News Section</h2>
      <div class="month" id="january">
         <h2>News Article 1</h2>
      </div>
      <div class="month" id="february">
         <h2>News Article 2</h2>
      </div>
   </div>
</div>

h2 {color:red;} < This would set all <h2> tags to be red
#container h2 {color: red;} < This would set all <h2> tags inside the container div to red
#container #news h2 {color: red;} < This would set all <h2> tags inside the news div to red
#container #news .month h2 {color: red;} < This would set all <h2> tags inside month divs to red
#container #news .month #january h2 {color: red;} < This would only set the <h2> tag inside the january div to red.

Using this method makes your code more semantic and gives you much more control over your elements, without having to use a huge number of IDs and classes. In the example above, you would want all of your h2 tags to be the same size, but the months in different colors, so you would set the styles accordingly:

h2 {font-size: 2em;}
#container #news .month #january h2 {color: red;}
#container #news .month #february h2 {color: blue;}

Answer 4

The usual way to separate styles for different elements is to put them into parent containers that have a certain class.

Consider a HTML structure like this:

<div class="area1">
 <table ...... >
</div>

<div class="area2">
 <table ...... >
</div>

your CSS would target those areas like so:

.area1 table { ... } /* Definitions for tables in area1 */
.area1 table td {  ... } 

.area2 table {  ... }  /* Definitions for tables in area2 */
.area2 table td { ...  } 

Answer 5

When you load multiple css, and you have the same css defined in each, there is no way to avoid the overriding.

You might want to define a different id/class for each table.

The only other solution is, if you can somehow identify/specify that only one table-style is used per jsp. then you can use the jsp to load only the required css and ignore the other ones (or load them in a different order)