¿Qué es CSS?

CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita.

Funciona junto con el lenguaje HTML, que se encarga del contenido básico de los sitios.

Ejemplo CSS:

body {
  background-color: red;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

#title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Vincular HTML y CSS

Hay tres lugares donde podemos escribir las reglas CSS:

1 Archivo externo

Tenemos que indicar dentro del head de nuestro archivo HTML dónde se encuentra el archivo CSS (vamos a vincularlos). Esta es la etiqueta que pondremos dentro de <head>:

<link rel="stylesheet" href="css/style.css">

El archivo CSS se encuentra dentro de la carpeta css.

Este ejemplo de la diapositiva muestra un archivo HTML ya conectado a su hoja de estilos externa con <link>: el título usa una clase (.title) en vez de un elemento, para que el color se aplique solo a él.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Título de la web</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <img src="img/logo.png" alt="Mi logo" />
      <h1 class="title" style="color: red">Mi Blog</h1>
    </header>
    <section>
      <ul>
        …

body {
  background-color: red;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.title {
  color: green;
}

Regla CSS

Toda regla CSS se compone de las mismas partes:

.title {
  color: green;
}

Apertura, cierre y declaración

.title {

  color: green;

}

¿Qué son los selectores?

Gracias a los selectores podemos aplicar un estilo determinado al objeto HTML que queramos.

Selectores tipo objeto, son cualquiera de las etiquetas que ya conocemos de HTML:

<body>
<h1>
<p>
<div>
<span>
Etc…

Conectando HTML y CSS

Vamos a dar estilo al título <h1> y al párrafo, cambiando su color:

h1{
    color: red;
}

p{color: blue}

<head>
    <meta charset="UTF-8">
    <title>Ejercicio Selectores</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<h1>Título del ejercicio</h1>
<p>
  "Hola, aventurero digital. Hoy, vamos a jugar con etiquetas HTML
  y crear nuestra primera página web. ¡Empecemos a codificar!"
</p>

El problema de usar un elemento como selector

El único problema si utilizamos como selector elementos HTML es que todos los elementos serán iguales… Si definimos que los h1 son rojos, serán rojos todos los h1 de la web… para poder personalizar mejor los estilos tenemos que hacer uso del selector class y del selector ID.

<h1>Título del ejercicio</h1>
<p>"Hola, aventurero digital..."</p>
<h1>Otro título de la web</h1>

Selector tipo Clase

Una clase CSS se define con un punto y a continuación el nombre que decidamos darle a la clase:

.red-color{color: red;}

Para llamar a la clase que hemos creado, dentro de la etiqueta HTML pondremos class="red-color":

<h1 class="red-color">
    Título del ejercicio
</h1>

Selector tipo ID

Un ID CSS se define con una almohadilla y a continuación el nombre que decidamos darle al ID:

#red-color{
  color: red;
}

Para llamar al ID que hemos creado, dentro de la etiqueta HTML pondremos id="red-color":

<h1 id="red-color">
    Título del ejercicio
</h1>

Diferencias entre ID y Class

Funcionan exactamente igual, con la diferencia de que ID se debe utilizar para identificar una parte concreta de la web y solo se debe utilizar una vez. Class la podemos utilizar más veces.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Título de la web</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <img src="img/logo.png" alt="Mi logo" />
      <h1 id="titulo" style="color: red">Mi Blog</h1>
    </header>
    <section id="lista-frutas">
      <ul>
        <li class="fruta">Peras</li>
        <li class="fruta">Manzanas</li>
        <li class="fruta">Limones</li>
      </ul>
    </section>
  </body>
</html>

Selectores CSS — resumen

Los tres tipos de selectores, aplicando el mismo color, uno detrás de otro:

body { color: yellow; }

#titulo { color: yellow; }

.texto { color: yellow; }

Propiedades básicas

Repasamos las propiedades CSS más habituales para empezar:

/* Color de texto */
color: red;
color: #ff0000;

/* Color de fondo */
background-color: red;
background-color: #ff0000;

/* Tamaño del texto */
font-size: 18px;

/* Alinear texto */
text-align: left|right|center|justify;

/* Anchura y altura */
width: 800px;
height: 400px;

Color de texto

color: red; y color: #ff0000; son equivalentes — el segundo es el valor hexadecimal.

<h2 class="mi-color">Texto del titular...</h2>

.mi-color{color: red;}

Color de fondo

background-color: aqua; y background-color: #00ffff; son equivalentes.

<div class="mi-fondo">
  <h2 class="mi-color">Texto del titular...</h2>
</div>

.mi-fondo{background-color: aqua;}

Tamaño del texto

font-size: 18px;

<h2 class="mi-texto">Texto del titular...</h2>

.mi-texto{
    color: red;
    font-size: 18px;
}

Asignar 2 clases o más a una etiqueta HTML

Separamos con un espacio las clases dentro de la etiqueta HTML.

<h2 class="color-txt size-txt">Texto del titular...</h2>

.color-txt{color: red;}

.size-txt{font-size: 18px;}

Asignar una propiedad a varias clases CSS

Al revés que en el caso anterior, también podemos aplicar la misma declaración a varios selectores distintos a la vez. Para ello, separamos los selectores con una coma dentro del archivo CSS.

.texto-grande, .texto-destacado, .texto-detalle {
    color: purple;
}

Cada una de estas tres clases puede seguir usándose de forma independiente en el HTML, pero las tres comparten el mismo color:

<h2 class="texto-grande">Texto grande</h2>
<p class="texto-destacado">Texto destacado</p>
<span class="texto-detalle">Texto de detalle</span>

Alineación del texto

text-align: left|right|center|justify;

<p class="izquierda">alineando texto izquierda</p>
<p class="derecha">alineando texto derecha</p>
<p class="centro">alineando texto centro</p>
<p class="justific">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id iaculis risus.
    Vestibulum eget consequat urna. Etiam gravida libero id erat consequat
    bibendum sit amet eget ex. Cras nec lobortis felis. Mauris dui augue, congue
    eget metus in, dictum viverra lectus. Mauris aliquet, ante at accumsan
    eleifend, metus risus vehicula augue, molestie nunc leo eget ex.
</p>

.izquierda{text-align:left;}

.derecha{text-align: right;}

.centro{text-align:center}

.justific{text-align:justify}

¡Entender la alineación!

La alineación es respecto al espacio que ocupa el elemento.

Alinear imágenes

Una imagen es un elemento en línea, quiere decir que no ocupa espacio: si alineamos una imagen no veremos ningún resultado. Para poder alinear una imagen primero hay que meterla dentro de un contenedor, y será sobre ese contenedor al que le apliquemos la alineación. Se alineará el contenido que hay dentro del contenedor.

Con text-align podemos alinear imágenes:

<img class="imgcenter" src="img1.jpg" width="120px">

<div class="imgcenter">
    <img src="img1.jpg" width="120px">
</div>

.imgcenter{text-align:center;}

Width y Height

Del mismo modo que especificamos el ancho y alto de un elemento mediante un parámetro de HTML, también podemos hacerlo mediante una clase CSS: el resultado es el mismo. La anchura se puede definir también por porcentaje.

<img src="img1.jpg" width="120px">

<img class="mi-foto" src="img1.jpg">

.mi-foto{width:120px;}

Resumen

Un vistazo de conjunto a los selectores y las propiedades básicas vistos en esta clase.

Selectores

Propiedades básicas

Ejercicio

Intentamos replicar esta estructura web.

Usa lo aprendido en esta clase: un contenedor con imagen y título centrados, párrafos separados y una franja de color de fondo para el pie de página.