Tutorial para aprender CSS b√°sico desde cero + Manual PDF descargable

Tanto si quieres crear p√°ginas web directamente en HTML, como si usas una plataforma de gesti√≥n de contenidos como WordPress o Blogger, si quieres manipular el dise√Īo de tu web, necesitar√°s usar las hojas de estilo en cascada CSS (siglas en ingl√©s de Cascading Stylesheets).

cabecera tutorial basico css

Imagen de Shutterstock - © hvostik

Y es que, al igual que en el caso de HTML, se trata de una tecnolog√≠a relativamente asequible para una persona no t√©cnica y con un gran ‚Äúefecto palanca‚ÄĚ. Es decir, con aprender tan solo cuatro cosas b√°sicas, se te abrir√° un mundo de posibilidades.

En el caso de crear páginas web directamente en HTML, la necesidad de usar hojas CSS es obvia. Aquí es simplemente una necesidad y no hay más que hablar.

Pero la gracia de la cuestión está en las plataformas de blogs como Joomla, WordPress o Blogger que son las herramientas que todo el mundo usa hoy en día.

Aquí, para ponerle las cosas más fáciles al usuario, se ha intentado siempre evitar el uso de HTML y CSS. Y eso es bueno el 80% del tiempo, pero hay un 20% de ocasiones donde no saber un poquito de HTML y CSS te limitará severamente.

Por citar el ejemplo de WordPress, para el dise√Īo se usan plantillas o temas de WordPress con dise√Īos prefabricados.

Salvo que uses un tema profesional de pago muy bueno como Divi, por ejemplo, que te permite manipular el dise√Īo de la plantilla con un potente interfaz visual, te encontrar√°s con que, en general, estas plantillas a nivel de interfaz de usuario son bastante r√≠gidas, especialmente si hablamos de las gratuitas que puedes encontrar en el repositorio de WordPress.

Sin embargo, a nivel de c√≥digo, en cualquier plantilla de WordPress se puede ‚Äúmeter mano‚ÄĚ a√Īadiendo hojas de estilo CSS. Adem√°s, desde la versi√≥n 4.7 de WordPress ya no es necesario hacerlo modificando c√≥digo o con plugins, sino que a√Īadir CSS personalizado se ha incorporado como una funcionalidad est√°ndar de WordPress. M√°s de esto m√°s abajo en este post.

En este sentido, en este post no pretendo convertirte en un crack de las hojas CSS, pero s√≠ seguir la famosa regla de Pareto del 80/20 de ense√Īarte con unas pocas pinceladas lo m√°s importante del mundo CSS y que puedas empezar a aplicarlo ya mismo.

Por otra parte, este post presupone que tienes conocimientos básicos de HTML. En caso de que no sea así, léete por favor primero este otro post que te introduce al mundo del HTML:

como hacer pagina web html Cómo hacer una página web con HTML

Crear una p√°gina web con HTML es m√°s f√°cil de lo que crees. En post aprender√°s r√°pido y f√°cil todo lo que necesitas para crearlas.

¬ŅQu√© son las hojas de estilos CSS y para qu√© sirven?

La idea más importante detrás de las hojas de estilo CSS es separar el contenido de su presentación, es decir, de su aspecto visual. En las páginas web el lenguaje HTML se usa para estructurar el contenido semánticamente (títulos, subtítulos, texto, etc.) y CSS para la maquetación y estética del mismo.

¬ŅTe dedicas al dise√Īo web pero no consigues hacerlo rentable?

Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como dise√Īador web freelance.

Haz clic en el botón de abajo para descubrir:

  • En qu√© est√°s fallando. ¬ŅPor qu√© otros viven de esto y a ti te cuesta tanto?
  • Los secretos para adelantar a tu competencia por la derecha.
  • C√≥mo multiplicar por tres tus ingresos sin hacer m√°s webs, ni subir precios.
  • 16 palabras y mensajes de venta que todo dise√Īador deber√≠a borrar de su web.
  • C√≥mo hacer p√°ginas web de 400‚ā¨ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).

Este principio es fundamental por muchos motivos. Un ejemplo claro es el ‚Äúdise√Īo adaptativo‚ÄĚ (responsive design): poder adaptar el mismo contenido a diferentes dispositivos. Es decir, que una misma p√°gina web se puede visualizar de una manera diferente en un PC que un m√≥vil, optimizada para cada caso.

Los elementos b√°sicos CSS: reglas, selectores y propiedades

Para hacer esto, el concepto fundamental de las hojas CSS son las reglas.

Con las reglas podemos definir cosas como éstas:

  • ‚ÄúEl t√≠tulo principal de cada p√°gina (<h1>) debe estar centrado, ser de color gris oscuro y usar la fuente ‚ÄúMontserrat‚ÄĚ con un tama√Īo de 40 pixeles‚ÄĚ
  • ‚ÄúLos subt√≠tulos de cada p√°gina de nivel dos (<h2>) deben estar alineados a la izquierda, color negro ligeramente m√°s claro y usar tambi√©n el tipo de letra ‚ÄúMontserrat‚ÄĚ, pero con un tama√Īo de 32 pixeles.‚ÄĚ
  • ‚ÄúLas im√°genes dentro de la columna principal deben expandirse siempre al ancho m√°ximo de dicha columna.‚ÄĚ
  • etc., etc.

Si te fijas, es lo mismo que hacemos de manera visual con cualquier editor de texto, pero expresado de una manera literal y en un lenguaje que no es nuestro lenguaje natural, sino un lenguaje especial, m√°s aptado a un ordenador.

Estas reglas de arriba concretamente traducidas al lenguaje CSS real tendrían este aspecto:

h1 {
  font-family: Montserrat;
  font-size: 40px;
  color: #333;
  text-align: center;
}

h2 {
  font-family: Montserrat;
  font-size: 32px;
  color: #444;
}

div.contenido img {
  width: 100%;
}

Con este peque√Īo ejemplo ya podemos ver perfectamente c√≥mo funcionan las hojas de estilo CSS.

Las reglas

En primer lugar f√≠jate c√≥mo esta hoja de estilos se divide en tres bloques diferenciados, envueltos en llaves, ‚Äú{‚Ķ}‚ÄĚ.

Esto son las reglas. Cada una implementa una directiva concreta de la peque√Īa lista de reglas que hab√≠a formulario de una manera redactada un poco m√°s arriba.

Los selectores

Para especificar a qué partes de la página HTML se aplica cada regla en cuestión, le precede un selector. Este selector especifica el ámbito de aplicación de la regla, es decir, a qué partes de la página aplica.

Si nos imaginamos un documento HTML como sus elementos como un árbol (recuerda que están organizados de manera jerárquica), este ámbito de aplicación van a ser una o varias ramas de ese árbol.

En las dos primeras reglas (selectores ‚Äúh1‚ÄĚ y ‚Äúh2‚ÄĚ) el √°mbito de aplicaci√≥n es muy amplio porque los selectores son elementos HTML. Es decir, estamos diciendo que la primera regla se aplique a todos los elementos <h1> y que la segunda se aplique a todos elementos <h2>.

El √ļltimo selector hila un poco m√°s fino: √©ste nos est√° diciendo que la tercera regla se aplica solamente a elementos <img> que sean hijos de un elemento <div>. Esto se hace con la posici√≥n de los elementos, es decir, al poner ‚Äúimg‚ÄĚ a la derecha de ‚Äúdiv‚ÄĚ estamos diciendo que img tiene que tener un <div> como padre.

Pero, adem√°s, con el sufijo de ‚Äú.contenido‚ÄĚ estamos diciendo que ese ‚Äúdiv‚ÄĚ no puede ser cualquier div, sino que, a su vez, este <div> tiene que pertenecer a la clase ‚Äúcontenido‚ÄĚ. Esto nos es √ļtil para diferenciar distintos bloques <div> y en el ejemplo lo usaremos para diferenciar la columna principal de contenido de la columna de la barra lateral.

Si necesitas un hosting para tu web o tu blog, ¬°act√ļa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Podr√≠amos haber hecho lo mismo con cualquier otro elemento HTML. En general, las clases (atributo ‚Äúclass‚ÄĚ en HTML) son muy √ļtiles para tratar los mismos elementos HTML de una manera diferenciada seg√ļn su lugar y funci√≥n en la p√°gina.

Las propiedades

Por √ļltimo est√°n las propiedades, esto es lo que vemos encerrado dentro de las llaves de una regla.

Las reglas siguen la sintaxis de [propiedad]:[valor].

Por ejemplo:

font-size: 40px;

Aqu√≠ estamos diciendo que a los elementos que entran dentro del √°mbito de la regla se les aplique un tama√Īo de letra de 40 pixeles. Los elementos deben ser por tanto elementos tipo texto, es decir, elementos como <h1>, <h2>, <p>, etc. Pero aunque entre alg√ļn elemento dentro del √°mbito de la regla que no sea tipo texto, no pasa nada. En ese caso, se ignora esa propiedad concreta y listo.

Las propiedades CSS m√°s usadas

Hay centenares de propiedades CSS, se te har√° complicado aprenderlas todas. Pero la buena noticia es que no hace falta, una vez m√°s se cumple la Ley de Pareto del 20/80: sabiendo solo una peque√Īa parte, sabr√°s lo m√°s importante.

A continuación te dejo una lista con las que serían, en mi experiencia, las imprescindibles que ya te permitirán hacer una infinidad de cosas.

No pretendo que con esta lista las sepas manejar, sino simplemente guiarte con las más importantes para que centres tu atención en ellas en tu proceso de aprendizaje y saques así el máximo provecho a tu tiempo.

Los detalles de cada una los puedes aprender en esta magnífica página:

Referencia CSS del Mozilla Developer Network

Como indicio de que se trata de una lista bastante completa, en el ejemplo al final de este post vas a ver que no se usa ninguna propiedad que no esté en esta lista. Pero, en cualquier caso, tus sugerencias en los comentarios para refinar esta lista serán muy bienvenidos ya que esta selección no deja de ser una visión subjetiva mía.

Propiedades CSS b√°sicas, comunes a todos los elementos

  • width: establece la anchura del elemento. Pueden ser valores absolutos o relativos al contenedor del elemento.
  • height: similar a height para la altura del elemento.
  • margin: espacio exterior al borde del elemento que mantiene con los elementos vecinos.
  • padding: espacio entre el borde del elemento y su contenido.

Junto con las propiedades básicas, conviene comentar también el famoso modelo de caja de CSS:

modelo caja css
El famoso modelo de caja de CSS.

Los elementos se encuentran en ‚Äúcajas‚ÄĚ con propiedades que son como las capas de una cebolla y que dan mucho juego a nivel est√©tico con espacios y bordes (ver m√°s abajo) para el elemento.

En este tutorial se explican a fondo las ideas detr√°s del modelo de caja de CSS.

Propiedades CSS para texto

  • font-family: tipo de letra (nombre del tipo => ‚ÄúMontserrat‚ÄĚ, ‚ÄúOpen Sans‚ÄĚ, etc.).
  • font-size: tama√Īo de letra.
  • font-weight: peso (normal, negrita, ‚Ķ).
  • font-style: estilo (normal, cursiva, ‚Ķ).
  • letter-spacing: espacio entre letras.
  • line-height: espacio entre l√≠neas / altura de la l√≠nea.
  • text-decoration: cosas como subrayados, tachados, etc.
  • text-align: alineaci√≥n del texto (left, center, right).

Propiedades CSS para colores y fondos

  • color: color del elemento. Es importante notar que existen diferentes formatos para especificar el color como palabras predefinidas (‚Äúred‚ÄĚ, ‚Äúgreen‚ÄĚ, etc.), formato RGB o valor hexadecimales (ver detalles en el material de referencia).
  • background-color: color del fondo del elemento.
  • background-image: usar una imagen de fondo.
  • background-repeat: usar una imagen de fondo como mosaico. Permite diferentes modos de organizaci√≥n de la imagen (ver detalles en material de referencia).
  • opacity: opacidad del elemento. Va desde 0 (completamente transparente) hasta 1 (s√≥lido). Un valor de 0.5 ser√≠a, por tanto, un nivel de transparencia del 50%.

Propiedades CSS para bordes

  • border: a√Īade un borde a un elemento y especifica sus propiedades (grosor, estilo de l√≠nea, etc.). Ver tambi√©n el modelo de caja de arriba.
  • border-color: color del borde.
  • border-style: diferentes estilos (s√≥lido, rayitas, puntos, etc.).
  • border-radius: redondear las esquinas de un elemento.

Otras propiedades CSS interesantes

  • float: propiedad avanzada que permite una maquetaci√≥n m√°s sofisticada. Posicionar los elementos de manera ‚Äúflotante‚ÄĚ. Ver este tutorial b√°sico sobre posicionamiento flotante.
  • clear: controla el comportamiento de los elementos adyacentes a elementos posicionados de forma flotante. Ver tambi√©n el tutorial anterior sobre posicionamiento flotante.
  • overflow: controla el comportamiento de los contenidos que no caben en su elemento contenedor (valores: visible, hidden, scroll, auto, inherit)
  • display: controla diferentes aspectos de la visualizaci√≥n de un elemento, permite incluso ocultarlo con el valor ‚Äúnone‚ÄĚ.
  • list-style-image: URL con una imagen que se debe usar como vi√Īeta.
  • list-style-type: diferentes estilos de vi√Īetas y numeraci√≥n para los elementos de la lista.
  • box-shadow: aplicar un efecto de sombra a un elemento.

Cascadas y herencia: reutilizar código forma inteligente

Una de las cosas m√°s √ļtiles de las hojas de estilo CSS es que soportan la idea de herencia.

Esta idea se manifiesta b√°sicamente a dos niveles:

  1. La herencia de elementos más generales a más específicos.
  2. El concepto de ‚Äúcascada‚ÄĚ de hojas de estilo.

Aquí te voy a dar sólo las pinceladas básicas, para aprender más a fondo sobre esto, te recomiendo este artículo sobre los conceptos de herencia y cascada en CSS.

Herencia entre elementos HTML

Esta idea es muy simple: los elementos que contienen a otros elementos (elementos contenedores o ‚Äúpadres‚ÄĚ) transmiten sus propiedades a los elementos hijos.

Por ejemplo:

El elemento <body> de una p√°gina HTML contiene a todos los dem√°s elementos. Por tanto, si la propiedad CSS ‚Äúbackground-color‚ÄĚ es ‚Äúwhite‚ÄĚ en una regla para <body>, todos los dem√°s elementos van a tener por defecto tambi√©n un fondo blanco, salvo que una regla CSS m√°s espec√≠fica diga lo contrario. Es decir, heredan la propiedad del elemento padre.

Hojas de estilo CSS en cascada

Cuando un sitio web es grande y tiene una maquetación compleja, es inevitable que haya reglas que entren en conflicto con otras reglas para un determinado elemento en una o más páginas por asignar diferentes valores a las mismas propiedades.

Aqu√≠ har√° falta un mecanismo de arbitraje, unas reglas o ‚Äúmeta-reglas‚ÄĚ podr√≠amos decir, que dictaminen en qu√© situaciones prevalecen qu√© reglas sobre un determinado elemento.

Por otra parte, la propia web querrá salirse puntualmente en algunos puntos de las líneas generales de su estilo.

Aquí lo que nos interesará será un mecanismo que nos permita sobrescribir o reescribir algunas reglas para algunas páginas especiales.

Ambos problemas se solucionan con el concepto de cascada que por su complejidad también se sale de este post y para el cual te remito de nuevo al artículo sobre los conceptos de herencia y cascada en CSS que ya mencioné arriba. Simplemente quiero que te quedes con la idea de que estas situaciones se pueden dar y que las hojas CSS ofrecen soluciones para ello.

Cómo editar los estilos CSS en una página web

Ahora que hemos visto qué son las reglas CSS y cómo se usan, veamos cómo se incluyen en una página web.

Para ello hay diferentes opciones:

Estilos CSS inline

Las hojas de estilo inline permiten a√Īadir las reglas CSS directamente como atributo de un elemento HTML.

<h1 style=‚ÄĚfont-family:Montserrat; color:gray‚ÄĚ>T√≠tulo principal</h1>

Aquí no hay realmente un selector de reglas puesto que la regla ya está dentro del propio elemento. Este tipo de reglas tienen la mayor prioridad de todas las reglas.

De todos modos, hay que evitarlas y dejarlas s√≥lo para ocasiones muy justificadas porque realmente violan el esp√≠ritu reutilizaci√≥n de las mismas reglas para m√ļltiples elementos.

Un ejemplo donde se justificar√≠a es en el email en formato HTML (como el que usa Gmail, por ejemplo.). Aqu√≠ no tenemos acceso a la p√°gina del cliente de email (la p√°gina de gmail.com). No podemos a√Īadirle nuestra propia hoja de estilo, por tanto, solo queda hacerlo desde el propio c√≥digo HTML.

Hojas de estilo CSS embebidas

Con esta opción, escribimos las reglas dentro de un elemento <style> que iría anidado dentro del elemento <head> de la página HTML.

Aquí ya logramos reutilizar el código CSS para los elementos de la página, pero tampoco es una solución óptima porque las reglas sólo serán visibles para esa página en las que se han declarado y no para las demás, de modo que tendríamos que repetir lo mismo también en las demás páginas.

En realidad, el uso de estilos embebidos sólo se justificaría si tenemos una o unas pocas páginas especiales con estilos que sólo aplican a ellas.

Hojas de estilo CSS externas

Las hojas de estilo externas son la manera de vincular estilos CSS a una página HTML que se debería utilizar siempre, salvo que, por razones especiales como las arriba mencionadas, no sea posible. Será también la fórmula que usaremos en el ejemplo completo que viene un poco más abajo.

Esto se hace creando un fichero .css con las reglas CSS (como el del ejemplo que acompa√Īa a este post) y vincul√°ndolo a la p√°gina insertando en la p√°gina HTML (como hijo del elemento <head>) una l√≠nea CSS como √©sta:

<link rel="stylesheet" type="text/css" href="/css/mis-estilos.css" />

De este modo se puede usar el mismo fichero en todas las páginas que se quiera y reutilizamos el código CSS de manera óptima. Podríamos darle la vuelta por completo a la estética del sitio cambiando tan solo este fichero CSS.

Se pueden usar tambi√©n varios ficheros a la vez incluyendo varias l√≠neas como la anterior. Como esto puede dar lugar a conflictos si se repitiese alguna regla, pero con diferentes valores para las propiedades, la regla que sigue CSS es que el √ļltimo fichero (la l√≠nea de m√°s abajo) es el m√°s prioritario.

Cómo editar los estilos CSS en WordPress

Si usas WordPress para tu web, la medida en la que vas a poder manipular los estilos CSS de tu sitio van a depender, una vez más, de la versión de WordPress que uses.

Edición de estilos en WordPress.com

Si usas WordPress.com ya sabes que se encuentra muy limitado en el plan gratuito e incluso también en los planes de pago básicos.

El tema CSS no es ninguna excepci√≥n, aqu√≠ te vas a encontrar con las opciones de ‚ÄúPersonalizaci√≥n b√°sica del sitio‚ÄĚ en el plan gratuito y en el personal, y que parecen sugerir la posibilidad de meterle mano a los estilos CSS.

planes pago wordpress com
Hasta el plan Premium no se pueden modificar los estilos CSS en WordPress.com.

Lamentablemente no es así. Esta opción se refiere solamente a una serie de opciones básicas que se pueden configurar en el tema (más o menos dependiendo del tema elegido), cosas como poder elegir un esquema de colores entre unos pocos o poder cambiar la imagen de cabecera.

Por tanto, aqu√≠ no se puede manipular ning√ļn tipo de CSS.

Ser√° a partir del plan Premium cuando se pueden manipular los estilos CSS de tu sitio.

Edición de estilos en WordPress.org

En WordPress.org, por suerte, la cosa cambia radicalmente. Como en todo lo dem√°s, en WordPress.org la libertad para meterle mano a las CSS es total.

A esto hay que a√Īadir una mejora que ha introducido la versi√≥n 4.7 en la que se ha incluido en el escritorio de WordPress la opci√≥n de a√Īadir directamente CSS personalizado con una prioridad superior que el CSS por defecto del tema de modo que, en caso de conflicto, prevalecen tus reglas. Es decir, tu c√≥digo CSS sobrescribe el c√≥digo por defecto.

Esto se puede hacer en el men√ļ “Apariencia/Personalizar” en cuya pantalla de edici√≥n se ha incluido la opci√≥n de ‚ÄúCSS Adicional‚ÄĚ y que permite editar el c√≥digo CSS que quieras a√Īadir.

Quiero aprovechar esto tambi√©n para recomendarte nuestro tutorial estrella (podr√≠a ser perfectamente un curso de pago) que explica paso a paso y desde cero c√≥mo crear una web con WordPress con un dise√Īo atractivo y todo lo que necesitas para arrancar con tu aventura online.

Aparte de aprender a crear una web completa, en los minutos 54:36 y 1:31:34 puedes ver tambi√©n c√≥mo usar CSS dentro de WordPress, incluido para la creaci√≥n de dise√Īos adaptables (dise√Īo “responsive” para dispositivos m√≥viles).

Cómo editar los estilos CSS en Blogger

Blogger también da una libertad absoluta a la hora de querer manipular los estilos CSS del sitio.

Los pasos son:

  1. Entra en Blogger con tu usuario.
  2. Elige el blog a actualizar.
  3. En el men√ļ de la izquierda, haz clic en Tema.
  4. Haz clic en el bot√≥n ‚ÄúPersonalizar‚ÄĚ debajo de “El blog ahora”.
  5. En el men√ļ arriba a la izquierda, haz clic en ‚ÄúAvanzado‚ÄĚ
  6. Ahora haz clic en ‚ÄúA√Īadir CSS‚ÄĚ.
  7. A√Īade tus reglas CSS.
  8. Pulsa el bot√≥n de ‚ÄúAplicar al blog‚ÄĚ arriba en la derecha.
captura css blogger
Aplicación de estilos CSS en Blogger.

Ejemplo: una p√°gina de blog con HTML y CSS

Como punto final a este post, vamos a ver un ejemplo sencillo, pero creo que bastante completo e instructivo para empezar con esto.

Es el mismo ejemplo que ya usamos en el post de introducción a HTML, pero esta vez en lo que nos vamos a fijar es en la parte del CSS.

En el ejemplo he maquetado una página web con el típico estilo de blog: con su cabecera, su columna de contenido principal y una barra lateral (sidebar).

Resultado antes de aplicar una hoja de estilo

De no existir las hojas de estilo CSS, el aspecto de esta p√°gina ser√≠a bastante ‚Äúcutre‚ÄĚ. Si has vivido la √©poca de los comienzos de Internet a mediados de los noventa, el aspecto de la p√°gina te recordar√° algo a esos tiempos en los que las p√°ginas no usaban CSS:

ejemplo html sin css
La p√°gina antes de aplicarse una hoja de estilo CSS.

Fíjate también como se nos ha ido el banner de Webempresa hacia abajo cuando debería estar en el lado derecho.

Resultado después de aplicar una hoja de estilo

Sin embargo, con una sencilla hoja de estilo que se limita a utilizar las propiedades CSS que he listado en este mismo post, la cosa cambia radicalmente:

ejemplo html con css
La misma página después de aplicar una hoja de estilos CSS.

¬ŅCu√°les son las diferencias?

Posicionando los bloques de contenido

En primer lugar, hemos preparado el terreno desde la estructura del contenido HTML para crear los diferentes bloques que queremos diferenciar luego en la maquetación usando CSS.

Es decir:

  • Una cabecera para el logo
  • Un cuerpo con el contenido
    • La columna principal de contenido a la izquierda
    • La columna secundaria o barra lateral a la derecha
  • Un pie de p√°gina (que no se ve en las capturas, lo puedes ver cuando te descargues el ejemplo)

La manera de modelar esto es usar elementos <div>. Con esto la estructura básica del HTML dentro del <body> de la página (sin el contenido en sí) quedaría así:

<body>
  <div class="cuerpo">
    <div class="contenido"></div>
    <div class="barra-lateral"></div>
  </div>
  <div class="pie"></div>
</body>

A través de las clases de estos divs aplicamos reglas con propiedades como float:left o float:right para ir colocando los divs en su sitio. Puedes verlo todo en detalle en el código dl ejemplo.

Por ejemplo, la columna del contenido principal la ajustamos a un 65% del ancho disponible del <div> padre (‚Äúcuerpo‚ÄĚ) y la ‚Äúflotamos‚ÄĚ a lado izquierdo:

.contenido {
  float: left;
  width: 65%;
}

Alineando contenidos

Pero no solamente hay que alinear los bloques, sino también los contenidos.

Hemos alineado la cabecera y los títulos principales (<h1>) de manera centrada con la propiedad text-align:center.

Cambiando colores y tipos de letra

Una de las cosas que m√°s impactan el dise√Īo de una p√°gina son los tipos de letra utilizados. Una simple p√°gina con fondo blanco, pero con unos tipos de letra bien escogidos y ajustando un poco su color, sin m√°s elementos, ya transmite elegancia y buen dise√Īo.

Para el ejemplo he incluido dos tipos de letra de Google Fonts muy populares y que, adem√°s, son gratuitos al 100%, como el resto de fuentes de Google Fonts. Se trata de ‚ÄúMontserrat‚ÄĚ y ‚ÄúOpen Sans‚ÄĚ.

Para poder utilizarlos es importante incluir estas líneas al principio de la hoja de estilos:

@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Luego utilizando las propiedades font-family: Montserrat para los títulos de nivel <h1> y <h2> he asignado esta fuente a estos títulos y usando las propiedades font-family: Open Sans con <body> he conseguido que Open Sans sea el tipo de letra por defecto para cualquier otro elemento de texto de la página.

Echa un vistazo a este extracto del código completo (que te puedes decargar):

body {
  font-family: Open Sans;
  margin: 0px;
}

h1 {
  font-family: Montserrat;
  font-size: 40px;
  color: #333;
  font-weight: 600;
  letter-spacing: -3px;
  text-align: center;
}

Y por √ļltimo, f√≠jate tambi√©n en el uso de las propiedades color y background-color en varios elementos como la cabecera y los t√≠tulos con las que hemos fijado expresamente los colores usados para diferencias un poco m√°s la cabecera y para rebajar un poco la intensidad del color negro en los t√≠tulos ya que queda m√°s agradable a la vista.

Dise√Īo responsive con media queries

Y para rematar, tenemos que hablar tambi√©n del dise√Īo adaptativo (‚Äúresponsive design‚ÄĚ en ingl√©s).

Hoy en el uso de los móviles y las tablets para navegar por la red está tan extendido que un gran % del tráfico proviene de dispositivos móviles.

En nuestras webs, por ejemplo, seg√ļn la hora del d√≠a, estamos hablando siempre de, m√≠nimo, un 25% con picos cercanos al 50% en determinadas horas del d√≠a (por la noche, sobre todo).

Por tanto, si quieres hacer las cosas bien ya no se puede hacer una web sin tener en cuenta la adaptaci√≥n de la misma a diferentes tama√Īos de pantalla, algo para lo cual las hojas de estilo CSS tambi√©n est√°n preparadas.

De todos modos, aqu√≠ entramos tambi√©n en temas m√°s avanzados de dise√Īo web. Sin llegar ser complicad√≠simo, ya es lo suficientemente complejo para salirse claramente del alcance de este post, por eso, quiero limitarme simplemente a explicarte el concepto clave en esto, la media query, junto con un ejemplo muy simple.

Media query traducido del ingl√©s quiere decir ‚Äúconsulta del medio‚ÄĚ y se refiere a que el navegador web es capaz de saber en qu√© dispositivo se encuentra y, por supuesto, cu√°les son las dimensiones de la ventana en la que se est√° visualizando una p√°gina web.

Esto lo podemos utilizar, para crear reglas CSS condicionadas a estos factores.

Por ejemplo, en la siguiente consulta vamos a suprimir la barra lateral cuando el ancho de página se reduce mucho (cómo sucedería en un móvil, por ejemplo).

Adem√°s, por est√©tica, consideramos que los t√≠tulos y subt√≠tulos deber√≠an estar centrados, as√≠ como la propia columna principal que ya no deber√≠a estar alineada (‚Äúflotar‚ÄĚ) a la izquierda, sino estar tambi√©n centrada una vez que nos hemos quedado sin barra lateral.

√Čste es el resultado, visto con la herramienta ‚ÄúVista de dise√Īo adaptativo‚ÄĚ que viene de f√°brica con el navegador FireFox y que se puede activar con Ctrl+Mayus+M:

ejemplo responsive design
A partir de un ancho de 640 pixeles hacia abajo, la apariencia de nuestra p√°gina se adapta a este menor ancho.

Lo interesante de la herramienta de dise√Īo adaptativo de FireFox es que podemos crear con ella una ‚Äúventana‚ÄĚ dentro del navegador cuyo tama√Īo podemos ajustar a la dimensi√≥n exacta en pixeles que queramos (ver captura). Esto es simplemente genial para experimentar con dise√Īos CSS responsive para ver si se comportan como esperamos.

Adem√°s, permite hacer capturas de pantalla del contenido de esa ventana que guarda autom√°ticamente como imagen PNG.

En el código CSS esto se manifiesta con este bloque especial que, a su vez, contiene reglas CSS:

@media (max-width: 640px) { … }

Pues bien, este bloque lo que hace simplemente es decirle al navegador de que en caso de que el ancho de la p√°gina sea de 640 pixeles o menos, deben aplicarse las reglas contenidas en dicho bloque y sobrescribir, en su caso, las reglas ‚Äúnormales‚ÄĚ con las que entren en conflicto.

En nuestro ejemplo, con la propiedad display: none ocultamos la barra lateral, con text-align: center centramos los títulos, etc.

Aquí puedes ver todas las reglas CSS para un ancho de página máximo de 640 pixeles o inferior:

@media (max-width: 640px) {
  .barra-lateral {
    display: none;
  }

  .cuerpo {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .contenido {
    float: none;
    width: 100%;
  }

  h1, h2, h3 {
    text-align: center;
  }
}

Recursos CSS interesantes

Como ves, las hojas de estilo CSS son tan imprescindibles en una página web como el propio HTML. Por tanto, si quieres aprender a hacer código para páginas web necesitas tanto HTML como CSS.

Espero que con la lectura de este post de introducción hayas entendido la filosofía de cómo funciona el lenguaje CSS y ya puedas empezar a hacer incluso tus primeros pinitos.

No obstante, necesitar√°s profundizar un poco m√°s en las propiedades que he listado aqu√≠ y practicar algunas horas con ellas antes de coger un poquito de soltura. Pero a partir de ah√≠, ver√°s como ya se te abrir√° un mundo de posibilidades en lo que se refiere a dise√Īar p√°ginas web.

Especialmente interesante es la posibilidad de crearte una peque√Īa librer√≠a de componentes reutilizables de c√≥digo en WordPress con un plugin como Code Snippets. Esto es muy √ļtil para hacerte, por ejemplo, determinados banners, tablas o recuadros que utilices repetidamente en tus contenidos. Nosotros usamos much√≠simos estos componentes en nuestras webs.

Para profundizar en el tema, te recomiendo estos recursos:

  • Librosweb: un sitio gratuito fant√°stico para aprender todo sobre HTML y CSS, y mucho m√°s.
  • W3CSchools: un sitio de referencia que viene muy bien para consultar puntualmente dudas t√©cnicas muy concretas.
  • CSS Tricks: aqu√≠ encontrar√°s ejemplos de c√≥digo CSS muy originales y muy avanzados en algunos casos. Una fuente fant√°stica para convertirte en un pro si lo deseas.
  • Zengarden: un sitio cl√°sico con muchos dise√Īos para inspirarte. No est√° tan orientado a aprender a programar los dise√Īos como CSS Tricks, sino mucho m√°s a inspirarte con el resultado final.

Manual CSS en PDF y descarga del código

Tambi√©n te recomiendo una lectura o re-lectura del post ‚Äúhermano‚ÄĚ de este post, ya que aparte de la introducci√≥n al mundo del HTML trata tambi√©n herramientas y otros temas que te ser√°n tambi√©n muy √ļtiles para trabajar con CSS:

como hacer pagina web html Cómo hacer una página web con HTML

Crear una p√°gina web con HTML es m√°s f√°cil de lo que crees. En post aprender√°s r√°pido y f√°cil todo lo que necesitas para crearlas.

El código de los ejemplos te lo puedes descargar aquí:

Y este mismo post en formato PDF aquí:

Acerca del autor: Berto López

Soy autor y fundador de este blog, e Ingeniero en Inform√°tica de formaci√≥n con amplia experiencia: he trabajado como empleado, empresario, incluso funcionario. Vamos, que he probado de todo ūüėĄ

De todo ello, lo que me llena de verdad, es el emprendimiento, combinado con la tecnología, algo que he podido retomar con mi proyecto de emprendimiento actual, al cual pertenece, entre otras, esta web.

He tenido mucho contacto profesional con Pymes y peque√Īos emprendedores y eso me ha llevado inevitablemente hacia WordPress como plataforma web ideal para estos usuarios.

Mi interés se centra en la variante instalable en un servidor, WordPress.org, por su infinito potencial a cambio de un coste casi nulo. Un antes y un después para los emprendedores.

En este blog quiero ayudar a sus usuarios, sobre todo, con los aspectos más técnicos de WordPress y el hosting para poder disfrutar a tope, sin miedos, de esta maravillosa plataforma de software libre y de código abierto :)

28 comentarios en ¬ęTutorial para aprender CSS b√°sico desde cero + Manual PDF descargable¬Ľ

  1. Muchas gracias Berto, muy bueno este post. Anteayer sab√≠a nada de CSS y ayer ya estaba modificando c√≥digo oculto en Blogger solo con lo aprendido ac√°, bastante intuici√≥n y mucha prueba-error. Igualmente pude iniciar el dise√Īo de una nueva p√°gina… parece poco, pero repito: hace 3 d√≠as solo asomaba la palabra CSS en muchas cosas que le√≠a y no sab√≠a lo que era.
    Te agradezco el post

    Responder
  2. Buenas tardes. La descarga del archivo zip con el c√≥digo no es v√°lida. El archivo que se descarga (lo he hecho 4 veces) contiene 0 bites), dice que est√° da√Īado o corrupto.
    Gracias

    Responder
  3. Muchas gracias Berto por su gran solidaridad, competencia, rapidez, exactitud y por la oportunidad de dejarme poseer uno de mis deseos personales hace muchos a√Īos tal es la manipulacion de estos recursos. Te deseo lo mejor!

    Responder
  4. Muy interesante para quienes se inician.

    Los m√°s usados yo reemplazar√≠a width y height por “max-width” y “max-height”
    Así si quieres tener un bloque de 400px de anchi dirías:

    .bloque {
    width:100%;
    max-width:400px
    }

    Esto hará que tu bloque se adapte a móviles sin tener que cambiar nada.

    En lo que se refiere a @media sería mejor especificar:
    @media screen
    @media print
    @media all
    etc

    Así lo que le dices es que se aplique el estilo a un navegador o pantalla específica

    Un abrazo

    Responder
    • Tomo nota Arol ūüôā ¬°Muchas gracias por tus sugerencias!

      De todos modos, ten en cuenta que la intención del post es introducir a la gente en la materia y que les sea fácil de entender.

      En ese sentido, no pretendo que el dise√Īo de la CSS de ejemplo sea √≥ptima. El foco est√° en que sea f√°cil de entender.

      ¬°Un saludo!
      Berto

      Responder
  5. ¡Increíble Berto!

    Me viene como anillo al dedo, tanto para mi blog como para el proyecto fin de carrera que tengo entre manos en el que tengo que dise√Īar por completo una web y no paro de hacer cursos para aprender!

    La mayoría de cosas las conocía (este post hace dos meses hubiera sido de 10 jeje) y sin duda alguna, con la página que más contento estoy es W3CSchools. Tututoriales increíbles de cualquier lenguaje importante.

    Y sinceramente, son de gran utilidad posts tan b√°sicos y pr√°cticos como este ūüôā

    Un abrazo

    Responder
    • Me alegro Jes√ļs, de eso se trataba ūüôā

      La idea detrás de todo esto es que Hosting a Tope se centre bastante en la parte técnica de programación y administración de sitios web orientada a principiantes, quedándose Ciudadano 2.0 más en la parte menos técnica de marketing, etc.

      As√≠ segmentamos mejor los intereses de nuestro p√ļblico.

      ¬°Un saludo!
      Berto

      Responder
  6. Hola Berto.
    Muchas gracias por el CSS, lo tendré que practicar y si al algo que tal vez no lo entienda, solicitare tu ayuda si no es mucho molestar.
    Otra cosa, quería preguntarte si sabes algo de programa JAKABI, me comentaron que es mas fácil que el WP.

    Responder

Deja un comentario