Estilo diferenciado para un link

Chuqui · #1 (**permalink**) 12/08/2011, 19:59

Estimados,

Necesito darle un estilo distinto a un link. El problema es que en este momento "mandan" los estilos generales del sitio.

Al final de esta página hay un botón cuyo texto está de color azul y subrayado. Eso es porque el CSS del sitio así lo estipula. Yo no sé cómo hacer que NO use ese estilo, sino el que yo le asigné:

Código:

.btn_redondo {
background-color:#a20000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:12px 28px;
text-decoration:none;
}

.btn_redondo:hover {
background-color:#ce0100;
}

.btn_redondo:active {
position:relative;
top:1px;
}

Pero no funciona. ¿Cómo puedo forzar a que el texto se vea blanco y sin subrayar?

Saludos y gracias.

ArturoGallegos · #2 (**permalink**) 12/08/2011, 21:41

pues también seria conveniente ver como tienes estructurado el html recordemos que esto también afecta

por lo mientras prueba aplicando la tag !important en cada regla css que necesites forzar, por ejemplo

Código CSS:

Ver original.btn_redondo {
background-color:#a20000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:inline-block;
color:#fff!important;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:12px 28px;
text-decoration:none!important;
}

C2am · #3 (**permalink**) 12/08/2011, 21:48

El estilo que "marca la cancha" es:

Código XML:

Ver original#cont_tipo a {
text-decoration: underline;
font-weight: bold;
color: #3D5AC0;
}

Luego, una forma de solucionarlo es definiendo a partir de ahí, es decir:

Código CSS:

Ver original#cont_tipo a.btn_redondo{
background-color:#a20000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:12px 28px;
text-decoration:none;
}

No sé si es la mejor opción, pero la probé y funciono. Espero te sirva.
Saludos

PD: viste, siempre hay mejores soluciones, por ejemplo la de ag666

Chuqui · #4 (**permalink**) 13/08/2011, 21:10

Hola. Muchas gracias por la ayuda. He resuelto el problema gracias a ustedes. Estuve leyendo sobre el tema, y la verdad es que cada vez se recomienda menos utilizar el !important, ya que para este caso existe la "especificidad" del CSS, que es la solución que aporta C2am.

El !important se usa sólo para casos muy especiales, cuando simplemente no exista otra alternativa.

Un abrazo.
p.d. de todas formas, en este caso usé el !important por una cuestión de tiempo, jajaja, pero ya lo modificaré :)