Introducción a CSS2
¿Qué es CSS?
Sus siglas, en inglés, significa Cascading StyleSheets que podríamos traducir como hojas de estilo y es un mecanismo que nos permite definir el estilo de un documento html de forma separada al contenido del mismo.
Es decir, separar forma de fondo.
¿Cómo incluirlo en un documento HTML?
Tenemos varias formas de incrustar los estilos según nuestra necesidad.
La más básica sería incluirlo en la propia etiqueta, pero no es realmente operativo y solo se debería hacer en casos extremos.
<p style="text-align:justify;">Texto del parrafo</p>
Otra forma es incluirlo al inicio del documento.
<style type="text/css">
p { text-align:justify; }
</style>
Y después usar las etiquetas html normalmente, de esta manera todas las etiquetas p quedarían con el mismo estilo. Sin embargo tampoco es realmente operativo, pues tendrías que poner todo el código en todas las páginas y para cambiar algo tendrías que editar todas las páginas.
La tercera opción y la única que recomiendo es incluirlo en un archivo de texto plano con extensión .css. De la forma:
p { text-align:justify; }
En donde quisieramos asociar esa hoja de estilo pondríamos en las líneas meta.
<link rel="stylesheet" href="HOJA DE ESTILO.css" type="text/css">
De esta manera estaría completamente externa y tocando tan solo un archivo cambiaría el aspecto de toda la web.
¿Cómo se construyen?
Cada elemento HTML tiene sus propiedades, aunque casi siempre son las mismas. Su estructura es variada pero como se puede ver en los ejemplos etiqueta y entre llaves las propiedad seguida de dos puntos valor y terminada en punto y coma.
Un ejemplo con varias propiedades:
p
{
text-align:justify;
font-size:0.8em;
}
Nos indica que los parrafos van a estar justificados (text-align:justify;) con un tamaño de 0.8 em -ya veremos que es eso.
Obviamente se puede poner comentarios, que no deja de ser texto que usabamos para recordar para que hicimos eso y otros comentarios que se quiera indicar. Si lo añadimos al ejemplo:
/* Estilo para un parrafo */
p
{
text-align:justify;
font-size:0.8em;
}
¿Cómo usar dos estilos diferentes para un mismo elemento?
Hasta ahora lo que hemos visto son los llamados selectores de tipo, donde se define un tipo y este estilo se usara en todo el documento. Pero podemos, por ejemplo, necesitar dos parrafos uno en cada color. La solución es usando clases.
/* Estilo para parrafo principal */
p.principal
{
text-align:justify;
font-size:1em;
color: black;
}
/* Estilo para parrafo secundario */
p.secundario
{
text-align:justify;
font-size:0.8em;
color: red;
}
Poniendo el tipo punto y el nombre de la clase se puede definir. Después a la hora de usarlo sería:
<p class="principal">Texto principal</p> <p class="secundario">Texto secundario</p>
Vemos que añadiendo class y el nombre de la clase estaría.
CSS nos brinda muchas posibilidades y podríamos hacer clases genericas, esto son clases que no tienen tipo y se ajustan a cualquier tipo.
/* Estilo generico principal */
.principal
{
font-size:1em;
color: black;
}
/* Estilo generico secundario */
.secundario
{
font-size:0.8em;
color: red;
}
/* Estilo para parrafos */
P
{
text-align:justify;
}
La llamada sería igual... pero esto tendría la ventaja de poder hacer algo así:
<p class="principal">Texto principal y <em class="secundario">texto enfatizado en rojo </em></p> <p class="secundario">Texto secundario</p>
Y podemos ir más alla aún. En todos los elementos de HTML se puede definir un identificador único, llamado ID.
<p id="texto">Texto</p>
Y ahora podemos aplicar un estilo concreto a ese elemento con ese ID exclusivamente, para ello el CSS sería:
/* Estilo para un parrafo */
p#texto
{
text-align:justify;
font-size:0.8em;
}
Como veís se basa en cambiar el punto por una almohadilla.
¿Cómo se cambian el color a los enlaces?
Veamos un ejemplo para ver como la propiedad a tiene varias pseudo-clases.
/* no vistado*/
a:link {text-decoration: underline;}
/* visitado */
a:visited {text-decoration: underline;}
/* presionando */
a:hover {text-decoration: none}
/* activo, con tabulador */
a:active {text-decoration: none}
La propiedad text-decoration es la encarga de subrayarar (underline) o no (none) los enlaces según donde nos hayemos.
¿Cómo se cambian a la barra de scroll?
Eso no es posible hacerlo con CSS, puesto que no esta definido en el estándar... pero ¿existe? esto es cuando existia la guerra de navegadores entre Netscape e Internet Explorer, cada uno trataba de ganar al público añadiendo propiedades que el otro no tenía, pero incumpliendo todos los estándares.
body
{
/* color de la barra */
scrollbar-face-color: #111111;
/* color del borde */
scrollbar-highlight-color: #222222;
/* color de otro borde */
scrollbar-3dlight-color: #333333;
/* color de sombra */
scrollbar-darkshadow-color: #444444;
/* color de otra sombra */
scrollbar-shadow-color: #555555;
/* color de la flecha */
scrollbar-arrow-color: #666666;
/* color del fondo */
scrollbar-track-color: #777777;
}
En este caso, como en muchos, lo mejor es que lo vayaís probando, poniendo diferentes colores. Volver a señalar que esto no es estándar y no valida.
Sobre las médidas
- em, son relativos a la altura que tiene la M (mayúscula).
- px, es una unidad métrica en pixels.
- pt, es una unidad métrica en puntos, independiente de la resolucíón de pantalla, frente a px.
- %, es relativo, se mide respecto al valor del padre (el elemento superior).
Nota
- Esto simplemente es una introducción al mundo del CSS, su objetivo es servir como paso inicial en el aprendizaje de este lenguaje, nada más y no me puedo permitir el profundizar sobre el mismo. La red esta llena de manuales y ejemplos.
- Señalar que cada navegador maneja la hoja de estilo de forma direferente, así el Internet Explorer se comporta de forma diferente según su versión no soportando el 100% del estándar, otros como Firefox lo intrepreta bastante bien.
- CSS Validator es una web que nos permite comprobar si nuestro CSS esta correcto.
