033.1 Lección 1

La forma más sencilla de modificar el estilo de un elemento específico es escribirlo directamente en la etiqueta del elemento usando el atributo style. Todos los elementos HTML visibles permiten un atributo style, cuyo valor puede ser una o más reglas CSS, también conocidas como properties. Comencemos con un ejemplo simple, un elemento de párrafo:

La sintaxis básica de una propiedad CSS personalizada es property: value, donde property es el aspecto particular que desea cambiar en el elemento y value define el reemplazo de la opción predeterminada realizada por el navegador. Algunas propiedades se aplican a todos los elementos y otras se aplican solo a elementos específicos. Asimismo, existen valores adecuados para ser utilizados en cada propiedad.

Para cambiar el color de nuestro párrafo simple, usamos la propiedad color. Esta propiedad se refiere al color foreground, es decir, de las letras del párrafo. El color en sí va en la parte de valor de la regla y se puede especificar en muchos formatos diferentes, incluidos nombres simples como red, green, blue, yellow, etc. Por lo tanto, para hacer la letra de el párrafo púrpura, agregue la propiedad personalizada color: purple al atributo style del elemento:

Otras propiedades personalizadas pueden ir en la misma propiedad de estilo, pero deben estar separadas por punto y coma. Si desea aumentar el tamaño de la fuente, por ejemplo, agregue font-size: larger a la propiedad style:

Para ver el resultado de estos cambios, guarde el siguiente HTML en un archivo y luego ábralo en un navegador web (los resultados se muestran en Figure 1):

Imagine cada elemento de la página como un rectángulo o una caja cuyas propiedades geométricas y decoraciones puede manipular con CSS. El mecanismo de renderizado utiliza dos conceptos estándares básicos para la colocación de elementos: colocación block y colocación inline. Los elementos en bloque ocupan todo el espacio horizontal de su elemento padre y se colocan secuencialmente, de arriba a abajo. Su altura (su dimensión vertical, que no debe confundirse con su posición top en la página) generalmente depende de la cantidad de contenido que tengan. Los elementos en línea siguen el método de izquierda a derecha similar a los lenguajes escritos occidentales: los elementos se colocan horizontalmente, de izquierda a derecha, hasta que no hay más espacio en el lado derecho, después de lo cual el elemento continúa en una nueva línea justo debajo de la actual. Los elementos como p, div y section se colocan en bloque de forma predeterminada, mientras que los elementos como span, em, a y letras individuales se colocan en línea. Estos métodos básicos de ubicación pueden modificarse fundamentalmente mediante reglas CSS.

El rectángulo correspondiente al elemento p en el cuerpo del documento HTML de muestra será visible si agrega la propiedad background-color a la regla (Figure 2):

A medida que agrega nuevas propiedades personalizadas de CSS al atributo style, notará que el código comienza a desordenarse. Escribir demasiadas reglas CSS en el atributo style socava la separación de estructura (HTML) y presentación (CSS). Además, pronto se dará cuenta de que muchos estilos se comparten entre diferentes elementos y no es aconsejable repetirlos en todos.

En lugar de diseñar los elementos directamente en sus atributos de style, es mucho más práctico informar al navegador sobre la colección completa de elementos a los que se aplica el estilo personalizado. Lo hacemos agregando un selector a las propiedades personalizadas, haciendo coincidir los elementos por tipo, clase, ID único, posición relativa, etc. La combinación de un selector y las propiedades personalizadas correspondientes — también conocidas como declaraciones — constituyen reglas CSS. La sintaxis básica de una regla CSS es selector { property: value }. Como en el atributo style, las propiedades separadas por punto y coma pueden agruparse, como en p { color: purple; font-size: larger }. Esta regla coincide con todos los elementos p de la página y aplica las propiedades personalizadas de color y font-size.

Una regla CSS para un elemento principal coincidirá automáticamente con todos sus elementos secundarios. Esto significa que podríamos aplicar las propiedades personalizadas a todo el texto de la página, independientemente de si está dentro o fuera de una etiqueta <p>, utilizando el selector body en su lugar: body { color: purple; font-size: larger }. Esta estrategia nos libera de escribir la misma regla nuevamente para todos sus hijos, pero puede ser necesario escribir reglas adicionales para “deshacer” o modificar las reglas heredadas.

La etiqueta <style> nos permite escribir reglas CSS dentro de la página HTML que queremos diseñar. Permite al navegador diferenciar el código CSS del código HTML. La etiqueta <style> va en la sección head del documento:

El atributo type le especifica al navegador qué tipo de contenido hay dentro de la etiqueta <style>, es decir, su MIME type. Ya que todos los navegadores que soportan CSS asumen que el tipo de etiqueta <style> es text/css por defecto, incluyendo el atributo type es opcional. También hay un atributo media que indica los medios (pantallas de computadora o impresión, por ejemplo) a los que se aplican las reglas CSS en la etiqueta <style>. De forma predeterminada, las reglas de CSS se aplican a cualquier medio en el que se presente el documento.

Al igual que en el código HTML, los saltos de línea y la sangría del código no cambian la forma en que el navegador interpreta las reglas CSS. El siguiente fragmento de código:

tiene exactamente el mismo resultado que este:

Los bytes adicionales utilizados por los espacios y los saltos de línea hacen poca diferencia en el tamaño final del documento y no tienen un impacto significativo en el tiempo de carga de la página, por lo que la elección del diseño es una cuestión de gustos. Tenga en cuenta el punto y coma después de la última declaración (font-size: larger;) de la regla CSS. Ese punto y coma no es obligatorio, pero tenerlo allí hace que sea más fácil agregar otra declaración en la siguiente línea sin preocuparse por los puntos y coma que faltan.

Tener las declaraciones en líneas separadas también ayuda cuando necesita comentar una declaración. Siempre que desee deshabilitar temporalmente una declaración por motivos de resolución de problemas, por ejemplo, puede encerrar la línea correspondiente con /* y */:

o:

Escrito así, el navegador ignorará la declaración font-size: larger. Tenga cuidado de abrir y cerrar los comentarios correctamente, de lo contrario, es posible que el navegador no pueda interpretar las reglas.

Los comentarios también son útiles para escribir recordatorios sobre las reglas:

Los recordatorios como el del ejemplo son prescindibles en hojas de estilos que contienen una pequeña cantidad de reglas, pero son esenciales para ayudar a navegar por hojas de estilos con cientos (o más) reglas.

Aunque el atributo style y la etiqueta <style> son adecuados para probar estilos personalizados y útiles para situaciones específicas, no se usan comúnmente. En cambio, las reglas de CSS generalmente se guardan en un archivo separado al que se puede hacer referencia desde el documento HTML.

El método preferido para asociar las definiciones CSS con un documento HTML es almacenar el código CSS en un archivo separado. Este método ofrece dos ventajas principales sobre los anteriores:

Los archivos CSS tienen la extensión .css y, al igual que los archivos HTML, pueden ser editados por cualquier editor de texto plano. A diferencia de los archivos HTML, los archivos CSS no tienen una estructura de nivel superior construida con etiquetas jerárquicas como <head> o <body>. Más bien, el archivo CSS es solo una lista de reglas procesadas en orden secuencial por el navegador. Las mismas reglas escritas dentro de una etiqueta <style> podrían ir en un archivo CSS.

La asociación entre el documento HTML y las reglas CSS almacenadas en un archivo se define solo en el documento HTML. Para el archivo CSS, no importa si existen elementos que coincidan con sus reglas, por lo que no es necesario especificar los documentos HTML a los que está vinculado. En el lado HTML, todas las hojas de estilos vinculadas se aplicarán al documento, como si las reglas estuvieran escritas en una etiqueta <style>.

La etiqueta HTML <link> define una hoja de estilo externa que se usará en el documento actual y debe ir en la sección head del documento HTML:

Ahora puede colocar la regla para el elemento p que usamos antes en el archivo style.css, y los resultados que verá el visitante de la página web serán los mismos. Si el archivo CSS no está en el mismo directorio que el documento HTML, especifique su ruta relativa o completa en el atributo href. La etiqueta <link> puede referirse a diferentes tipos de recursos externos, por lo que es importante establecer qué relación tiene el recurso externo con el documento actual. Para archivos CSS externos, la relación se define en rel="stylesheet".

El atributo media se puede usar de la misma manera que para la etiqueta <style>: indica los medios, como pantallas de computadora o impresión, a los que se deben aplicar las reglas del archivo externo.

CSS puede cambiar completamente un elemento, sin embargo es importante usar el elemento apropiado para los componentes de la página. De lo contrario, es posible que las tecnologías de accesibilidad, como los lectores de pantalla, no puedan identificar las secciones correctas de la página.