Taller CSS – Liliana París Borda

¿Qué es CSS?

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 las páginas.
Para que funcione, el archivo de CSS debe estar conectado al archivo de HTML. En este caso no lo realizaremos porque CodePen nos permite visualizarlo como si estuvieran conectados. Más adelante lo podrán hacer.

Cómo darle estilos a nuestros elementos

En este taller queremos darle estilos a las etiquetas que ya creamos en el HTML. Esto se va a llamar propiedades. Es decir, darle un color de fondo a nuestro body, color a los encabezados, cambiar las tipografías, etc.

Para hacer esto, tenemos que entender cómo darle estas propiedades de estilo a nuestras etiquetas. Para llamar a una etiqueta, escribiremos el nombre sin los signos <> y abriremos unas llaves {}, quedará así:

nombredeetiqueta{}

Dentro de nuestras llaves incluiremos todos los estilos que le queramos dar a nuestra etiqueta. La base del código quedará así:

nombredeetiqueta{
propiedad: valor;
propiedad: valor;
...
}

Vamos a empezar con body, dándole unos márgenes para que el texto tenga un poco más de aire. Una vez estemos dentro de las llaves, escribiremos margin: 60px;

Verán cómo nuestra web cambia y ahora tenemos un margen entre los bordes y nuestro texto. Es importante que, después de llamar cada propiedad, terminemos con un punto y coma (;). Esto le indicará al computador que ya no hay más cambios en esa propiedad y que podemos ir con la siguiente.
Nuestra siguiente propiedad para body será el color de fondo. Es importante que sepan que los colores los podemos nombrar como los colores estándares de la web, por su código HEX o por sus porcentajes en RGB. Para este taller utilizaremos los colores estándares de la web. Entren a este link y elijan el de su preferencia.
Una vez tengan su código de color HEX, representado por #000000, vamos a escribir la propiedad

color-background: #000000;
De esta manera, nuestra web ya tiene color. El código CSS para body queda así:

body{
  margin: 60px;
  background-color:  #e6f2ff;
}

Seguimos con nuestra etiqueta h1. Realizamos el mismo procedimiento que con body, pero utilizaremos otras propiedades.
Queremos cambiar la tipografía. Por ahora vamos a ir con lo básico, después aprenderemos a usar fuentes de Google. Por ahora, elegiremos entre serif, sans-serif y monospace. Utilizaremos la propiedad font-family y pondremos monospace.

Ahora vamos a cambiar el tamaño de nuestro encabezado. Le daremos 34 px a nuestra propiedad font-size.
Para alinear el texto al centro, daremos text-align: center;
Y le daremos un nuevo color. Usen la propiedad color y seleccionen un código HEX. ¡Tengan en cuenta la legibilidad! En esta web pueden ver si les sirve o no.
Así, nuestro h1 tendrá estas propiedades:

h1{
  font-family: monospace;
  font-size: 34px;
  text-align: center;
  color: #2A3166;
}

Los códigos cambiarán según sus elecciones.

Nuestro h3 tendrá tipografía monospace, tamaño de fuente de 24 pixeles, y el mismo color que sus h1.
A nuestro párrafo le daremos las siguientes propiedades: tamaño de fuente de 16px y tipografía sans-serif. Para justificar el texto, utilizaremos text-align: justify y para que nuestro texto tenga un peso normal, usaremos font-weight: normal.
A nuestros items de lista solo le daremos la propiedad de font-family: sans-serif.
La imagen está un poco grande. Al usar la propiedad width, está se adaptara a su nuevo ancho sin alterar su proporción. Le daremos un width de 400px.
Por último, nuestra figure caption necesita un nuevo tamaño de fuente de 14 pixeles, que su peso sea normal y la fuente tipográfica sea sans-serif.

Nuestro código completo de CCS quedará así:

body{
  margin: 60px;
  background-color:  #e6f2ff;
}

h1{
  font-family: monospace;
  font-size: 34px;
  text-align: center;
  color: #2A3166;
  
}

h3{
  font-family: monospace;
  font-size: 24px;
  color: #2A3166;
}

p{
  font-size: 16px;
  font-weight: normal;
  font-family: sans-serif;
  text-align: justify;
}

li {
  font-family: sans-serif;
}


img{
  width: 400px;
}

figcaption{
  font-size: 14px;
  font-weight: normal;
  font-family: sans-serif;
}