Uso CSS¶

En principio, tenemos tres formas diferentes de hacerlo, siendo la primera la más común y la última la menos habitual:

Etiqueta <link rel="stylesheet" href="ruta">
Etiqueta <style>
Atributo HTML style="..."

La recomendada es la primera y es la que usaremos en el presente curso.

En la cabecera de nuestro documento HTML, más concretamente en el bloque <head></head>, podemos incluir una etiqueta <link> con la que establecemos una relación entre el documento HTML actual y el archivo .css que indicamos en el atributo href.

De esta forma, los navegadores sabrán que deben aplicar los estilos que se encuentren en el archivo index.css que está junto al documento index.html actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de los scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa percepción visual de que la página está en blanco y no ha sido cargada por completo.

Sintaxis¶

Vamos a centrarnos ahora en el contenido de nuestro documento index.css. El código CSS de dicho documento, se basa en una serie de conceptos que debemos tener claros antes de continuar. Demos un repaso a cada uno de ellos:

Concepto	Descripción
Selector	Elemento o elementos del documento que vamos a seleccionar para aplicarle un estilo concreto.
Propiedad	Característica principal que vamos a definir con el valor indicado a continuación.
Valor	Cada propiedad tiene una serie de valores concretos asignables, con los que tendrá uno u otro comportamiento.
Comentario	Fragmento de texto entre `/ ` y `/` con anotaciones o aclaraciones para el desarrollador (el navegador los ignorará).
Regla	Par de propiedad y su respectivo valor asociado.

selector{
    propiedad:valor; /*Comentario*/
}

Recomendaciones¶

en en cuenta que, a medida que escribimos código CSS, este se va haciendo más grande y más difícil de controlar y mantener. Para intentar evitar perder el control del mismo, hay que seguir una serie de buenas prácticas al escribir código, que aunque no son necesarias para que funcione en el navegador, los desarrolladores consideramos obligatorias para que sea más fácil de leer:

Escribe una regla por línea. Será mucho más fácil de leer y modificar.
Usa la indentación. Tras escribir el carácter { al empezar un bloque de reglas, las propiedades se separan hacia la derecha. Esto hace que sea más fácil de leer y se considera una buena práctica de desarrollo y de programación en general.
El último punto y coma de un bloque de reglas es opcional. Sin embargo, se suele aconsejar escribirlo para mantener una coherencia y evitar problemas o descuidos al modificar posteriormente el código.

Como puedes ver, estos consejos mejoran sustancialmente la legibilidad del código. Se consideran prácticas de cumplimiento obligatorio para ayudar a entender más rápidamente el código ajeno (o incluso el nuestro) sin necesidad de invertir mucho tiempo.

Unidades en CSS¶

De forma muy frecuente, en CSS necesitaremos utilizar tamaños. Para indicarlo de una forma apropiada, necesitaremos conocer las unidades que podemos utilizar en CSS para definir dichos tamaños. Existen multitud de unidades. Quizás las más populares son unidades como px (píxels) o % (porcentajes), entre muchas otras.

Unidades absolutas¶

Las unidades absolutas son las más sencillas. Se trata de unidades que son siempre iguales a una unidad de medida física. La más conocida con diferencia es el píxel, una medida fácil para comenzar a trabajar en CSS. Sin embargo, conforme avanzamos en el mundo del diseño y desarrollo web, la unidad px se nos puede quedar corta. Sobre todo cuando tenemos en cuenta que necesitamos un tipo de unidad que se adapte dependiendo de ciertos factores.

.container {
  width: 300px;
  height: 200px;
  background: indigo;
}

Unidades relativas¶

A medida que avanzamos en CSS, es recomendable comenzar a utilizar variables relativas a la tipografía o fuente. Estas son un tipo de unidad que no establece un tamaño fijo, sino que el tamaño depende de ciertas características de la tipografía actual, como el tamaño, interlineado u otras.

A la fuente¶

Una de las unidades más conocidas dentro de este apartado es la unidad em. La explicamos en profundidad en el artículo sobre unidades relativas a fuentes.

.container {
  font-size: 1em;
}

Al viewport¶

Al conocer ciertos apartados relacionados con el resposive o el diseño web en dispositivos móviles, es muy probable que necesitemos otras unidades un poco más potentes que las anteriores. Por ejemplo, una muy común es necesitar dar un tamaño a un elemento en relación al tamaño de ancho (o de alto) de la ventana del navegador.

body {
  margin: 0;    /* Reset */
}

.container {
  width: 50vw;
  height: 50vh;
  background: indigo;
}

La unidad vw o vh son ejemplos claros de estas situaciones. Estas unidades dependen exclusivamente del viewport (región visible del navegador)

Actividades¶

AC 301 (RA1 / CE1b / IC1/ 3p) Crear una página HTML y definir tres títulos empleando los elemento h1, h2 y h3. Definir el mismo color para el texto de cada bloque y colores diferentes para el fondo de los mismos.
AC 302 (RA1 / CE1b / IC1/ 3p) Definir reglas para los elementos HTML: h1,h2,h3,h4,h5 y h6. Inicializar la propiedad font-size con valores decrecientes para cada uno de los elementos (40,30,25,20,15 y 10 píxeles). Inicializar la propiedad font-family para las tres primeros elementos con los valores: Arial, Arial Black y Arial Narrow.
AC 303 (RA1 / CE1b / IC1/ 3p) Definir la misma fuente, color y tamaño de fuente para los elementos p (párrafo) y h6, tener en cuenta que cuando vea la página el texto que se encuentra en el elemento h6 difiere del texto que se encuentra dentro del párrafo por la propiedad font-weight (ya que el elemento h6 es de tipo bold por defecto y el elemento p tiene por defecto normal)
AC 304 (RA1 / CE1b / IC1/ 3p) Definir para el elemento span el mismo tamaño de fuente (12px) que el elemento p (párrafo) pero color azul para el título y gris claro (color:#aaaaaa) para el párrafo. Agrupar las dos elementos para la definición de la fuente y posteriormente agregar a cada elemento el valor respectivo para el color del texto.

<!DOCTYPE html>
<html>
<head>
  <title>AC 304</title>
  <meta charset="UTF-8">
</head>
<body>
  <main>
  <section> 
    <p>Esto es un párrafo. <span>Esto es un span.</span></p>
  </section>
  </main>
</body>
</html>

PR 305 (RA1 / CE1b / IC1/ 5p) A partir de la página web que se te proporciona, debes emplear el atributo style para crear una página web que tenga el mismo aspecto que la siguiente imagen:

Tienes que tener en cuenta los siguientes requisitos:

El texto principal:
- El color del texto es azul: #00F.
- El color de fondo del texto es verde claro: #CFC.
- El tipo de letra es la secuencia: Georgia, Cambria, serif.
- El tamaño del texto: 16px.
El encabezado de nivel 1:
- El color del texto es rojo claro: #F00.
- El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
- El tamaño del texto: 32px.
El encabezado de nivel 2:
- El color del texto es rojo claro: #A00.
- El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
- El tamaño del texto: 24px.
El color de los campos de los datos del libro es verde oscuro: #060.
El texto "Internet" y la "Web" cuando actúan como sustantivos:
- El tamaño del texto: 20px.
- Texto en negrita.
El texto "Hypertext Markup Language", "Cascading Style Sheets" y los acrónimos "HTML" y "CSS":
- El color del texto es blanco: #FFF.
- El color de fondo del texto es negro: #000.
- Texto en cursiva.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las Hojas de estilo en cascada (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las URL o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>