Desarrollo web para no iniciados – Parte 3 CSS

Ya hemos visto los fundamentos de la web, o sea HTML. Vimos que era un lenguaje que nos permitía estructurar información. Ahora veremos como darle el aspecto que nosotros queramos, y para ello usaremos Hojas de estilo en cascada (CSS, Cascade StyleSheets).

Añadimos nuestras hojas de estilo, indicándolas en el header usando el tag style. Podemos añadirlo desde un archivo externo:

<link rel='stylesheet' href='estilos.css' type='text/css' media='all' />

o incluyendo directamente el código entre los tags:

<style>
  /* Codigo CSS */
</style>

CSS es un lenguaje que sirve para asignar las propiedades de los elementos en nuestro HTML. Esto lo consigue usando reglas que indican uno o mas elementos y las propiedades a asignarle/s.

Ha estas reglas las llamaremos selectores CSS. Los selectores los construimos usando la jerarquía que esperemos en HTML usando el nombre de los tags. Por ejemplo:

p strong {
  color: blue;
}

Hacemos que los elementos strong dentro de elementos p sean de color azul. Podemos, también, filtrar por las propiedades id y/o class añadiendo #, para id, y ., para class. Por ejemplo para el html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Título de mi primera Web</title>
    <style>
      /* CSS mas abajo */
    </style>
  </head>
  <body>
    <h1>Mi primera Web</h1>
    <p id="miid">Contenido fascinante.</p>
    <p class="cgl">Otro contenido pero todavía más impresionante.</p>
    <p class="cgl">Otro contenido pero todavía más impresionante.</p>
    <p>Otro contenido pero todavía más impresionante.</p>
  </body>
</html>

Podemos, cambiar el tamaño de la fuente de todos los parrafos:

p {
  font-size: 30px;
}

Hacer más grande el parrafo con el id miid {

p#miid {
  font-size: 30px;
}

Y poner con un color a los elementos marcados con la clase cgl:

.cgl {
  color: #0029ff;
}

Podemos combinar estos elementos para indicar exactamente sobre que tipo de elementos queremos aplicar nuestros estilos. También tenemos el simbolo > para requerir que las relaciones sean directas. Si tuviesemos:

<p>Texto <strong>Más <strong>texto</strong></strong></p>

Podriamos usar:

p strong {
  color: red;
}

Y conseguiriamos que Más texto salga en rojo, pero con:

p > strong {
  color: red;
}

Solo lo seria el “Más”.

Usando estas herramientas podemos asignarles muchas propiedades a nuestros elementos.

Hay un pseudo selector “:hover” que sirve para cambiar las propiedades de un elemento sobre el que se encuentra el cursor, muy útil con los enlaces:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Con lo que conseguimos que nuestros enlaces solo estén subrayados cuando el cursor está sobre ellos.

En la anterior entrega vimos que habían elementos de bloque, que ocupaban todo su contenedor, y elementos de linea, que solo ocupan su espacio. Si solo tenemos esto no podríamos construir las atractivas páginas que nos encontramos por ahí. Para poder maquetar estos diseños tendremos que aprender a usar la propiedad float, podéis encontrar en floatutorial una minuciosa colección de ejemplos de uso.

Ya tenemos el contenido, podemos modificar la forma en que se representa y cuadrarlo para conseguir una representación concreta. Además vamos a darles vida con javascript, el tema de la última parte de esta introducción.