Archivo de la categoría: CSS

.:la cena está servida:.

Estándar

La página css diner creo un juego on line para practicar selectores CSS. Los selectores están inventados pero permite ejercitar perfectamente la lógica de ubicación de las propiedades y qué elemento modificamos cuando escribimos código.

css dinner

Con la excusa de servir la mesa, habrá que saber como modificar los elementos que se mueven en ella, con un poco de ayuda pero igual la tarea se va complicando a medida que pasan los niveles.

.: class o id :.

Estándar

El uso de class va a permitirnos determinar distintos estilos para un mismo elemento o generar estilos tipo para cualquier tag XHTML. Deberás escribir en la CSS:
elemento.nombreclase {propiedad:valor}
Es decir, a modo de ejemplo:
p.amarillo{color:yellow}
Y el código del XHTML será:
<p class=”amarillo”>lalalalalalala</p>

Ahora bien con ID sólo puedes usarlos en un elemento y recuerda que es case sensitive.
#idelelemento {propiedad: valor}
Es decir:
#textoarticulos {font-weight: bold}
Y en el código XHTML pondrás:
<p class=”amarillo” id=”textoarticulos”>hola que tal?</p>
o
<div id=”textoarticulos”>hola que tal?</div>

.: tunda-ta tunda-ta :.

Estándar

¿Para qué definir en cuatro renglones lo que podés establecer en una sola línea de texto? Cuando estamos escribiendo el CSS que utilizaremos para nuestro sitio debemos evitar poner código innecesario, lo cual hará que el sitio sea menos pesado y se interprete más rápido.

En lugar de:

border-top:2px solid #00f;
border-right:2px solid #00f;
border-bottom:2px solid #00f;
border-left:2px solid #00f; 

Debemos resumirlo en un único renglón:

border:2px solid #00f;