Usar 2 hojas de estilo en la misma pagina

[doylelives]

Ayy en que lio me metí.
Les cuento, digamos que todas las paginas del sitio usan la hoja "style.css"
Hoy tuve que agregar una pequeña agenda (Calendar) hecha en css muy vistosa.
Dicha agenda usa su propio hoja de estilos, llamemosle "calendar-system.css"
Por lo tanto tuve que declarar 2 hojas en el head:

Código PHP:

  <link rel="stylesheet" type="text/css" href="style.css"> 
<link rel="stylesheet" type="text/css" media="all" href="calendar-system.css" />  
   

Y resulta que en style.css todas las tables abarcan el 100% del ancho, y cuando aparece la agenda, ésta aparece estirada al 100%!!!!
Perdiendo su tamaño original.
Como soy novato en css me gustaria saber como solucionar ésto.
Les copio el codigo que corresponde al area del input con la agenda en cuestión.
Gracias!!!

Código PHP:

 <input name="fecha_desde" type="text" id="fecha_desde" value="<?=($_POST['fecha_desde'])?$_POST['fecha_desde']:date('d-m-Y'); ?>" size="9"  readonly/> 
    <script type="text/javascript"> 
        Calendar.setup({ 
        inputField  :    "fecha_desde",     
        ifFormat    :    "%d-%m-%Y",     
        button      :    "fecha_desde",     
        align       :    "Bl", 
        singleClick :    true 
        }); 
    </script>  

[kseso?]

Aumenta la selectividad en los selectores del calendario.

Código css:

#calendario {width:XXpx; ...}
#calendario table {...}
#calendario table td {...}
#calendario table td a {...}
 

Te dejo unos ejemplos de calendarios "de pillar y usar" por si te sirven de guía

Un saludo

[doylelives]

El problemas es que dicho calendario posee muuuuuchas lineas de estilo y en javascript tiene 1871 lineas cuando se crea el calendario .
Los selectores del calendario no puedo tocarlo.
El problemas está en style.css, esta linea es el problema:

Código PHP:

  table    {width:100%;}  
   

no puedo modificarla porque se aplica a todas las tablas del sitio.
Se podria decirle al script javascript que utilice calendar-system.css? y que no utilice style.css

[kseso?]

Tú ya estás dando un identificador único al "campo" donde vas a mostrar el calendario:

<input name="fecha_desde" type="text" id="fecha_desde" value="

Entonces, en el css del calendario tendrías que añadir a todos los selectores algo así:

#fecha_desde table {width: /*la anchura necesaria y el resto de de propiedades */}

Pero mejor sería si tienes esa página en red, que pusieses un enlace, o como mínimo, el inicio del código generado en el navegador del calendario y y algo de su css implicado.

Un saludo

[doylelives]

Al final tuve que meter mano en calendar-system.css

Código PHP:

  .calendar table { 
  .......... 
  .......... 
  .......... 
  width:122px;<------- 
}  
   

Pero me queda una duda. En el siguiente codigo hace referencia a los table de calendar?

Código PHP:

  .calendar table .wn { 
  padding: 2px 3px 2px 2px; 
  border-right: 1px solid ButtonShadow; 
  background: ButtonFace; 
  color: ButtonText; 
}  
   

[kseso?]

Pero me queda una duda. En el siguiente codigo hace referencia a los table de calendar?

Código PHP:

  .calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid ButtonShadow;
  background: ButtonFace;
  color: ButtonText;
}  
   

Ese código le está diciendo que a las clases wn que estén dentro de una table metida dentro de calendar le aplique esas propiedades.
Eso afectará a:

<div class="calendar">
<table>
<tr>
<td class="wn">contenido al que se le aplican las propiedades</td>
<td class="otra"> este contenido ya no se ve afectado</td>
</tr>
</table>
</div>

Y lo siguiente tampoco se vería afectado:

<div class="calendar">
<div class=wn> hola</div
</div>

Por eso te decía en mi primera respuesta que aumentases la selectividad de los selectores.

Un saludo

[doylelives]

Si, entendi muy bien tu ejemplo. Me quedo tranquilo.
Gracias!!