Como en el caso del tutorial de HTML: un tutorial básico de CSS; hay mucho más para aprender, pero por algo hay que empezar.
El lenguaje CSS vio la luz en 1996, unos cuantos años más tarde que HTML. Por ello, durante esos años, el formateo del contenido de las páginas web se hacía mediante HTML.
Las Hojas de Estilo en Cascada, Cascading Style Sheets (CSS), se utilizan para dar formato al contenido de las páginas web (colores, tamaños y tipos de letra de cada una de las partes del texto y/o de los bloques de la página, márgenes, colores de fondo de las distintas partes, formato de los enlaces,…). Desde hace unos cuantos años, HTML solo se utiliza para estructurar el contenido de las páginas web (títulos, párrafos, listas, tablas, enlaces, bloques de texto,…).
Uno de los interés de CSS está en que se pueden enlazar (mediante la etiqueta link colocada dentro de la etiqueta head) varias páginas web a un mismo archivo CSS (.css) que les dará el formato; por tanto, modificando ese archivo CSS se modificarán todos los archivos HTML que lo enlacen, por lo que no es necesario hacer las modificaciones de formato página a página (por ejemplo, si son 20 páginas, modificaciones en todos los elementos que se quieran cambiar de 20 páginas… ¡Y no te olvides ninguno!).
También se puede poner código CSS directamente en el código de una página HTML:
style de HTML, esta se coloca dentro de la etiqueta head de la página HTML y afecta a todos los elementos correspondientes de la página;style de HTML, este se coloca en cualquier etiqueta de HTML y solo afecta a dicho elemento (es un método muy poco eficiente y no muy diferente a aplicar estilos mediante etiquetas de presentación de HTML, si posteriormente se desea modificar algún formato de una etiqueta se deberán buscar dichas etiquetas por todo el archivo HTML). No se volverá a hablar más de esta opción en este tutorial.El término en cascada de CSS alude a que hay un orden de prioridades en el caso de que se definan varios estilos para un mismo tipo de elemento. En lo que se va ha explicar aquí este orden de prioridades es el siguiente:
link;style (puesta en la cabecera de la página), estos sobrescriben a los del archivo CSS externo;style, estos sobrescriben a los de la etiqueta style.
Otros estilos existentes son el que utiliza cada navegador y el personalizado por el usuario (cuando se aplica el modificador !important este estilo tiene prioridad sobre todos los demás; por ejemplo: {font-size: 16px !important;}). Al respecto de esto, dado que nada se puede hacer, no se dirá nada más.
Lo primero que te hará falta es un editor de texto (no un procesador de texto, este formatea el texto y lo hace ininteligible a los navegadores). Como editor de texto bien te puede servir el Bloc de Notas que viene con tu sistema operativo (aunque puedes encontrar muchos editores de texto especializados, gratuitos y de pago, en Internet). No olvides que cuando guardes los archivos que hayas hecho debes hacerlo con la extensión .css, no con la extensión .txt.
Otra cosa imprescindible que te hará falta es tener/hacer un archivo HTML en el que aplicar los formatos del archico CSS.
Y la otra cosa imprescindible que te hará falta es un navegador web, tu sistema operativo seguro que ya tiene uno instalado.
Así que si tienes ordenador ya tienes todo lo necesario para hacer una página web que incluya formateo del contenido.
La estructura básica de una regla está constituida por uno o más selectores y su declaración (con sus propiedades y sus valores correspondientes). Veamos un ejemplo:
h1 {color: #FFFF00; background-color: #555555}
Donde:
{ y }: encierran los elementos de la declaración de un selector;color, background: son las propiedades de este ejemplo a las que se les va a especificar el formato que deben tener;:: dos puntos, introduce el valor de una propiedad;;: punto y coma, separa propiedades entre si;#FFFF00 y #AAAAAA: son los valores que toman las propiedades de este ejemplo.Los elementos del selector (las propiedades y sus valores) definen los estilos a aplicar a los elementos del documento HTML correspondientes al selector (en este ejemplo: el formato, color del texto y del fondo, que tendrán todas las cabeceras de tipo 1 que aparezcan en la página web).
Veamos un ejemplo de CSS aplicado a una página HTML mediante la etiqueta style1):
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Un mal sueño</title> <style> body {background-color: #5555ff} h1, h2 {color: #FFFF00; background-color: #55555f; font-family: verdana; font-size: 3em} p {color: #555555; background-color: #EEEEEE; font-family: arial, sans-serif} </style> </head> <body> <h1>Un mal sueño lo tiene cualquiera</h1> <p>Se despertó con el corazón empapado y el cuerpo acelerado, o algo así le parecía. Trató de mirar a su alrededor pero no consiguió ver nada en la oscuridad de la habitación; eso le calmó... Hasta que pensó que quizá la pesadilla siguiese acechando en la oscuridad, a la espera de que se volviese a dormir.</p> <p>"Pero habrá que dormir", se dice.</p> </body> </html>
Para ver el resultado puedes copiar el código y pegarlo en el editor de texto que gustes, guardarlo como archivo html y abrir dicho archivo. También puedes guardar directamente el archivo pinchando en pagina_con_css_style.html que hay justo encima del recuadro del código. O, también, puedes copiar el código y pegarlo en el editor en línea de W3Schools (aprovecha para modificar el valor de las propiedades para ver el efecto que esto produce).
Se pueden agrupar varios elementos, separados mediante comas, para darles el mismo formato. En el ejemplo no hay encabezados de tipo h2, pero si los hubiese estos se verían igual que los de tipo h1 ya que se ha puesto que tienen el mismo formato (añade un encabezado de tipo h2 al código del ejemplo para comprobarlo).
Para los párrafos se han definido dos tipos de letra: font-family: arial, sans-serif. El segundo tipo es para usar en caso de que el primero no esté disponible.
La etiqueta link, que como ya se ha dicho se colocada dentro de la etiqueta head, tiene el siguiente formato:
<link href=“…” rel=“stylesheet”>.
Donde los puntos suspensivos, …, indican la ruta (relativa o absoluta) al archivo CSS.
Veamos un ejemplo basado en el ejemplo anterior: en vez de poner el código CSS dentro del archivo HTML se va a poner en un archivo CSS al que se enlazará en la página HTML. Ambos archivos se encontrarán en la misma carpeta, por lo que la ruta al archivo CSS será, simplemente, el nombre del archivo.
El archivo CSS:
body { background-color: #5555ff } h1, h2 { color: #FFFF00; background-color: #55555f; font-family: verdana; font-size: 3em } p { color: #555555; background-color: #EEEEEE; font-family: arial, sans-serif }
El código es el mismo del ejemplo anterior pero se ha modificado la presentación para mejorar la legibilidad.
El archivo HTML, que enlaza al archivo CSS mediante <link href=“estilo_css.css” rel=“stylesheet”>:
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Un mal sueño</title> <link href="estilo_css.css" rel="stylesheet"> </head> <body> <h1>Un mal sueño lo tiene cualquiera</h1> <p>Se despertó con el corazón empapado y el cuerpo acelerado, o algo así le parecía. Trató de mirar a su alrededor pero no consiguió ver nada en la oscuridad de la habitación; eso le calmó... Hasta que pensó que quizá la pesadilla siguiese acechando en la oscuridad, a la espera de que se volviese a dormir.</p> <p>"Pero habrá que dormir", se dice.</p> </body> </html>
Copia los códigos con un editor de texto, guárdalos con sus nombre correspondientes (o guarda los archivos pinchando sobre el nombre de los mismos) y abre el archivo HTML con el navegador web para ver el resultado. También puedes utilizar el editor en línea de Cubic Factory para visualizarlo (tienes que tener activos los paneles HTML, CSS y Output para poder introducir el código en los dos primeros y visualizar el resultado en el tercero).
Hace referencia a todos los elementos de un mismo tipo. Un ejemplo de este selector sería el primero que se presentó:
h1 {color: #FFFF00; background-color: #555555}, este selector modifica todos los encabezados de tipo 1.
Da formato a los elementos HTML que contengan el atributo class que se define. En el archivo CSS este tipo de selector va precedido de un punto, pero en el código HTML ese punto no se pone. Un nombre de clase puede ser usado en múltiples elementos HTML. Por ejemplo, tiene la forma:
.serepite {color: #434343; background-color: #DDDDDD; font-size: 1em; font-family: segoe ui, comic sans ms}, modifica todos los elementos cuyo valor del atributo class sea serepite.
El el tutorial de HTML en su apartado enlaces se habló del atributo id cuando se explicaron las marcas y se especificó que un nombre de id solo puede ser usado por un elemento HTML de la página (no puede haber dos marcas en la misma página con el mismo nombre). En el archivo CSS este tipo de selector va precedido de un símbolo #, pero en el código HTML el símbolo # no se pone para definir el identificador (sí se pone el símbolo # cuando se usa el identificador en un enlace, como marca para ir a ese punto concreto de la página; si es necesario, véase el apartado enlaces). Por ejemplo, tiene la forma:
#NombreDeLaMarca_h1 {color: #FFFF00; text-align: center; background-color: #000000; font-family: Georgia}
Un ejemplo completo (archivo CSS y HTML):
h1 { color: #FFFF00; font-size: 2em; background-color: #555555; } h1.normal { font-weight: normal; } p {color: #434343; font-family: arial; background-color: #AAAAAA; } #torre, #alfil { color: #FFFF00; font-family: Georgia; font-size: 1.5em; text-align: center; background-color: #000000; } .serepite { color: #009900; font-family: Georgia; font-size: 1em; background-color: #BBBB00; } .serepite span { font-size: 1.5em; } .ennegrita { font-weight: bolder; }
Las propiedades que no se especifiquen tendrán el valor por defecto. Por ejemplo, no se ha especificado el tamaño de texto que tendrán los párrafos (selector p) por lo que los párrafos (<p></p>) tendrán el tamaño de letra por defecto.
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ajedrez</title> <link href="ajedrez_css.css" rel="stylesheet"> </head> <body> <h1>Ajedrez</h1> <h1 id="torre">Torre</h1> <h1 class="normal">Movimiento de la torre</h1> <p class="serepite">La torre sólo puede mover de manera <span>paralela</span> o <span>perpendicular</span> a los jugadores, es decir, sólo puede jugar a través de las filas y columnas.</p> <p>Es por ello que como máximo puede jugar 14 casillas, ya se encuentre esta en el centro, en el lateral o en una esquina del tablero.</p> <p class="serepite">No puede, como ocurre con el caballo, pasar por encima de otras piezas o peones, ya sean propias o del contrario.</p> <h1 id="alfil">Movimiento del alfil</h1> <p class="serepite ennegrita">Más texto...</p> </body> </html>
Las etiquetas h1 y p tienen su formato definido por los selectores tipo h1 y p, pero hay varios párrafos que tienen un formato diferente porque llevan un atributo de tipo class cuyo selector, definido en el archivo CSS, los modifica.
id=“torre” e id=“alfil” son identificadores únicos con su propio formato (diferente del del otro encabezado de tipo 1) definido en el archivo CSS mediante los selectores de tipo identificador #torre, #alfil. Además, son marcas a las que se puede enlazar para ir a esa parte concreta de la página.
En el archivo HTML se pueden tener atributos class con múltiples valores, separados por espacio, de los que tomarán su formato; en el ejemplo: class=“serepite ennegrita” (con lo que se obtiene el formato combinación de los atributos de los selectores serepite y ennegrita.
También se pueden combinar selectores de tipo con selectores de clase; por ejemplo: h1.normal {font-weight: normal;} en el archivo CSS y el código <h1 class=“normal”>Movimiento de la torre</h1> en el archivo HTML (con lo que se obtiene un encabezado de tipo 1 con un grosor de fuente normal, en vez de en negrita).
Veamos unos ejemplos:
.serepite span {font-size: 1.5em;} aplicará el formato a las etiquetas span anidadas en una etiqueta .serepite; div span {…} aplicaría el formato a las etiquetas span anidadas en una etiqueta div; nav a {…} aplicaría el formato a las etiquetas a (enlaces) anidadas en una etiqueta nav (las etiquetas HTML div y span se tratarán un poco más adelante).color2): especifica el color, por ejemplo: {color: rgb(128,128,128);} u {color: #888888;} u {color: #888;}. Uso en color, para el color del texto, background-color y border-color;opacity: valor entre 0, transparente, y 1, opaco;background:background-color: especifica el color del fondo, por ejemplo: {background-color: rgb(255,255,255);} o {background-color: #FFFFFF;};background-image: específica una imagen de fondo (por ejemplo, para una imagen jpg llamada fondo que se encuentra en la misma carpeta: {background-image: url(fondo.jpg);};background-position: por ejemplo: left top;background-repeat: valores: repeat, no-repeat;font:font-family: especifica el tipo de letra, se pueden indicar tantas como se desee. Familias genéricas de fuentes: serif, sans-serif, cursive y monospace. Por ejemplo: {font-family: monospace;};font-size: especifica el tamaño del texto, es recomendable usar tamaños relativos (como em o %) para permitir al usuario cambiar el tamaño de la fuente según sus necesidades; 1em o 100% corresponderá a 16px si no se a definido otra cosa con anterioridad (como body {font-size: 12px;}, verbigracia). O se puede usar la unidad vw (viewport width) que permite el cambio automático del tamaño de fuente en función del tamaño de pantalla. Por ejemplo: body {font-size: 100%;} y para el resto de elementos utilizar em, {font-size: 1em;}, {font-size: 'X'em;},…:xx-small, x-small, small, medium, large, x-large, xx-large);larger, smaller);em, vw, px, cm, mm, in,…);%).font-style: especifica el tipo de letra (normal, italic y oblique). Por ejemplo: {font-style: italic;};font-weight: especifica el grosor de los caracteres (lighter, normal, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900). Por ejemplo: {font-weight: bolder;}.text:text-align: especifica la lineación del texto (left, center, right, justify). Por ejemplo: {text-align: justify;};text-decoration: especifica alguna decoración (none, underline, overline, line-through, blink). Por ejemplo: {text-decoration: underline;};text-indent: especifica la sangría de la primera línea del texto (%, em, px, cm, mm, in,…). Por ejemplo: {text-indent: 8%;};text-transform: convierte el texto en minúsculas o en mayúsculas (none, lowercase, uppercase, capitalize). Por ejemplo: {text-transform: lowercase;}.letter-spacing: especifica la separación entre los caracteres del texto (%, em, px, cm, mm, in,…), admite números negativos. Por ejemplo: {letter-spacing: 2px;};word-spacing: especifica la separación entre las palabras del texto (%, em, px, cm, mm, in,…), admite números negativos. Por ejemplo: {word-spacing: 1em;};line-height: especifica la altura mínima entre las líneas del texto (%, em, px, cm, mm, in,…), no admite números negativos. Por ejemplo: {line-height: 1.5em4);};white-space: puede tomar los valores normal, pre, nowrap, pre-wrap, pre-line.vertical-align: top, middle, bottom;header, nav, main, article, figure, aside, footer, div,…:width: ancho del contenido (sin padding, border y margin, se verán a continuación); height: alto del contenido (sin padding, border y margin);min-width;min-height;max-width;max-height.content: el contenido que hay en un contenedor;padding: relleno, deja un espacio vacío alrededor del contenido de un contenedor, es opcional. Se puede especificar de manera individual el espaciado de cada uno de los lados:padding-top;padding-left;padding-bottom;padding-right.border: borde de un contenedor, es opcional. Por ejemplo: {border: 1px outset rgb(34,139,34)}, {border: 1px solid #aaaaaa};border-collapse: collapse, no-collapse;border-color: por ejemplo: rgb(34,139,34);border-spacing: por ejemplo: 0px;border-style: solid, dotted;border-width: 'X'px, 'X'em, medium, thick,… Ejemplo: 5px 4px 3px 2px (en el orden: arriba, derecha, abajo, izquierda), 5px 2px (arriba y abajo, derecha e izquierda).margin: margen de un contenedor, es opcional, es transparente. Entre dos contenedores adyacentes el margen total es el margen mayor de los dos contenedores, no la suma de los márgenes de ambos contenedores (ejemplo: dos contenedores adyacentes, uno con un margen de 10px y otro con un margen de 20px: el margen de separación entre los contenedores no es 30px, la suma, es de 20px, el mayor de ellos) Se puede especificar de manera individual el espaciado de cada uno de los lados:margin-top;margin-left;margin-bottom;margin-right.clear;display: por ejemplo: block;visibility;float: flotante, permite modificar la disposición, por ejemplo: left inicia a la izquierda (y en una lista lo hace en horizontal), center el valor por defecto (en una lista, en vertical), right inicia a la derecha (y en una lista lo hace en horizontal);overflowoverflow-x;overflow-y.box-sizing (CSS3):content-box: para que la anchura y la altura especificada afecta solo al contenido;padding.box: para que la anchura y la altura especificada afecta al contenido y al padding;border-box: para que la anchura y la altura especificada afecta al contenido, al padding y al borde;inherit: hereda el formato del elemento padre.inherit: este valor sirve para que el elemento sobre el que se aplica herede el formato del elemento padre. Por ejemplo: a {color: inherit;};initial: este valor sirve para que el elemento sobre el que se aplica no herede el formato del elemento padre. Por ejemplo: p {color: initial;}.Aquí se van a presentar algunas otras etiquetas HTML que no aparecieron en el tutorial de HTML por ser dicho tutorial de carácter muy básico. Se presentan ahora por el interés que tienen para dar formato a diferentes partes de un archivo HTML.
header: es un contenedor que sirve para agrupar los elementos de la cabecera de la página HTML (título, banner, un eslogan,…);nav: es un contenedor que sirve para agrupar los elementos de navegación de la página HTML (el menú, un buscador interno y cualquier otra cosa que se considere que puede ir ahí);main: es un contenedor que sirve para agrupar los elementos del cuerpo de la página HTML;article: es un contenedor que sirve para agrupar elementos dentro del contenedor main;figure: es un contenedor que sirve para agrupar elementos de una figura dentro del contenedor article (una foto con su pie de foto y los datos de copyright, por ejemplo);aside: es un contenedor que sirve para agrupar elementos en un lateral de la página HTML (un buscador interno, etiquetas de búsqueda, noticias destacadas,…);footer: es un contenedor que sirve para agrupar los elementos del pie de la página HTML (datos de contacto, diseñador, año de creación,…);div: es un contenedor genérico que sirve para agrupar otros elementos HTML;blockquote: sirve para indicar que el texto que se incluye proviene de otra fuente;span: es una etiqueta que se utiliza (entre otras cosas) para dar formato con CSS;body: esta etiqueta encierra la totalidad de lo que se va a visualizar (sí, he mentido, esta etiqueta ya se vió en HTML);
Por ejemplo: se puede hacer que los enlaces dentro del contenedor nav tengan un formato diferente de los que se encuentren dentro del contenedor main, que cada contenedor tenga un color (o imagen) de fondo diferente, encerrar el contenido de un contenedor dentro de un recuadro,…
a:link {…}: formato de un enlace no visitado;a:visited {…}: formato de un enlace visitado;a:hover {…}: formato al situar el cursor sobre el enlace (se puede aplicar a otros elementos diferente de los enlaces), debe declararse en el archivo CSS después de a:link y a:visited;a:active {…}: formato al tener pulsado un enlace, debe declararse en el archivo CSS después de a:hover.
list-style-type puede tomar los valores disc, circle square y none.
Por ejemplo:
ul {list-style-type: square;}; .disco {list-style-type: disc;} en el archivo CSS y <ul class=“disco”>…</ul> en el archivo hTML.
list-style-type puede tomar los valores decimal, decimal-leading-zero, lower-latin, upper-latin, lower-roman, upper-roman, lower-greek, upper-greek, lower-alpha, upper-alpha,…
Por ejemplo:
ol {list-style-type: lower-roman;}; .minusculas {list-style-type: lower-latin;} en el archivo CSS y <ol class=“minusculas”>…</ol> en el archivo hTML.
list-style-position puede tomar los valores outside (valor por defecto) e inside.
Por ejemplo:
.dentro {list-style-position: inside;} en el archivo CSS y <ol class=“dentro”>…</ol> en el archivo hTML.
list-style-image, sirve para poner una imagen como marcador de los elementos de una lista.
Por ejemplo:
.elefante {list-style-image: url(“elefante.png”);} en el archivo CSS y <ul class=“elefante”>…</ul> en el archivo hTML.Veamos como hacer menús de navegación mediante dos ejemplos: uno para una barra de navegación vertical y otro para una barra de navegación horizontal (para simplificar, y no generar dos archivos, el código CSS se incluye en el archivo HTML dentro de una etiqueta style).
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ejemplo de barra de menú vertical</title> <style> .no-style { list-style-type: none; margin: 0; padding: 0; } .vertical a { display: block; width: 100px; text-decoration: none; text-align: center; padding: 5px; color: #EEEEEE; background-color: #888888; } .vertical a:hover, .vertical a:active { background-color: #555555; } </style> </head> <body> <ul class="no-style vertical"> <li><a href="pagina1.html">Página 1</a></li> <li><a href="pagina2.html">Página 2</a></li> <li><a href="pagina3.html">Página 3</a></li> </ul> </body> </html>
<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ejemplo de barra de menú horizontal</title> <style> .no-style { list-style-type: none; margin: 0; padding: 0; } .horizontal li { float: left; } .horizontal a { display: block; width: 100px; text-decoration: none; text-align: center; padding: 5px; color: #EEEEEE; background-color: #888888; } .horizontal a:hover, .horizontal a:active { background-color: #555555; } </style> </head> <body> <ul class="no-style horizontal"> <li><a href="pagina1.html">Página 1</a></li> <li><a href="pagina2.html">Página 2</a></li> <li><a href="pagina3.html">Página 3</a></li> </ul> </body> </html>
Para ver el resultado puedes copiar el código y pegarlo en el editor de texto que gustes, guardarlo como archivo html y abrir dicho archivo. También puedes guardar directamente el archivo pinchando en menu_vertical.html o menu_horizontal.html que hay justo encima del recuadro del código. O, también, puedes copiar el código y pegarlo en el editor en línea de W3Schools.
Se pueden hacer comentarios del código CSS. Estos pueden ser útiles a la persona que realiza la página para clarificar. Su sintaxis es la siguiente: /* comentario */.
Si quieres asegurarte de que el código de tu archivo CSS es correcto puedes usar un validador. Te recomiendo el validador en línea del World Wide Web Consortium (W3C). Otro enlace al validador.
Esto solo pretende ser un tutorial introductorio para quien no conoce nada. Lo visto hasta aquí sería solo algo del contenido de CSS1; no se han tratado contenidos de CSS2 o CSS3 (a parte de las menciones esporádicas para indicar cosas por donde empezar a ampliar conocimientos; una más: te recomiendo que investigues sobre los media queries y el diseño adaptativo).
Y una genérica: en los navegadores web hay la opción de ver el código fuente de la página (a través del menú contextual que aparece al hacer click con el botón derecho del ratón sobre el contenido de la página o en el menú herramientas), utilízala para ver el código de las páginas HTML y para acceder al archivo CSS a través del enlace al mismo que encontrarás en la cabecera. Con eso, practicando (escribiendo y modificando código) y revisando otros manuales más completos y la especificación CSS podrás avanzar muchísimo más.
Ir a HTML.