Saltar la navegación

4.2. Las CSS: Una historia de estilos

1. Que las plantillas os acompañen

Imagen que muestra el significado de CSS: Cascade Style SheetsEn este apartado vamos a aprender a trabajar con CSS y nos acercaremos a este nuevo estándar a través del siguiente ejercicio en grupo. Pero antes de trabajar algunas reglas, os preguntaréis ¿qué es CSS? Observad para ello el siguiente ejemplo, sin importar que no comprendáis al 100% lo que representa, ya que este ejercicio es una primera aproximación:

Lo que vais a ver es una regla y su codificación (varias como ella formarán las hojas de estilo CSS), que describen el aspecto que debe tener un elemento HTML de una página, concretamente un párrafo (texto delimitado por la etiqueta <p>).  Observad ejemplo:

Regla: El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro.

p {
  color: rgb(32,32,32);
  text-align: left;
  font-size: 12px;
}

¡Es vuestro turno! Definid las reglas que se deberán seguir en vuestro porfolio. Tened en cuenta todos los elementos que habéis codificado:

  • El texto que lo forma: cabeceras (h1, h2, etc), párrafos, listas, ... Pensad si deben tener un tamaño determinado, color, alineación, tipo de letra, etc.
  • Las imágenes: decidis si deben ir enmarcadas con un borde, su grosor y color, alineamiento de la imágen.
  • Las tablas: con borde o sin él y el tipo de línea si lo tiene, tamaño de letra, color de fondo,...
  • ¿Y la página en sí?¿Queréis que tenga algún color de fondo?

Consensuad las reglas y elaborad un listado.

Hojas de estilo en cascada, o Cascading Style Sheets en inglés, que da lugar a las siglas CSS.

Clavis dice Fijaos...

Antes de seguir, para un momento y reflexiona sobre lo que has hecho y aprendido. Si te fijas bien, lo interesante de CSS es que funciona formando plantillas, es decir, no es necesario especificar el aspecto de cada uno de los elementos, sino que se pueden definir reglas.

Saber esto te ayudará a identificar qué procedimientos tienes que poner en marcha para realizar algunas de las actividades de este reto; cuáles eran estrategias necesarias y con qué recursos cuentas para resolverlas.

Piensa también en cuáles pueden ser las dificultades que te encuentres a la hora de dar respuesta.

¡Todo esto te será muy útil cuando tengas que enfrentarte a alguna actividad parecida!

Entonces, estarás preparada o preparado para poder resolverla sin problemas con tu experiencia previa.

¡Qué bueno es aprender!

2. Tipos de respuesta

Para conseguir alcanzar una meta es importante que seas un buen o buena estratega. Es decir, tener métodos, técnicas, “trucos” para llegar antes o de forma más fácil donde tú quieres.

Ahora te voy a enseñar una estrategia, ¡Aprovéchala para alcanzar tu reto!

El nombre de la estrategia es tipos de respuestas. En cualquier ejercicio o actividad siempre vas a encontrar alguna pregunta que responder. La forma en la que debes hacerlo, a menudo se corresponde con el tipo de cuestión planteada. Identificar los tipos de preguntas te ayuda a la hora de responderlas, pero además debes conocer cómo actuar en cada caso para no quedarte bloqueado cuando sabes la respuesta.

Podrás encontrar todo lo que necesitas sobre esta estrategia en los siguientes enlaces a la guía de la competencia de aprender a aprender:

Tómate el tiempo que necesites y recuerda que siempre puedes preguntarle al docente o a algún compañero o compañera cuando no entiendas algo.

¡Ánimo, seguro que lo haces genial!

3. La regla lleva a la herencia, la herencia lleva al estilo, el estilo lleva a la plantilla

Vas a conocer cómo utilizar las hojas de estilo CSS con las que poder crear plantillas de estilos que podrás reutilizar posteriormente para aplicarlas a tus páginas web. Aclaremos primero algunos conceptos:

¿Qué es CSS?

Si HTML es el lenguaje con el que se construyen los contenidos de una página, las hojas de estilo CSS son el lenguaje en el que se usa para trabajar el diseño de cualquier web actual.

Imagen que muestra como HTML se usa para estructurar, CSS para diseño visual y Javascript para la interacción.

¿Por qué necesitamos CSS?

Incluso aunque utilices un entorno WYSIWYG para tus creaciones web, saber un poco de HTML y CSS significa que la plantilla que te ofrecen por defecto ya no marca el techo de lo que puedes hacer con tu blog o tu web basada en dicho entorno visual. Incluso con temas gratuitos simples y un poco de habilidad podrás conseguir unos resultados mucho más elaborados y profesionales.

Aprende a continuación un par de conceptos clave en la elaboración de hojas de estilo CSS:

Reglas, selectores y propiedades

Para identificar los componentes de una regla, veamos primero un ejemplo de dos reglas:

h1, h2 {
  color: black;
  font-size: 16px;
}
h2 {
  font-size: 14px;
}

Observa y localiza en cada una de ellas los siguientes componentes:

  • Selector: Indica a qué etiquetas HTML aplica la regla que es el texto que precede a las llaves de apertura y cierre de la regla. En la primera regla, el selector es “h1, h2”, en la segunda “h2”.
  • Propiedades: Especifican exactamente qué se hará con esos los elementos HTML a los que aplica. En la primera regla, las propiedades indican que la regla se refiere a los elementos HTML <h1> y <h2> y que a ellos se aplicarán el color negro (propiedad “color”) y un tamaño de letra de 16 pixeles al texto (propiedad “font-size”). En la segunda regla, la propiedad indica que la regla se refiere al elemento HTML <h2> y que a él se aplicará un tamaño de letra de 14 pixeles.

Imagen de la regla h1{color:green;font-size:18px} en la que el selector es h1 y la propiedad es color y font-size

Reglas simples

Hay cientos de propiedades, de las cuáles trabajaremos unas cuantas más frecuentemente usadas y más útiles en un ejercicio interactivo a continuación. Estas propiedades las hemos utilizado hasta ahora en selectores simples: son los que se refieren a elementos HTML (etiquetas) ya existentes. Tienen el formato:

Partes de una regla CSS: selectores, y pares atributo-valor.

Veamos un ejemplo más:

p a {
  text-decoration: underline;
}
En esta regla se han anidado dos elementos para indicar que esta regla sólo se refiere a enlaces (etiqueta <a> en HTML) dentro de párrafos de texto (etiqueta <p> en HTML) y que a estos enlaces se le aplicará un subrayado. Es decir, esta regla no aplica a elementos que no se encuentren dentro de un párrafo (<p>).

Reglas complejas

Las reglas más complejas son las que diseñan selectores que sólo se aplican si se especifica mediante el atributo class en el documento HTML que conforma la web. Vamos a aprenderlo con un caso concreto:

p.text-izq {
  text-align: left;
}
En esta regla se juega con una etiqueta párrafo (<p>) y un atributo de clase al que se le ha dado el nombre de text-izq. Es decir, esta regla sólo se aplicará a párrafos (texto dentro de etiquetas <p>) que contienen un atributo “class” con el valor “text-izq” como éste:
<p class=”text-izq”>Texto del párrafo</p>

Fíjate que en la regla “text-izq” empieza con un punto. Es la manera de especificar en el lenguaje CSS que “text-izq” se refiere a un atributo de clase.

La cascada

Vas a ver ahora qué efectos produce el estilo en cascada, que es lo que se implementa al utilizar CSS: El nombre de hojas de estilo en “cascada” no es casual, expresa que los estilos que especifican con reglas se pueden heredar de una manera jerárquica. Pero sin embargo, la herencia se puede interrumpir mediante sobreescritura, llamada también principio de especificidad.

¿Cómo funciona? Observa el ejemplo:

body {
  font-family: Arial;
}

Aquí se está obligando a que la etiqueta <body>, que es la que envuelve el contenido de cualquier página web, tenga un tipo de letra “Arial”. Gracias a la capacidad de herencia de las reglas, por defecto, cualquier elemento hijo como un título o un párrafo va a heredar ese estilo.

Pero podemos cortar esa tendencia utilizando la sobreescritura de estilo en un elemento que deseemos que tenga otra tipología de letra, como:

p {
  font-family: Verdana;
}
Esta última regla aplica el principio de especificidad. En principio, se plantearía un conflicto entre la regla general de <body> con lo que dice la regla de <p>, pero se resuelve fácilmente puesto que se aplica la regla más específica: referirse a un párrafo es más específico que referirse a “los elementos hijos que existen dentro de <body>”.

Finalmente, como otro ejemplo, considera que una regla con un selector “p a” (enlace dentro de un párrafo) tendría precedencia (sobreescribe) sobre una regla con un selector “a” que se refiere a un enlace a secas.

4. El experto te lo explica

Una vez asimilado el texto del punto anterior en el que acabas de descubrir qué es el CSS y sus reglas, vais a comprobar por parejas que lo habéis asimilado para ser capaces de usarlo. Para ello, imaginad que uno de vosotros es un programador de una compañía al que el otro miembro de la pareja está entrevistando. El entrevistador debe preparar dos tipos de preguntas: preguntas de tipo abierto y preguntas de tipo cerrado sobre el contenido anterior.

¡El entrevistado debe saber responder lo aprendido sobre CSS y adecuadamente según el tipo de pregunta!

5. Une CSS a HTML y juntos dominarán la web

Imagen de dos cadenas que representa el vínculo a crear entre HTML y CSS.¡Genial! Ya sabes crear reglas CSS, pero...¿cómo las aplicas ahora a la web que has montado den HTML?, ¿cómo se aplican a una página web? Pues simplemente tendrás que decidir entre una de estas 3 opciones:

Hojas de estilo CSS inline

La primera opción consiste en usar el atributo “style” dentro de una etiqueta (un elemento) HTML tal como se puede ver aquí:

<h1 style=”font-family:Verdana; color:red”>Título de nivel 1</h1>

En este caso, no hay selector puesto que no hay elemento que seleccionar, es el que es. Por tanto, se especifican simplemente las propiedades a aplicar al elemento en cuestión.

Ventaja

Este tipo de reglas tienen mayor prioridad de todas las reglas.

Desventaja

Se recomienda evitar esta manera de vincular estilos CSS puesto que al tener que aplicarse a cada elemento individualmente, implican un esfuerzo y mantenimiento disparatado.

Hojas de estilo CSS internas

La segunda opción es escribir las reglas dentro de un elemento <style>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
    ...
</body>
</hmtl>

Ventaja

Puedes ver sobre el propio código, o al consultar el código fuente de la página, las reglas de estilo que se están utilizando.

Desventaja

En este caso las reglas sólo son visibles para esa página concreta en las que se han declarado y no se pueden usar para otras páginas.

*Nota: Como has visto en el código superior, hay varios tipos de letras separados por comas. ¿Qué significa?:

En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.

Hojas de estilo CSS externas

La última opción es la más usada y consiste en crear uno o varios ficheros con extensión .css en los cuales se declaran las reglas CSS. La manera de vincular estas reglas a una página HTML consiste en referencia el fichero .css desde esa página. De este modo se puede crear un fichero global para una web entera y usarlo en todas las páginas que se quiera.

La declaración se incluye dentro del elemento y tiene el siguiente aspecto:

A tener en cuenta: en el caso de usar varios ficheros el orden de inclusión marca precedencia en el orden inverso. En el caso de existir un conflicto por haber diferentes reglas con igual selector en varios ficheros, las reglas de los ficheros siguientes sobreescriben los anteriores. Por ejemplo:

Si en hoja_estilo_1.css tenemos la regla:

p a {
  text-decoration: underline;
}

Y en hoja_estilos_2.css otra que dice:

p a {
  text-decoration: none;
  color: blue;
}
¡Conflicto! ¿Cuál se aplicará? El conflicto se resolverá dando prioridad a la propiedad text-decoration de estilos-2.css.

6. Probando cambios en vivo y en directo

Ahora que has visto cómo funcionan los estilos, vas a realizar un ejercicio guiado para comprobar las reglas en páginas reales: vas modificar el diseño de una página cambiando una de sus reglas CSS, concretamente el color de algún título. Además, con la herramienta que vas a usar el cambio sólo afectará a la página en tu navegador.

Vas a utilizar la herramienta de inspección de código que traen consigo los navegadores FireFox, Chrome e Internet Explorer. Se activa pulsando en ello la tecla F12. Con esta herramienta puedes ver y manipular el código de una página web tanto a nivel de HTML como a nivel de CSS de una manera sencilla.

El ejercicio propuesto es cambiar el color a los títulos h1 de los posts de un blog que conozcas. Si no tienes ninguno a mano, puedes usar este. Seguirás para ello los pasos que se marcan en esta imagen, y que se explican abajo:

Imagen que marca en la pantalla del navegador los pasos explicados abajo a dar en el inspector de código de Firefox.

Paso 1

Activar el selector de elementos con el icono al que apunta la flecha en el paso 1.

Paso 2

Coloca el ratón sobre el elemento a examinar y verás cómo se resalta. Además puedes ver cómo en el cuadro indica que el selector empleado en el HTML es “h1.entry-title”, es decir, aplican las reglas para etiquetas <h1> y la clase “entry-title”.

Paso 3

Fíjate como dentro del árbol de código HTML, se ha identificado el elemento HTML exacto que has seleccionado antes con el ratón. Observa además como concuerda con las reglas CSS.

Paso 4

En el lado derecho se listan todas las reglas que concuerdan con el elemento <h1> y la clase “entry-title” que corresponden al elemento HTML seleccionado. 

Paso 5

Ahora toca modificar el título. Para ello vamos a modificar la siguiente regla: h1, .fpost .entry-title

Añade la línea color: red; justo debajo del atributo font-size.

¿Qué resultado has obtenido? Redacta en un post de tu blog de clase el proceso seguido y por qué se ha producido el efecto obtenido.

7. Las propiedades se revelan

Ahora que conoces la filosofía básica CSS y conoces también una herramienta magnífica para experimentar con CSS como lo son las herramientas de inspección de código de los navegadores, simplemente probando propiedades interesantes ya podrás hacer un montón de cosas, por eso, tienes a continuación una seri de ejercicios interactivos para familiarizarte con las propiedades más útiles. ¡A conocer!

8. Atributos de maquetación básica

Selecciona el atributo adecuado a la función:

Ancho de un elemento:

Alto de un elemento:

Alineamiento vertical dentro de un elemento:

Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (-top, -bottom, -left, -right):

Relleno interior que se añade en los bordes del elemento. A diferencia de margin, cuenta para el tamaño del elemento:


Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS:

Habilitar JavaScript

9. Atributos de fuentes y textos

Selecciona el atributo adecuado a la función:

Tipo de letra:

Tamaño de letra:

Peso (normal, negrita, …):

Estilo (normal, cursiva, …):

“Decoraciones” como subrayado, tachado, etc.:

Alineación del texto (izquierda, derecha, etc.):

Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas:

Habilitar JavaScript

10. Atributos de color y fondos

Selecciona el atributo adecuado a la función:

Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal:

Color del fondo del elemento:

Permite especificar una imagen de fondo:

Permite usar una imagen a modo de mosaico en diferentes modalidades:

Crear un efecto de sombra para un elemento:

Habilitar JavaScript

11. Atributos de listas y bordes

Selecciona el atributo adecuado a la función:

Usar la imagen especificada como viñeta para la lista:

Diferentes estilos de viñetas y estilos de numeración para elementos de lista:

Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.):

Color del borde:

Diferentes estilos para el borde (sólido, puntos, etc.):

Permite crear esquinas redondeadas para un elemento:

Habilitar JavaScript

12. Un portfolio con estilo

Imagen que presenta la web de una persona que ha creado su portfolio digital.¡Es la hora de mostrar tu portfolio aplicando el gran potencial que le pueden aportar los estilos CSS!

Retoma el portfolio que creaste en el apartado anterior, y ahora:

  1. Crea un fichero llamado estilo-portfolio.css en el que crearás el código que dará formateo a tu página web básica del portfolio. Incluye en el fichero HML de tu página web el vínculo a dicho fichero. ¡No lo olvides, si no, no se aplicará ningún estilo!
  2. Aplícale los estilos que habeís consensuado en el grupo de trabajo en el punto primero de este apartado.
  3. Posiciona en un lateral los índices o listas que creaste en el diseño gráfico, que apuntaban a diferentes zonas del contenido. Para ello utiliza el atributo de clase que venía dado en la plantilla HTML utilizada en el apartado anterior, y crea las respectivas reglas para dicho atributo asignándole mediante propiedades de margen y de posicionamiento una localización lateral. No olvides que el resto del cuerpo de la página deberá tener un margen lateral de inicio igual al borde lateral de final de la columna (izquierda o derecha, donde lo has puesto), para que no haya solapamientos.

Lumen dice: ¿Una ayuda de base?

Por si necesitas ayuda a la hora de posicionar un contenido lateral en la web, aquí te proporcionamos un ejemplo de código que crea un menú lateral. Analízalo. Este código podrás modificarlo y adaptarlo a las necesidades de tu página web:

El código HTML

<body>
<div class="lateral">
<header>Indice</header>
<ul class="menuVert">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="/">item 4</a></li>
</ul>
</div>
<div class="principal">
Aquí está el contenido de este bloque.
Rellena con suficiente espacio para que supere
la altura de la pantalla y aparezca el scroll.
</div>
</body>


El estilo CSS

@charset "utf-8";
html{
height:100%;
}
body{
width: 80%;
height: auto;
margin:0 auto;
background: aliceblue;
}
.lateral{
box-sizing: border-box;
width: max(8%, 200px);
display: inline-block;
position: fixed; padding-top: 30px
}
.principal{
margin-left: max(10%, 200px);
padding: 0 10px;
height: 100%;
text-align: justify;
background:white;
}
/*Hasta aquí ya tenemos un menu lateral fijo,
ahora viene ponerlo bonito*/
.lateral header{
font-weight: bold;
font-size: 1.5rem;
text-align: center;
border-bottom: 1px solid black;
background: aqua
}
.lateral ul{
list-style:none;
padding-left:0;
margin-top:0;
}
.lateral ul li{
display:block;
position: relative;
padding: 8px 10px;
margin-left:0;
border-bottom:1px solid #060696
}
.lateral ul li a{
color: black;
text-decoration:none;
}
.lateral ul li a:after{
content: ' ';
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.lateral ul li:hover, .lateral ul li:hover a{
background: blue;
color: white;
}

Motus dice ¿Qué tal?

¿Cómo te sientes al ver tu creación gráfica que presenta tu portfolio? Ya ves que el diseño web está a tu alcance. ¡Pon en común tu diseño con el resto de tu clase! Y no olvidéis comentar las dificultades que habéis encontrado en el proceso de creación.

Aprovecha este momento para reflexionar sobre la utilidad de lo que acabas de aprender ¿Para qué podrías usarlo en tu día a día? ¿En qué situaciones sería útil? Comparte tu opinión y conocimiento con tus compañeras y compañeros.

¡Seguro que puedes ayudar a alguien con tus consejos y también pueden resolverte tus dudas!