Teoría
Teoría

Propiedades y valores

La lista de propiedades y valores va dentro de las llaves de la regla CSS. Cada pareja «propiedad: valor» se separa de la siguiente con un punto y coma, y la propiedad se separa de su valor con dos puntos. La propiedad indica qué aspecto queremos cambiar; el valor, cómo queremos cambiarlo. Volvamos al ejemplo:

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

En este ejemplo, padding-top tiene el valor 60px y background-image, el valor url("img/bottle.svg"). Así, la regla aplica un relleno superior y una imagen de fondo a todos los elementos con la clase feature-kitten.

CSS permite controlar el ancho y la altura de los elementos, sus márgenes y rellenos, el color y el tamaño del texto, el fondo y mucho más. Cada vez que agregamos una propiedad o cambiamos su valor, modificamos algo en la página. Agreguemos unas propiedades y veamos qué cambia en el blog.

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 class="avatar" 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; } .avatar { border-radius: 10px; } nav { margin-bottom: 30px; /* Agrega las propiedades aquí */ background-color: #4470c4; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

ObjetivosRealizado

Agrega a la regla para nav la propiedad padding con el valor 20px.
Después, agrega la propiedad color con el valor #ffffff.