CSS

  Uso de elementos CSS en HTML

¿Qué es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una página web, se utiliza en primer lugar el lenguaje HTML, para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

El formato de cada elemento de una página web se especifica mediante declaraciones de estilo  denominadas reglas.

Fig 1: Elementos de una regla de css.

• Selector: indica el elemento o etiquetas HTML a los que se aplica la regla CSS. "a quién hay que hacérselo".

•  Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. "qué hay que hacer“ 

• Propiedad: permite modificar el aspecto de una característica del elemento.

• Valor: indica el nuevo valor de la característica modificada en      el elemento.

Funcionamiento básico de CSS

Antes de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS, sin embargo se muestra como ejemplo de lo que NO se debe hacer. 

Fig 2: Uso de etiqueta obsoleta Font para dar color y tipo de letra.

El ejemplo anterior utiliza la etiqueta con sus atributos color, face y size para definir el color, la tipografía y el tamaño del texto de cada elemento del documento. El principal problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas . Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas . Como cada etiqueta tiene 3 atributos, habría que definir 1.5 millones de atributos. Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si se emplea la etiqueta , habría que modificar el valor de 1.5 millones de atributos para modificar el diseño general del sitio web. La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:

Fig 3: Uso de etiqueta obsoleta Font para dar color y tipo de letra.

CSS permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página. Utilizando CSS, en esa zona reservada se indica que todas las etiquetas de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio. Definiendo los estilos de esta forma, no importa el número de elementos que existan en la página, ya que todos tendrán el mismo aspecto establecido mediante CSS. Como se verá a continuación, esta forma de trabajar con CSS no es ideal, ya que, si el sitio web dispone de 10.000 páginas, habría que definir 10.000 veces el mismo estilo CSS.

¿Cómo incluir CSS en un documento HTML?

Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.

Fig 4: Formas de incluir CSS.

Incluir CSS en el mismo documento HTML

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta<style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web. Se puede observar en la figura 3, línea 5.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.

En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre a estilos.css y se incluye el siguiente contenido:

p { color: green; font-family: Verdana; }

A continuación, en la página HTML se utiliza la etiqueta <link> para enlazar el archivo CSS

externo que tiene los estilos que va a utilizar la página:

Fig 5: Uso de etiqueta link para integrar un archivo css externo.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:

• rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

• type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.

• href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

• media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.

De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.

Incluir CSS en los elementos HTML

El último método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.

Ejemplo:

Fig 6: Uso de etiqueta link para integrar un archivo css externo.

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.

Selectores

Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio en el capítulo anterior, una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".

La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cada regla CSS puede aplicarse a un número infinito de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas. 

La mayoría de las páginas de los sitios web se pueden diseñar utilizando solamente los cinco selectores básicos.

Selectores básicos

Selector universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):

Fig 7: Selector Universal todos los elemento tendrán un margen de cero.

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados.

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

Fig 8: Selector etiqueta.

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres <y>) correspondiente a los elementos que se quieren seleccionar.

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos. En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:

 

Fig 9: Mismas reglas para diferentes etiquetas.

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:

Fig 10: Selector etiqueta, con mismas reglas y elementos diferentes

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:

Fig 11: Selector descendente en el archivo css a la izquierda y código HTML a la derecha 

El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.

Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les   aplica la regla CSS anterior. Los selectores descendentes permiten mejorar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los <span> contenidos dentro de un <h1>:

Fig 12: Ejemplo de Selector descendente, dos reglas para span pero en diferente contenedor

Con las reglas CSS anteriores:

▪ Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo. Y Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.

▪ El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.

Selector de clase

Si se considera el siguiente código HTML de ejemplo:

Fig 13: Ejemplo de código HTML

¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.

Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:

Fig 14: Ejemplo del selector clase incluyendo la palabra class dentro del código HTML izquierda y definición de clase a la derecha

A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:

El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.

Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden incluir el mismo valor en el atributo class:

Fig 15: Selector class en diferentes elementos de html

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.

Selector de ID

En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso.

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página. 

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:

Fig 16: Selector Id en diferentes elementos de html

En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado). 

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class. 

De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores. El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo  que tenga un atributo id igual al indicado: 

p#aviso { color: blue; } 

A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica sobre muchas páginas HTML diferentes. 

En este caso, algunas páginas pueden disponer de elementos con un atributo id igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos elementos.

Anexo 2. Formato de texto 

Simplemente significa que vamos a cambiar la apariencia del texto. vamos a ver cómo cambiar el tamaño del texto, cambiar la fuente, alinear el texto …

Tamaño del texto 

Para cambiar el tamaño del texto, utiliza la propiedad CSS font-size. Pero, ¿cómo especificar el tamaño de la fuente? Aquí es donde las cosas se ponen difíciles, porque hay muchas técnicas disponibles:

Fig 1: Propiedad Tamaño del texto

Indicar un tamaño absoluto, relativo o en medidad como son: píxeles, centímetros o milímetros o puntos. Con el uso de medidas es un método muy preciso, pero es aconsejable utilizarlo sólo si es absolutamente necesario, porque puede indicar un tamaño demasiado pequeño para algunos lectores.

Indicar un tamaño relativo en tanto por ciento, <em> o <ex>, esta técnica tiene la ventaja de ser más flexible. lo que resulta más fácil a las preferencias de tamaño de los visitantes.

Tamaño absoluto. indica el tamaño de letra de forma absoluta mediante alguna de las siguientes palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large.

Ejemplo:

Fig 2: Ejemplo de tamaños de letra.

Código CSS

Código HTML

Cambiando el código Css del ejemplo anterior, tenemos

Podemos también utilizar el tamaño en "em". Si escribes 1em, el texto tiene un tamaño normal. Si deseas ampliar el texto, puede introducir un valor mayor que 1, como 1.3em. Si deseas reducir el texto, introduce un valor inferior a 1, como 0.8em. Ten cuidado: para los números decimales, debes poner un punto y no una coma. Tendrás que escribir "1.4em" y no "1,4em", Siguiendo con el HTML del ejemplo anterior y modificando solo el CSS tenemos.

Otras unidades están disponibles. Puedes probar el "ex" (que funciona con el mismo principio que em pero significa base más pequeña) y el porcentaje (80%, 130% ...).

Cambiar tipo de la Fuente

Para que un tipo de letra se visualice correctamente, se requiere que todos los usuarios que lo visiten tengan la fuente instalada en su sistema operativo. Si un usuario no tiene la misma fuente que supones como fuente predeterminada del navegador (tipo de letra estándar) lo que se muestra puede que no tenga nada que ver con lo esperado.

Fig 3: Propiedad Tipo de letra

La propiedad CSS que permite especificar el tipo de letra a utilizar es font-family. Debes escribir el nombre de la fuente así: 

etiqueta { font-family: fuente; }

Sólo para evitar problemas si el usuario no tiene la misma fuente que se precisa, en general se indican los nombres de diferentes fuentes, separados por comas:

etiqueta { font-family: fuente1, fuente2, fuente3, fuente4; }

El navegador intentará utilizar la fuente1. Si no es así, intentará la fuente2. Si no lo hace, se irá a la fuente3, y así sucesivamente.

En general, se indica la última como serif, que corresponde a una fuente predeterminada (que sólo se aplica si no se ha encontrado otra fuente). 

Ejemplo

p {font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; }

Esta línea significa: "pon la fuente impact, si no es así, “Arial Black”, o si no Arial, o si no Verdana o si nada funciona, poner un tipo de letra estándar (sans-serif).

En general, se indica una selección de tres o cuatro fuentes (+ serif o sans-serif) para asegurarse de que al menos una de ellas ha sido encontrada en el ordenador del visitante de nuestra web. Si el nombre de la fuente lleva espacios en blanco, entonces se ha de poner entre comillas, como por ejemplo “Arial Black”.

En CSS para definir un nuevo tipo de letra o fuente, debes declararlo así: @font-face { font-family: 'MiFuenteEsceptica'; src: url('MifuenteEsceptica.eot'); }

Estilo de fuente 

En CSS, para poner en cursiva, se utiliza font-style, que puede tomar tres valores:

• Italic: el texto en cursiva. 

• Oblique: el texto aparece oblicuamente (si las letras son examinadas, el resultado es ligeramente diferente de la cursiva). 

• Normal: el texto será normal (por defecto).

Fig 4: Propiedad Estilo de letra

Ejemplo.

h2 { font-style: italic;}

Esta línea es utilizada para poner en cursiva todos los títulos

Peso de la fuente

El grosor de la fuente se puede especificar con la propiedad weight algo que sustituye a la etiqueta b, ya que negritas indicaba visualizar la letra en color negro de una manera mas gruesa, pero como con CSS la fuente puede tener cualquier color entonces se usa Font-weight

Fig 5: Propiedad Peso de fuente

Esta línea pone en negrita todos los títulos

Subrayado y otras decoraciones 

La propiedad CSS asocia un nombre apropiado a: text-decoration. Permite, entre otros, resaltar el texto. 

Fig 6: Propiedad Decoracion de la fuente

Diferentes valores que puede tomar:

• underline: subrayado. 

• line-through: cruzado. 

• overline: línea encima. 

• blink: Intermitente. No funciona en todos los navegadores. 

• none: normal (por defecto). 

Ejemplo:

Alineación

CSS nos permite todas las alineaciones: izquierda, centro, derecha o justificada. Usamos la propiedad text-align y se indica la alineación deseada:

 Fig 7: Propiedad Estilo de letra

Ejemplo:

Interlineado 

Es el espacio que existe entre cada renglón, mejora notablemente la legibilidad de un texto.

Fig 8: Propiedad interlineado ejemplo con medidas relativas

Color y fondo

La propiedad que permite cambiar el color del texto: es color. Veremos distintas maneras de especificar el color, ya que hay varias.

• Indicar el nombre del color

La siguiente figura muestra los dieciséis colores que se pueden utilizar simplemente escribiendo su nombre.

Ejemplo: 

h1 { color: red; }

• Notación hexadecimal 

Dieciséis colores, es todavía un poco limitado si se considera que la mayoría de los monitores actuales pueden mostrar dieciséis millones.

se trata de una combinación de letras y números indicando un color. Siempre hay que empezar por escribir un sostenido (#) seguido de seis letras o dígitos del 0 al 9 y de A a F. Así, #000000 es el color negro #FFFFFF el blanco.

Ejemplo

p { color: #FFFFFF; }

• Método RGB

Si eliges un color, debes definir una cantidad de rojo, verde y azul. Ejemplo

p { color: rgb(240,96,204); }

Color de fondo

El código CSS que se utiliza para cambiar el color de fondo es background-color. Se emplea de la misma manera que la propiedad color, es decir, se puede escribir el nombre de un color, en notación hexadecimal o utilizar el método RGB. Ejemplo

 

• Una vez hayas terminado de leer y analizar la información, realiza un mapa conceptual con la información en tu libreta, presentalo para firmar

• Ingresa al siguiente enlace y da respuesta a las preguntas. https://forms.gle/zhqJMx7MwMAybB4k7