Como HTML, CSS (Cascading Style Sheets) u Hojas de Estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado, es un lenguaje de hojas de estilo. Un lenguaje que te permite aplicar estilos de manera selectiva a elementos en documentos HTML.

Podemos empezar con un HTML de ejemplo:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <p>Queremos dar estilos a esta página web</p>
    <p>Esto es un ejemplo de diferentes parrafos</p>
  </body>
</html>

En todo elemento de HTML tendremos la propiedad style, con la cual podremos dar estilo a ese elemento:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body style="background: blue;">
    <p style="background: red; color: white;">Queremos dar estilos a esta página web</p>
  </body>
</html>

Si abrimos la página, el navegador renderiza la web con los estilos indicados background para el color de fondo y color para el color de la fuente.

Gracias a los background que hemos añadido podemos ver como cada elemento está dentro de una caja. Todo elemento de HTML esta dentro de una caja. Como se comportan estas cajas con respecto al resto es la base de la maquetación y es algo que habrá que aprender.

modelo de caja

Todos los elementos están formados por su contenido padding, border y margin. En el caso de la imagen, tenemos un padding de 16px.

Para trabajar un poco esto, podemos sacar el contenido de los estilos a un fichero nuevo, de esta forma por un lado tendremos el HTML y por el otro el CSS. Creamos el fichero styles.css y lo dejamos al lado de index.html. En el Head del HTML podremos indicar la ruta del fichero CSS:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <link href="./styles.css" rel="stylesheet" type="text/css">
    <title>Mi primera página web</title>
  </head>

  <body>
    <p>Queremos dar estilos a esta página web</p>
  </body>
</html>
p {
  background: red;
  color: white;
}

Una vez que hemos comprobado que funciona podemos dar unos estilos más al párrafo:

Código
Previsualización
p {
  background: red;
  color: white;
  padding: 24px;
  margin: 64px;
  border: 4px solid black;
  border-radius: 8px;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
}
Background:
Para cambiar el color de fondo de la caja, entre otras cosas.
Color:
Para cambiar el color de la fuente.
Padding:
Para dar espacio entre el borde y el contenido. Es afectado por el background.
Margin:
Para añadir margen entre el resto de elementos. No está afectado por el background.
Border:
Para añadir un borde, hay que declarar 3 propiedades, su grosor, su tipo y su color.
Border-radius:
Para hacer border redondeados.
font-size:
Tamaño de la fuente.
font-weight:
El Peso de la fuente, por ejemplo para hacerla negrita.
text-transform:
Para transformar el texto, por ejemplo ponerlo en mayúsculas.

¿Pero qué ocurre si queremos añadir otro párrafo con otros estilos?

En vez de utilizar como selector el nombre del tag, podremos usar otros más específicos. El más común es seleccionar elementos por clase:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <link href="./styles.css" rel="stylesheet" type="text/css">
    <title>Mi primera página web</title>
  </head>

  <body>
    <p class="banner red">Estilos de parrafo con clases banner y red</p>
    <p class="banner blue">Estilos de parrafo con clases banner y blue</p>
  </body>
</html>
.banner {
  color: white;
  padding: 24px;
  margin: 64px;
  border: 4px solid black;
  border-radius: 8px;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

Los selectores de clase se utilizan en CSS empezando con un punto para diferenciarlos del resto de selectores. Un elemento de HTML puede tener tantas clases como se quiera, y los estilos finales del elemento se compondrán entre todas sus clases.

info

Usando clases, el orden en el que se escriben no importa. Aprenderemos cómo funciona el algoritmo en próximos posts.