Teoría
Teoría

Fondos para dar formato al texto

Otro aspecto importante del texto es su color, que se controla con color. Veremos esta propiedad y sus valores en el siguiente ejercicio. Aquí aprenderemos a usar el fondo de un bloque para dar formato al texto y a combinar el color del fondo con el del texto.

Una forma muy común de indicar colores en CSS es la notación hexadecimal, con el símbolo # al principio:

#000000 /* negro */
#ffffff /* blanco */
#ff0000 /* rojo */

La propiedad background-image establece la imagen de fondo de un bloque, y background-color, su color de fondo:

div {
  background-image: url("ruta_a_la_imagen.png");
  background-color: #cccccc;
}

El fondo debe tener suficiente contraste con el color del texto. Un buen contraste facilita la lectura en distintas condiciones de luz y en diferentes dispositivos. Por eso, si agregas una imagen de fondo, también debes elegir un color de fondo adecuado. Así el texto se podrá leer mientras carga la imagen, o incluso si no llega a cargar:

p {
  /* contraste alto: texto blanco sobre fondo negro */
  background-color: #000000;
  color: #ffffff;
}

span {
  /* contraste bajo: texto y fondo grises */
  background-color: #cccccc;
  color: #dddddd;
}

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Diario de alguien que empieza con HTML y CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p class="page-title">Blog</p> <nav class="blog-navigation"> <a href="index.html">Inicio</a> </nav> </header> <main> <article> <h1>Día 2. Quiero crear páginas web</h1> <p>Hoy pasé toda la tarde en internet. Leí sobre las ventajas de trabajar creando páginas web. Claro que los videos de gatitos me distrajeron bastante, pero algo sí me quedó:</p> <ul> <li>haces algo útil</li> <li>puedes trabajar a distancia</li> <li>conoces gente interesante</li> <li>ganas un buen sueldo</li> </ul> <p>Ahora tengo muchas más ganas de aprender.</p> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 24px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: "Verdana", sans-serif; text-align: center; } .avatar-container { text-align: center; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

ObjetivosRealizado

Agrega la clase partnership al bloque <aside>.
Crea una regla para .partnership y establece background-color: #4a87fa.
Agrega la imagen de fondo con background-image y el valor url("img/bg-partnership.svg").
Establece el color del texto con color: #ffffff.