Teoría
Teoría

Reglas CSS

Ya terminamos de añadir contenido al blog. Ahora toca darle estilo, y para eso vamos a conocer mejor CSS.

CSS es un lenguaje que permite dar estilo a documentos estructurados, como los documentos HTML. La sintaxis que usaremos es sencilla: escribiremos una regla CSS detrás de otra. Cada regla consta de un selector y una lista de propiedades con sus valores:

selector {
  propiedad: valor;
  propiedad: valor;
}

Ah, sí, CSS también tiene comentarios: se escriben entre /* y */. Mira esta regla de la primera parte:

.feature-kitten {
  padding-top: 60px;                        /* relleno superior */
  background-image: url("img/bottle.svg");  /* imagen de fondo */
}

Empecemos por el bloque de navegación. Por ahora, solo descomenta la regla CSS y observa qué cambia.

En los ejemplos de este capítulo escribiremos las reglas una detrás de otra, sin anidarlas.

Además de las reglas que acabamos de ver (rule sets), CSS tiene las llamadas «reglas arroba» (at-rules). Empiezan por el símbolo @, como @font-face. También se conocen como directivas CSS.

No necesitaremos directivas para estos ejercicios, pero más adelante las conoceremos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en HTML y CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Sitio de un principiante en HTML y CSS</h1> </header> <main> <img src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav> <h2>Entradas del blog</h2> <ul> <li><a href="day-1.html">Día 1. Cómo olvidé darle de comer al gato</a></li> <li><a href="day-2.html">Día 2. Quiero dedicarme a HTML y CSS</a></li> <li><a href="day-3.html">Día 3. Mi gato está enojado conmigo</a></li> <li><a href="day-4.html">Día 4. Casi me enfermo</a></li> <li><a href="day-5.html">Día 5. Un descanso</a></li> <li><a href="day-6.html">Día 6. No entendí nada</a></li> <li><a href="day-7.html">Día 7. Cupcake me encargó una tarea</a></li> <li><a href="day-8.html">Día 8. Un día muy serio</a></li> <li><a href="day-9.html">Día 9. O mejor dicho, noche</a></li> <li><a href="day-10.html">Día 10. Un primer balance</a></li> <li><a href="day-11.html">Día 11. Sin exagerar</a></li> <li><a href="day-12.html">Día 12. A todos les gustan las galletas</a></li> <li><a href="day-13.html">Día 13. Encontré un artículo</a></li> <li><a href="day-14.html">Día 14. Un formato nuevo</a></li> <li><a href="day-15.html">Día 15. Una galería de selfis</a></li> </ul> </nav> <section> <p>¡Hola a todos! Les doy la bienvenida a mi primer sitio web. Hace poco no tenía ni idea de cómo se crean las páginas web, pero ahora encontré <a href="https://htmlacademy.org/courses">cursos interactivos de HTML y CSS</a> y me propuse aprender a crearlas. Hasta tengo un instructor: Cupcake, que no me dejará bajar el ritmo y estará atento a mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } /* Descomenta la regla de abajo */ /* nav { margin-bottom: 30px; background-color: #4470c4; } */ ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

ObjetivosRealizado

En el editor CSS, descomenta la regla para nav: elimina /* y */.