jairogarcíarincón

Introducción

En este capítulo, vamos a estudiar conceptos básicos de CSS y la forma de aplicarlos a nuestra página HTML. También aprenderemos cómo utilizar los selectores y pseudo clases que hacen más fácil la selección e identificación de elementos HTML.

Estructura básica

Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla.

• Los elementos block se posicionan uno sobre otro hacia abajo en la página. Por ejemplo, los elementos tipo div se posicionan por defecto como block.
• Los elementos inline se posicionan uno al lado del otro en la misma línea y sin ningún salto de línea a menos que ya no haya más espacio horizontal para ubicarlos. Por ejemplo, los elementos tipo span se posicionan por defecto como inline.

Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (section, nav, header, footer, div, etc.) será posicionado debajo del anterior, y si no queremos que sea así debemos indicarlo mediante estilos.

Estas propiedades se definen mediante el estilo display, que además de block e inline, también puede tener otros valores, como por ejemplo:

• table: estilo tabla
• list-item: estilo ítem de lista li
• inline-block: estilo en línea con ancho determinado
• flex: estilo flexible, utilizado sobre todo en diseños adaptados a dispositivos
• none: no mostrar el elemento

De la misma manera que utilizamos display para estructurar nuestro documento, utilizando la propiedad float podemos hacer que nuestros elementos pasen de comportarse como una caja (box) a "flotar" en nuestro documento, para permitirnos colocar unos al lado de otros. Esta propiedad tomará los valores none (se comportará como una caja), left (se alineará a la izquierda o right (se alineará a la derecha).

Más adelante profundizaremos en estas propiedades mediante ejemplos prácticos.

Estilos en línea

Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style. El siguiente ejemplo muestra un código simple con un elemento p modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del elemento p a un nuevo tamaño de 20 pixeles.

006-css-basico.html

La técnica anterior es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento, ya que tendríamos que escribir y repetir cada estilo en cada uno de los elementos que queremos modificar.

Estilos embebidos

Una alternativa mejor es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes:

007-css-basico.html

Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web.

Hojas de estilo en archivos externos

La solución más óptima consiste en mover todos los estilos a un archivo externo y luego utilizar el elemento link dentro de la etiqueta head para insertar este archivo dentro de cada documento que los necesite.

Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente. También nos permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo, como veremos más adelante:

008-css-basico.html

Y el código del archivo CSS correspondiente sería éste:

006-css-basico.css

El lugar óptimo para almacenar nuestro(s) archivo(s) de estilos será dentro de una subcarpeta llamada css.

Referencias entre HTML y CSS

Existen varios métodos para seleccionar qué elementos HTML serán afectados por unas determinadas reglas CSS:

• referencia por la palabra clave del elemento
• referencia por el atributo id
• referencia por el atributo class

Referenciando con palabra clave

010-css-basico.css

Esta técnica es útil cuando quiero referenciar todos los elementos del mismo tipo, pero para seleccionar un elemento HTML específico desde las reglas de nuestro archivo CSS, debemos usar id o class.

Referenciando con el atributo id

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento.

Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el símbolo # seguido del valor que usemos para identificar el elemento:

011-css-basico.css

Y en nuestro archivo HTML:

012-css-basico.html

El resultado de este procedimiento es que cada vez que hacemos una referencia usando el identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado, pero el resto de los elementos p, o cualquier otro elemento en el mismo documento, no serán afectados.

Dada su especificidad, el atributo id es de hecho más apropiado para referencias en Javascript, como veremos más adelante o para referencias de enlaces mediante anclas, como vimos en el apartado de Etiquetas.

Referenciando con el atributo class

La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar.

Para trabajar con el atributo class, debemos declarar la regla CSS con un punto . seguido del nombre de la clase:

013-css-basico.css

Y en nuestro archivo HTML:

014-css-basico.html

La ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para asignar estos estilos a cualquier elemento que queramos, sin afectar al resto del mismo tipo. De este modo, los dos primeros elementos de tipo p anteriores comparten la misma regla y ambos serán afectados por el estilo texto1, mientras que último elemento p conservará los estilos por defecto otorgados por el navegador.

También es posible utilizar referencias más complejas, como la siguiente en la cual creamos una regla que referencia la clase llamada texto1 pero solo para los elementos de tipo p. Si cualquier otro elemento tiene el mismo valor en su atributo class no será modificado por esta regla en particular.

015-css-basico.css

Referenciando con otros atributos

Aunque los métodos de referencia estudiados anteriormente cubren un variado espectro de situaciones, a veces no son suficientes para encontrar el elemento exacto. CSS3 incorpora nuevas formas de referenciar elementos HTML. Una de ellas es el selector de atributo, que nos permite referenciar un elemento no solo por los atributos id y class sino también a través de cualquier otro atributo:

016-css-basico.css

La primera línea del código anterior cambia solo elementos <p> que tienen un atributo llamado name, mientras que la segunda cambia los elementos <p> que tienen un atributo llamado name cuyo valor es igual a mitexto.

Además, utilizando expresiones regulares como las que estudiaremos en JavaScript, es posible combinar el operador "=" para hacer selecciones más específicas:

017-css-basico.css

En el ejemplo anterior:

• La regla con el selector ^= será asignada a todo elemento <p> que contiene un atributo name con un valor comenzado en “mi” (por ejemplo, “mitexto”, “micasa”).
• La regla con el selector $= será asignada a todo elemento <p> que contiene un atributo name con un valor finalizando en “mi” (por ejemplo “textomi”, “casami”).
• La regla con el selector *= será asignada a todo elemento <p> que contiene un atributo name con un valor que incluye el texto “mi” (“textomicasa”, "casami", "micasa").

Referenciando con pseudo clases

CSS3 también incorpora nuevas pseudo clases que hacen la selección aún más específica. El ejemplo siguiente contiene cuatro elementos <p> que, considerando la estructura HTML, son hermanos entre sí e hijos del mismo elemento <div>. Usando pseudo clases podemos aprovechar esta organización y referenciar un elemento específico sin importar cuánto conocemos sobre sus atributos y el valor de los mismos:

018-css-basico.html

019-css-basico.css

Lo que la primera pseudo clase está realmente indicando es algo como: “el hijo en la posición...” por lo que el número entre paréntesis será el número de la posición del hijo (el índice). De este modo, la primera regla anterior está referenciando cada segundo elemento <p> encontrado en el documento, mientras que las siguientes referencian, respectivamente, las ocurrencias impares (1 y 3) y pares (2 y 4) de los elementos p.

Existen otras importantes pseudo clases relacionadas con esta última, como first- child, last-child y only-child. La pseudo clase first-child referencia solo el primer hijo, last-child referencia solo el último hijo, y only-child afecta un elemento siempre y cuando sea el único hijo disponible. Estas pseudo clases en particular no requieren palabras clave o parámetros, y se implementarían de la siguiente forma:

020-css-basico.css

Otras pseudo clases bastante utilizadas son las siguientes:

021-css-basico.css

También es posible referenciar a todos los elementos mediante el selector universal * para, por ejemplo, eliminar todos los márgenes por defecto. De la misma manera, se puede referenciar a todos los elementos del documento menos a los de un tipo o clase determinados mediante el selector not:

022-css-basico.css

Para finalizar, existen nuevos tipos de selectores que utilizan os símbolos >, + y ~ para especificar la relación entre elementos.

023-css-basico.css

El selector > está indicando que el elemento a ser afectado por la regla es el elemento de la derecha cuando tiene al de la izquierda como su padre. En este caso, modifica los elementos p que son hijos de un elemento &div. En este caso, afectaría al elemento p de clase mitexto2 que sea hijo de un elemento de tipo div.

El selector + referencia al elemento de la derecha cuando es inmediatamente precedido por el de la izquierda. Ambos elementos deben compartir el mismo padre. La regla por tanto afecta al elemento p que se encuentra ubicado después de otro elemento p con la clase mitexto2. En el código HTML con cuatro elementos tipo p> anterior, el texto en el tercer elemento p aparecerá en color rojo debido a que este elemento p en particular está posicionado inmediatamente después del elemento p identificado con el valor mitexto2 en su atributo class.

El selector ~ es similar al anterior pero el elemento afectado no necesita estar precediendo de inmediato al elemento de la izquierda. Además, más de un elemento puede ser afectado. El estilo será aplicado a todos los elementos p que son hermanos y se encuentran luego del elemento p identificado con el valor mitexto2 en su atributo class. La regla afectaría por tanto al tercer y cuarto elemento p de nuestro último ejemplo HTML.

Referenciando con pseudo elementos

CSS· también permite utilizar pseudo-elementos o lo que es lo mismo, elegir cierta parte de un elemento:

024-css-basico.css

Margin y padding

En HTML cada elemento es considerado como una caja. El margen (margin) es en realidad el espacio alrededor del elemento, el que se encuentra por fuera del borde de esa caja.

Por contra, el estilo padding es el espacio alrededor del contenido del elemento pero dentro de sus bordes.

Para definir tanto margin como padding, se pueden usar diferentes nomenclaturas. Los siguientes ejemplos muestran las más comunes:

025-css-basico.css

Puedes ver el efecto del margin y el padding observando las características de los dos <div> siguientes haciendo clic en el botón derecho y luego en Inspeccionar elemento:

Width y Height

Las propiedades width y height (ancho y alto) nos permiten establecer el ancho y/o alto de un elemento. El valor por defecto es auto y se puede establecer en pixeles, ems, rems o %.

IMPORTANTE: El valor establecido se define dentro del padding del elemento, con lo que no incluye los valores de las propiedades padding, margin y border.

Las propiedades min-width, max-width, min-height y max-height anulan, respectivamente, las anteriores width y height.


Estilos de Texto

El siguiente código resume las diferentes opciones CSS para dar estilo al texto:

026-css-basico.css


Fuentes

Las propiedades de fuentes de CSS definen la familia, el tamaño, el peso (negrita) y las variantes.

En CSS; hay dos tipos de nombres de familia:

• familias genéricas: las que tienen una apariencia similar (serif, sans-serif o monospace)
• familias de fuentes: fuentes específicas (Times New Roman, Georgia, Arial, Verdana, Courier New, Lucida Console, etc.)

027-css-basico.css

Además de las fuentes integradas en cualquier navegador, es posible importar fuentes tipográficas a partir de archivos externos, tales como fuentes True Type. El problema es que en general requerirá de algún programa de conversión de fuentes, ya que tendremos que generar diferentes archivos para compatibilidad entre navegadores.

028-css-basico.css

No obstante, la opción más recomendada actualmente es el uso de fuentes enlazadas de otros proveedores, como Google Fonts, que provee de un extenso catálogo de fuentes gratuitas y compatibles con todos los navegadores actuales.

Para importarlas, tan solo debemos seguir las indicaciones de la página y añadirlas directamente en el archivo CSS:

029-css-basico.css

o como etiqueta link en el head de nuestro html:

030-css-basico.html

En ambos casos, Google Fonts nos permite personalizar la fuente con diferentes grosores, idiomas, etc. Una vez importadas, las utilizaremos en la forma habitual:

031-css-basico.css

Una vez declarada nuestra familia, existen una serie de estilos básicos que podemos aplicar:

032-css-basico.css

Unidades: medidas en px, pt, rem, em y %

Hasta ahora hemos utilizado los píxeles (px) para definir nuestros estilos, bien sea el tamaño de las fuentes, como los márgenes, paddings, etc. También podíamos haber declarado los tamaños en pt o puntos, una medida más utilizada el medio gráfico pero igualmente absoluta y cuya correspondencia aproximada es de 0.75pt por cada 1px.

No obstante, en un entorno cada vez más adaptable o responsive, en el que tenemos que asegurarnos de que nuestra página web se vea bien en todos los tipos de dispositivos debemos, frente a los valores absolutos en píxeles o puntos, acostumbrarnos a utilizar medidas relativas.

La más común es emphasis o em, que tomará la relación del tamaño de letra base del documento. Por defecto, si no indicamos el tamaño de letra en la hoja de estilos, el navegador aplica un tamaño de 16px. De este modo, si queremos un tamaño de letra de 24px, sólo tendremos que definir en la hoja de estilos que sea de 24/16 = 1.5em.

¿Y cuáles son las ventajas de definir los tamaños de fuente en pixeles frente a em? Principalmente son dos:

• En cualquier momento el usuario puede optar por cambiar el tipo de letra del navegador haciendo zoom, y si están definidas en em, todas cambiarán proporcionalmente.
• El programador, con cambiar el tamaño de fuente base, puede modificar proporcionalmente el contenido de todos los estilos relativos.

Existe una unidad de medida aún más relativa que la anterior, que sería el relative emphasis o rem. En este caso, las unidades dependerán del tamaño del elemento anterior. Esto es, tal y como muestra el ejemplo siguiente, si el tamaño fuente base del body es de 16px y tenemos un div con tamaño de fuente 1.5rem, esto equivaldría a un tamaño de fuente de 24px. Si ahora dentro de ese contenedor queremos añadir un párrafo con un tamaño de fuente que sea la mitad que el del div, sólo tendremos que poner 0.5rem:

033-css-basico.css

034-css-basico.html

Por último, en ocasiones también utilizaremos las medidas en porcentajes %, sobre todo para definir anchos de divs o imágenes que sean flexibles.

A continuación se muestra una tabla con la relación entre cada unidad de medida, si bien estos valores se pueden ver afectados por cómo el usuario tenga configurado su navegador o dispositivo.

Border

Para establecer bordes a nuestro elemento, existen varias propiedades que podemos utilizar. Estas son las más comunes:

• border-color: Establece el color del borde en cualquier formato de color aceptado (#000, rgb(0,0,0), etc.)
• border-width: Establece el ancho del borde en px, em, etc.
• border-style: Establece el estilo del borde. Los más comunes son solid (continuo), dotted (con puntos), dashed (con rayas), double (doble borde) o none (sin borde).
• border: Es un estilo rápido para definir los 3 anteriores. Por ejemplo: border: 1px solid #000;

Además, es posible redondear los bordes mediante la propiedad border-radius utilizando una nomenclatura similar a la de margin y padding:

035-css-basico.css





Por último, cualquiera de las propiedades anteriores se puede aplicar para una sola sección del elemento, por ejemplo, border-top, border-bottom-color, border-left-radius, etc.

Background

Otra de las propiedades más utilizadas en nuestros elementos es la de aplicar un fondo de cualquier tipo. Si queremos aplicar un color de fondo, debemos utilizar la propiedad:

background-color: permite aplicar un color de fondo en cualquier formato de color aceptado (#000, rgb(255,0,0), rgba(255,0,0,0.1), etc.)

Por el contrario, si queremos utilizar una imagen de fondo, podemos utilizar las siguientes propiedades:

036-css-basico.css

Puedes encontrar más información y ejemplos en w3schools.


Colores

En HTML, los colores pueden ser identificados mediante nombres como green, violet o tomato. Existen hasta 140 colores disponibles.

No obstante, es posible definir los colores de una forma más técnica (más ejemplos interactivos AQUÍ):

037-css-basico.css

Uso de initial, inherit e important

Existen 3 palabras clave que merecen la pena ser tenidas en cuenta, pues en muchas ocasiones nos pueden resultar útiles:

038-css-basico.css

No obstante, el uso de !important no está recomendado, y solo se debe utilizar cuando queramos sobre-escribir otras librerías de CSS o plugins basados en JavaScript que inyecten estilos in-line.

Conclusiones

En el apartado siguiente nos centraremos en las dos propiedades de CSS que afectan al posicionamiento de los elementos y a la plantilla global o layout.

Si bien se han explicado muchas propiedades de CSS, existen aún muchas otras, tales como degradados, sombras de cajas, efectos de texto y más que puedes consultar y probar en la web de w3schools y en la página de referencia oficial de CSS de MDN.

---

Publicado el 21 de Noviembre de 2024

maquetacionwebresponsive flexboxgridangularmaterialmedia queries