CSS
Introducción a CSS
¿Qué es CSS?
El CSS, Cascading Style Sheets, u Hojas de Estilo en Cascada, es un lenguaje utilizado para describir la presentación de un documento escrito en HTML o XML. Básicamente, CSS se encarga de la apariencia visual de las páginas web. Permite controlar aspectos como el diseño, los colores, las fuentes, los márgenes, el espaciado, la disposición de los elementos y más, separando el contenido de la estructura visual.
CSS es una de las grandes movidas de la W3C (The World Wide Web Consortium), separar la presentación de la estructura. En sus inicios, HTML llevaba toda la carga del "cómo se ve" un sitio, los colores, los tamaños se ponían como atributos en la etiqueta. No existía una manera de definir un estilo de manera general para el documento o peor, para un sitio.
El tema de la presentación incluida en la estructura, llevó al diseño de los sitios a utilizar elementos estructurales como tablas para poder controlar el espacio y la diagramación, desmereciendo los datos tabulados y amarrando los sitios a estructura rígidas de filas y columnas, en muchos casos, anidadas una dentro de otra tabla, tan mala práctica que llegó a tener verbo propio: "saber tablear".
Por otro lado, aunque en sus inicios no era un problema, se veía venir la multi plataforma o multiple dispositivos con diferentes tamaños y se necesitaba una manera de poder modificar y controlar la presentación para esos diferentes tamaños de pantalla que se especulaba que venían.
Por último, y como gran ventaja de este proceso de separación de la estructura y la presentación, es que ahora se podia generar equipos especializados y trabajar a 2 manos en un sito, allanando el camino para la mal llamada web 3 o páginas dinámicas.
Así es como con el HTML 4 se incorpora las hojas de estilo o Style Sheets en inglés, y se le quita la responsabilidad de la presentación a la estructura. Una forma general de aplicar estilos a diferentes elementos del documento pero como titiritero a distancia.
¿Cómo funciona CSS con HTML?
Hay 3 maneras de aplicar estilos en un documento. La más básica y fundamental es en la misma etiqueta, o sea "in-line", afectando directamente al elemento en sus estilos.
Para esto se ocupa el atributo styles y se pasan los parámetros a afectar y su valor, separados con punto y coma.
<p style="color: blue; font-size: 20px; text-align: center;">Este es un párrafo con estilo en línea.</p>En este ejemplo se aplica al párrafo el color azul, con la letra de 20 píxeles y alineado al centro.
Nota:
Pero esto, por otro lado, si bien, válido, contradice el espíritu de CSS, por lo que no se recomienda su uso.
La segunda manera es en la cabecera del documento, afectando a toda la página, lo cual permite aplicar a multiples elementos y centralizar los cambios en un solo punto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Sencilla</title>
<!-- Estilos CSS internos -->
<style>
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Estilo para el encabezado */
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
}
/* Estilo para la navegación */
nav ul {
list-style: none;
padding: 0;
text-align: center;
background-color: #333;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Estilo para las secciones */
section {
padding: 20px;
margin: 10px;
background-color: white;
border-radius: 5px;
}
/* Estilo para el pie de página */
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Bienvenido a mi página sencilla</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<section id="inicio">
<h2>Sobre nosotros</h2>
<p>Somos una pequeña empresa dedicada al diseño web.</p>
</section>
<section id="servicios">
<h2>Nuestros servicios</h2>
<p>Ofrecemos una variedad de servicios de desarrollo web y diseño gráfico.</p>
</section>
<footer>
<p>Contacto: ejemplo@correo.com</p>
</footer>
</body>
</html>En este ejemplo, se define en la cabecera del documento los estilos para toda la página a partir de sus etiquetas footer, section nav, header.
La tercera manera es que el documento HTML vincule a una hoja externa de CSS, y comparta esta hoja para todas las páginas de un sitio, lo que permite cambios y controles generales más rápidos de nuestros sitios.
Por un lado, creamos un archivo con las ordenes CSS con la extención .css. Por ejemplo style.css
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Estilo para el encabezado */
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
}
/* Estilo para la navegación */
nav ul {
list-style: none;
padding: 0;
text-align: center;
background-color: #333;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Estilo para las secciones */
section {
padding: 20px;
margin: 10px;
background-color: white;
border-radius: 5px;
}
/* Estilo para el pie de página */
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}Y en el documento HTML vinculamos la hoja de estilo en la cabecera del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Sencilla</title>
<!-- Vinculamos el archivo CSS externo -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenido a mi página sencilla</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<section id="inicio">
<h2>Sobre nosotros</h2>
<p>Somos una pequeña empresa dedicada al diseño web.</p>
</section>
<section id="servicios">
<h2>Nuestros servicios</h2>
<p>Ofrecemos una variedad de servicios de desarrollo web y diseño gráfico.</p>
</section>
<footer>
<p>Contacto: ejemplo@correo.com</p>
</footer>
</body>
</html>En este ejemplo se utiliza la etiqueta <link> para vincular un documento externo "styles.css" que tiene las instrucciones de como debe afectar las etiquetas HTML. Si se vincula en todas las páginas, todas tienen el mismo estilo para los mismo elementos.
Y estas 3 posibilidades son las que definen la parte en "cascada" de Cascading Style Sheets. Se va aplicando el estilo de lo general, hoja externa, local, en la cabecera de una página y en el objeto. Y a medida que está más cerca del objeto, tiene mayor importancia y hace la modificación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo con CSS Externo e Inline</title>
<!-- Vinculamos el archivo CSS externo -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenido a la página con CSS Externo e Inline</h1>
</header>
<section id="contenido">
<h2>Estilos en acción</h2>
<!-- Párrafo con estilo en línea -->
<p style="color: red; font-size: 18px; text-align: right;">
Este es un párrafo con estilo en línea (inline), que cambia el color a rojo, el tamaño de fuente a 18px y alinea el texto a la derecha.
</p>
<p>
Este párrafo no tiene estilos en línea, pero sigue el diseño general aplicado desde el archivo CSS externo.
</p>
</section>
</body>
</html>/* Estilo para la cabecera */
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
/* Estilo para las secciones */
section {
padding: 20px;
margin: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
/* Estilo para los párrafos generales */
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}En este ejemplo, se define en "styles.css" el comportamiento del los párrafos, pero en el mismo documento, en un párrafo, se define que va a ser rojo, de 18px y alineado a la derecha.
Hojas de estilos en cascada es la manera mas cómoda de definir los parámetros generales de la presentación del sitio y se puede ir modificando a medida que un objeto tenga diferencias.
Estructura de CSS
Como ya vimos en los ejemplos, cuando escribimos una orden general, para el documento o para el sitio, la instrucción está compuesta de 3 partes. Selector, a quien se quiere afectar, propiedades de elemento que se quiere afectar y valor que se quiere modificar. O sea, el navegador que usemos va a tener una hoja básica para afectar los elementos estructurales HTML y presentarlos como un predeterminado.
Nota:
Es por esto que siempre es importante revisar en todos los navegadores antes de dar por terminado el sitio.
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}La primera parte es el selector, el “a quién se quiere afectar”, en el ejemplo anterior, a las etiquetas <p> de párrafo de nuestro documento web. Este selector no es necesario cuando estamos en la misma etiqueta o in-line ya que sabe a quien afectar, pero si cuando vamos a generalizar para la página o en un archivo externo para el sitio.
Ya dentro de los corchetes, tenemos las propiedades que queremos afectar y el valor que queremos aplicar a esa propiedad. En el ejemplo anterior del párrafo, queremos cambiar la propiedad font-family o la tipografía, para que use Arial y si no está instalado en el equipo del usuario, como segunda opción, va a usar cualquier sans-serif que tenga en su equipo como valor. También cambia la propiedad font-size o tamaño de la tipografía por 16 píxeles como valor y por último aplica un color gris a los textos de los párrafos. Y se puede aplicar mas modificaciones usando la relación propiedad/valor a un selector que queremos que pise de la interpretación original que hace el navegador de los elementos en la página.
Veamos estas 3 partes por separado ya que hay más maneras de atrapar un elemento que por su etiqueta. Hay muchas propiedades que conocer y qué elementos lo tienen o lo necesitan, así como diferentes valores, estáticos y dinámicos que se le pueden asignar a la propiedad del elemento seleccionado.
Selectores
Hay varias maneras de seleccionar qué elementos de la página se quiere afectar de manera general.
Selector de elementos
La manera más general es afectar por etiqueta HTML del documento como vimos en los ejemplos anteriores.
section {
padding: 20px;
margin: 10px 0;
background-color: white;
border-radius: 5px;
border: 1px solid;
}
En este ejemplo se afecta las etiquetas HTML <section> del documento y a ellas se aplica un padding interior de 20 píxeles en todos sus 4 lados, un margen exterior de 10 píxeles arriba y abajo y de cero para la izquierda y derecha, el color de fondo blanco y el radio de los 4 bordes de 5px que no se va a ver si no se agrega un borde al objeto de un pixel de grueso de manera solida.
Selectores de ID
La otra es manera de seleccionar un elementos es por su identificador único o atributo id de un objeto. Este atributo, si bien nació para trabajar con JavaScript un objeto único, rápidamente fue adoptado por CSS ya que es altamente identificable. La única condición es que solo puede haber un objeto en la página con ese “id”. (si no, no sería un identificador único).
<h1 id="mi-titulo">Este es mi título principal</h1>En este caso, tenemos un elemento heding <h1> con el atributo id “mi-titulo”, por lo que en los estilos, se puede afectar a ese elemento por su id o simplificado por su “#”.
#mi-titulo {
color: blue;
font-size: 24px;
text-align: center;
}En este ejemplo se aplica un color azul, tamaño 24 píxeles y texto centrado al elemento que tiene el ID “mi-título”.
Selectores de clase
La otra manera es afectar los objetos de una página es por clases o sea, cuando quiero usarlo en varios elementos de la página.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de selector por clase</title>
<style>
.destacado {
border: 1px solid #ccc;
background-color: #f9f9f9;
padding: 10px;
}
</style>
</head>
<body>
<div class="destacado">
Esta sección es destacada.
</div>
<p class="destacado">Este párrafo también es destacado.</p>
<ul>
<li class="destacado">Este elemento de lista también.</li>
</ul>
</body>
</html> En este ejemplo, se ocupa el atributo class destacado en tres tipos diferentes de elementos, un
<div>. un <p> y un <li> y se define en los estilos con un punto antes del nombre del selector en los elementos para diferenciarlo del # del id o de la pura etiqueta.
La diferencia con usar como selector los id o la etiqueta HTML, es que se puede aplicar a varios elementos no importando su tipo.
Selectores de atributo
Otra manera es seleccionar por un atributo de los elementos, y si bien es menos ocupada, es muy útil para muchas efectos comunicacionales o de comportamiento.
[data-tooltip] {
cursor: help;
}En este ejemplo, busca los elementos con atributo data-tooltip y cambia el cursor a un signo de interrogación.
Se puede volver mas complejo y dinámico si aplicamos operadores al selector
Otros operadores de selección por atributo
| = | Coincide con un valor exacto. | Ej: a[href="https://example.com"] |
| ~= | Coincide si el valor es una palabra en una lista separada por espacios. | Ej: input[class~="error"] |
| ^= | Coincide si el valor comienza con una cadena específica. | Ej: a[href^="http://"] |
| $= | Coincide si el valor termina con una cadena específica. | Ej: img[src$=".svg"] |
| *= | Coincide si el valor contiene una cadena específica. | Ej: div[class*="highlight"] |
a[href$=".pdf"] {
color: blue;
}
En este caso, todos los elementos <a> que apunten a un “.pdf” en su atributo href, serán de color azul.
Selectores universales
Otra manera es hablar con todos los selectores o en general para todos los elementos de la página. Generalmente se usan al principio de la hoja de estilo para partir con foja cero en los estilos y pisar los predeterminados del navegador que varían mucho entre navegadores.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}En este ejemplo se usa el selector * (universal o comodín) para decirle a todos los elementos que van a tener un margen de cero píxeles, un padding de cero píxeles, un box-sizing que modifica la forma en que se calcula el ancho y alto de un elemento y la tipografía Arial o sans-serif si no hay Arial.
Nota:
Esta es una buena manera de partir con foja cero el diseño de una página y que se vea igual en todos los navegadores.
Selectores combinados
Por último, podemos combinar todos los anteriores y trabajar con la estructura del documento para ser más específico en los elementos que queremos afectar y la condición en la que queremos aplicar esas propiedades.
div p { /* Todos los párrafos dentro de un div */ }
div.mi-clase p { /* Todos los párrafos dentro de un div con la clase mi-clase */ }
div > p { /* Solo los párrafos que son hijos directos de un div */ }
h2 + p { /* El párrafo que viene inmediatamente después de un encabezado h2 */ }
h2 ~ p { /* Todos los párrafos que vienen después de un encabezado h2 */ }<div class="container">
<h2>Título de la sección</h2>
<p>Este es el primer párrafo.</p>
<p class="especial">Este párrafo es especial.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>.container p {
color: blue;
}Propiedades
Valores
Depende de la propiedad que se quiere afectar pueden variar los valores que se pueden aplicar. Sin embargo, a nivel genereal, es bueno conocer y dominar al menos los parámetros de color y tamaño que se manejan en CSS.
Colores
Hay 3 maneras de pasar color a los elementos en CSS: por su nombre en ingles, en hexadecimal o directamente como RGB, sobre todo si se quiere afectar un cuarto canal de alpha o transparencia.
Por nombre
Como texto por su nombre en ingles, un listado de colores básicos sería:
| Nombre | Traducción | Color |
|---|---|---|
| Aqua | Agua | |
| Black | Negro | |
| Blue | Azul | |
| Fuchsia | Fucsia | |
| Gray | Gris | |
| Green | Verde | |
| Lime | Lima | |
| Maroon | Granate | |
| Navy | Azul marino | |
| Olive | Verde Oliva | |
| Purple | Morado | |
| Red | Rojo | |
| Silver | Plateado | |
| Teal | Verde azulado | |
| Violet | Violeta | |
| White | Blanco |
Nota:
Se puede encontrar una lista completa de colores en https://www.w3schools.com/TAGs/ref_colornames.asp
Por hexadecimal
Si bien es práctico usar los colores por su nombre, en muchos proyectos necesitamos mas control que el listado simple, y de ahí nace tratarlo por sus colores de manera hexadecimal en RGB. No son difíciles de entender si es que entendemos como se componen los colores en los monitores y pantallas. Vamos por pasos para entender esto.
Venimos desde la educación primaria con la noción de que los colores básicos son rojo, amarillo y azul, y que la combinación de estos permite la generación del resto de la paleta de colores, rojo con amarillo hace naranja, azul y rojo hacen morado y azul y amarillo hace verde, a esto se llama color por adición.
Si bien esta noción básica permite salvar la educación primaria, la verdad es que no es cierto y el desarrollo de la imprenta descubrió muy rápido que los colores no son rojo, amarillo y azul, si no que Cyan, Magenta y Amarillo lo que logra el total de los colores sin convertirse en cafe, si a estos 3 básicos, se le suma un color de opacidad o Key y aparece el formato de imprenta y diseño CMYK (Cyan, Magenta, Yellow y Key).
Si bien el estándar CMYK, conocido como colores tierra (porque en el medioevo se generaban las pinturas al combinar diferentes tierras y minerales con oleo), resolvió el problema de los colores en imprenta, esto no resuelve ni ayuda con los colores en pantalla, básicamente porque los colores tierra son producto de luz reflejada por las superficies, mientras que las pantallas proyectan luz directa a los ojos del usuario.
Ya en los principios de la television se manejaba este problema con los colores luz, que es como se le llama a los colores que vemos sin estar reflejados y por eso es que la televisión también partió en blanco negro.
Con el desarrollo de la television a color se descubrió que no se podia utilizar CMYK como en imprenta, ya que los colores no se generaban por adición, si no que por sustracción, o sea todos los colores hacen el blanco y la falta de colores hace el negro. Nace entonces RGB, Red, Green, Blue (rojo, verde y azul) como los colores luz, la combinación de estos colores genera la paleta completa de colores que vemos en los monitores.
El otro problema a resolver era como se le transmitía al navegador que se quería afectar con diferente intensidad estos 3 colores. Aquí nace el hexadecimal, 3 pares de dígitos, uno para cada color, de cero, ausencia, a F, total presencia.
Vamos por partes, Si bien estamos acostumbrados a nuestro sistema numérico base 10, o sea del 0 al 9 y después sus combinaciones, no es el único sistema numérico que existe. De hecho, algo mas cercano, los sistemas binarios solo tienen 2 números: 0 y 1 y con estos se componen todos los números y letras que se necesitan.
El sistema hexadecimal es en base a 16, o sea: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Si, asusta, pero lo importante es entender que 0 es el número mas chico y la ausencia de luz y F es el número mas grande, o sea pura luz, y entre los extremos hay 14 posibilidades de mas o menos intensidad. Entonces, para represtar los colores vamos a dar mas o menos intensidad a cada color RGB, veamos algunos ejemplos:
#FF0000El primer carácter, el gato #, le dice al navegador que es un numero, el primer par puro rojo y sin luz para el verde y el azul,
#FFFFFFPor otro lado, pura luz en el rojo, en el verde y en el azul, hace que la luz sumada la veamos como blanca
#000000Y la ausencia total de rojo,verde y azul, cero luz, es negro como en la noche que no hay luz.
#FFA500Todo rojo, un poco de verde y nada de azul, genera un color naranja.
No se trata de aprenderse de memoria todos los colores posibles, que son muchos, si no que entender el concepto de los 3 colores a afectar y utilizar las herramientas de selección de color que facilitan los sistemas operativos o las aplicaciones para construir colores.
Nota:
cuando los pares son iguales, se les llama colores seguros, que son el mínimo de 256 colores que aceptaban los monitores en los inicios de la computación.
RGB
La tercera manera es definir el color con una función rgb() en el cual le pasamos la intensidad de los mismo 3 colores rojo, verde y azul, pero de 0 a 255
color: rgb(173, 216, 230)La mitad de rojo, un poco mas de verde y mucho azul, dan un colore celeste
Si bien este formato entrega mas control sobre la gama de colores, es menos utilizado que el hexadecimal.
RGBA
Una variación incorporada en CSS3 es la posibilidad de agregar un cuarto valor para controlar la transparencia, opacidad o alpha del color.
background-color: rgba(255, 0, 0, .5);Puro rojo, nada de verde, nada de azul y 50% de transparencia.
Unidades de medida
sobre las unidades