Problema a dar estilo a "A"

[gesking]

Hola, tengo un problema para darle estilo a la equiqueta "a".

Le doy un estilo a la etiqueta en gral... por ejemplo:

a{
color:black;
font-size:12px;
}

Ahora... quiero armar un boton con la etiqueta "a" y lo hago asi:

.boton{
font-size: 20px;
padding:5px;
width="300px";
}

<a href="" class="boton">Prueba</a>


El boton sale bien, el ancho es de 300px y tiene un padding de 5px.
El problema es que la letra sigue siendo pequeña, de 12px, pero yo le señalo que sea de 20px!

Es decir, todo el estilo que le pongo a "a" queda igual y se agrega a lo que le doy "boton".

Como lo puedo solucionar???? gracias

[linuxzero]

En que navegador lo estas probando eso? porque en el chrome no me pasa lo que a vos y quiero corroborarlo.

[C2am]

Hola
Prueba agregando !important

Código CSS:

.boton{
font-size: 20px !important;
padding:5px;
width="300px";
}
 

[alexk]

width="300px";????
width:300px;


Edito:
Se me olvidaba, si quieres que sea un "boton" hara falta display:block; o "inline-block"

[C2am]

width="300px"
Se me pasó a mi también.

[edwardd89]

!important y aparte quita eso de "" XDD

[gesking]

Hola. Gracias por responder.

Estoy utilizando el navegador Chrome.

Lo de la mala escritura sorry, lo escribi asi nomas, no tenia en ese momento el codigo a mano y por costumbre puse =" "

Asi tengo la etiqueta "a":

Código:

a {
	font-size: 12px;
	color: #215B74;
	font-weight: bold;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #215B74;
}
a:hover {
	text-decoration: underline;
	color: #3798C1;
}
a:active {
	text-decoration: none;
	color: #215B74;
}

y luego por ejemplo una clase:

Código:

	.evento{
		position:absolute;
		text-align:center;
		border:#000 solid 1px;
		color:#000000;
	}
	.evento:hover{
		background-color:#CCC;
	}

En teoria el color del link tiene que ser negro (dentro de "evento") pero es azul, como lo indica "a"

[pitufoweb]

Necesitas saber como funciona la herencia de CSS para que puedas entender el por que no te funciona como tu lo deseas.


Prueba con este código :

Código HTML:

a { color:#215B74; font: bold 12px arial; text-decoration:none;}
a:hover { color:#3798C1; text-decoration:underline;}

.evento { position:absolute; color:#000;  border:solid 1px;}
.evento:hover{ background:#CCC;}

Saludos