CSS u «Hoja de estilos en cascada» es un lenguaje vinculado a HTML donde definimos los estilos de nuestras páginas web. Funciona a base de reglas, tenemos un selector (etiquetas o conjunto de etiquetas de HTML) que a través de una declaración le damos valor a las propiedades de diseño. Más adelante os lo explicaremos con detalle. La declaración de una propiedad de un CSS se haría de la siguiente manera:
Selector {propiedad: valor; propiedad2: valor2;… }
El CSS lo podemos aplicar de tres formas diferentes:
- Directamente en la etiqueta: <body id=»mibody» background-color=»red»> Esta opción no es recomendable, no separa el contenido de la presentación. Aunque si podemos utilizarla de forma puntual.
- En la cabecera del archivo HTML: <html> <head> <title>Hoja de estilo interna</title> <style type=»text/css»> <!– Conjunto de reglas –> body { font-family: «Times New Roman»; color: red; background-color: #d8da3d; } h1, h2 { font-family: Arial; } </style> </head> <body></body> </html> Esta forma es poco eficiente, ya que si nuestra página web se compone de varios archivos HTML (lo más usual) tendremos que definir nuestro CSS en cada una de los archivos HTML.
- En un archivo aparte:
Este es la forma más eficiente de utilizar CSS ya que podemos utilizar todas estas reglas para todas las paginas HTML que forman nuestra web. Tendremos un archivo con la extensión .css vinculado a nuestro HTML indicándolo en la cabecera de este de la siguiente forma: <head> <link href=”miestilo.css” type=text/css rel=stylesheet> </head> Dentro de este archivo tendremos las reglas que definen el estilo de nuestras páginas web. Se declararían de la misma forma que en el caso dos
Como hemos comentado, para darle estilo a nuestra página web utilizamos una serie de reglas. Podemos hacerlo de varias formas:
- Reglas a una o varias etiquetas:
- En este caso el selector puede ser una única etiqueta: body { font-family: «Times New Roman»; color: red; background-color: #d8da3d; }
- O varias etiquetas separadas por coma: h1, h2 { font-family: Arial; color: #2980b9 } En estos casos con el selector body estamos aplicando la fuente Times a toda nuestra página web con un color rojo y de fondo de pantalla el color #d8da3d que corresponde a un amarillo. La siguiente regla, decimos que los encabezados h1 y h2 su fuente será distinta, en este caso Arial y el color de estos azul en particular el #2980B9. Mencionaros que los colores en CSS2 pueden declararse de tres formas:
- Hexadecimal
- RGBA (Red Green Blue Alpha)
- Colores básicos en ingles
- Reglas a un elemento
Estas reglas solo se aplican a un único elemento de la página, para ello debemos tener definido en nuestro HTML a través del atributo id: <p id=»elemento1″> Para aplicarle estilo a este elemento en nuestro archivo lo haríamos así: #elemento1 { font-family: “Arial”;} - Reglas a un conjunto de elementos (clase)
En nuestro HTML tenemos que tener un conjunto de elementos declarados con el mismo valor en el atributo class, no tienen por qué ser del mismo tipo de etiqueta. Por ejemplo en nuestro HTML tenemos: <br class=»clase1″ > <a href=»www.programarfacil.com» class=”clase1”>Web Programar Fácil</a> En nuestro CSS aplicaríamos el diseño al conjunto de etiquetas que tengan declarado el atributo class=”clase1” de la siguiente forma: .clase1 { align: center; font-size: 12px; } - Elemento y clase
Para aplicar estilo a un elemento de HTML que tenga declarada el atributo class lo haríamos de la siguiente forma: a.clase1 { font-family: «Times New Roman»; } Esto solo se aplicaría para las etiquetas “a” (enlaces) que tuvieran declarada la class=”clase1”, por lo que no se aplicaría para cualquier enlace o para cualquiera etiqueta que tuviera declarado el atributo class=”clase1”.
Existen más tipos de reglas para aplicar estilo en nuestros archivos CSS, como serian los referentes a los eventos. Pero los que os hemos mostrado son los más importantes y por donde debéis empezar.
La última versión de CSS es el CSS3, este nuevo estándar trae muchos cambios os listamos unas cuantas de ellas:
- Bordes redondeados
- Utilizar imagen como borde
- Varias imágenes de fondo superpuestas
- Colores con el canal Alpha (Trasparencia)
- Fuentes alojadas en servidor
- Efectos en texto
- Trasformar objetos, darle animación
Os ponemos un ejemplo de cómo modificar el borde y hacerlo redondeado:
#rcorners1 {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
}
No podemos terminar este artículo sin recordaros que con la multitud de resoluciones y diferentes dispositivos que hoy se conectan a la web, necesitamos hacer las webs para que se ajusten a estos diferentes tamaños, moviendo el contenido y siempre intentando que sean amigables. Esto lo conseguimos con CSS Responsive. Para que veáis la importancia que tiene, el buscador Google penaliza desde Abril de 2015 a aquellas páginas que no estén preparadas para dispositivos móviles.
Para realizar esta tarea os recomendamos que utilicéis un frameworks que os facilitara mucho la tarea, os dejamos tres para que los probéis:
