Curso de CSS3 básico - Soluciones de los ejercicios - Página 1

En esta página tienes numeradas todas las soluciones a los ejercicios realizados durante todo el curso. Si te quedan dudas o tienes un resultado diferente, déjame un comentario, ya que a veces, un ejercicio puede tener muchas posibles soluciones.

Soluciones de ejercicios css - Página 1

Capítulo 1

El resultado es que todos los elementos p de html se van a transformar en letra de color azul gracias a la propiedad css color aplicada a todos los párrafos en las etiquetas style.

Etiquetas HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ejercicios CSS</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

<body>
    <p>Párrafo 1.</p>
    <p>Párrafo 2.</p>
    <p>Párrafo 3.</p>
</body>
</html>

Resultado en el navegador

En este caso, solo le aplico a uno de los tres párrafos el estilo CSS gracias al atributo html style.

Etiquetas HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejercicios CSS</title>
</head>

<body>
    <p style="color: blue">Párrafo 1.</p>
    <p>Párrafo 2.</p>
    <p>Párrafo 3.</p>
</body>
</html>

Resultado en el navegador

Propiedad color de CSS aplicada a un párrafo html

El resultado es exactamente el mismo que en el primer ejercicio, solo que esta vez, la hoja html no tiene los estilos CSS directamente, si no que los carga de la página externa estilos.css o el nombre que le hayas puesto.

Etiquetas HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ejercicios CSS</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body>
    <p>Párrafo 1.</p>
    <p>Párrafo 2.</p>
    <p>Párrafo 3.</p>
</body>
</html>

Hoja de estilos CSS

p {
    color:red;
}

Resultado en el navegador

Capítulo 2

Simplemente debes aplicar a los elementos p la propiedad font-size con un valor de 25px. Si te fijas en la imagen, el párrafo es mucho más grande de lo que es por defecto en html.

Etiquetas HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sintaxis básica de CSS</title>
    <link href="estilos.css" rel="stylesheet" type="text/css"> 
</head>

<body>
    <h1>Programación fácil</h1>
    <h2>Curso de CSS desde cero</h2>
    <p>Os doy la bienvenida al curso de CSS.</p>
</body>
</html>

Hoja de estilos CSS

p {
    font-size:25px;
}

Resultado en el navegador

Este ejercicio se comploca un poco más, ya que al selector CSS p no le puedes aplicar atributos repetidos con valores distintos. Es aquí donde tienes que utilizar lo aprendido en este capítulo para hacer estilos personalizados. En este caso, se puede hacer de varias formas, pero lo voy a a hacer con lo que te he enseñado hasta ahora, una propiedad general font-size de 25px que afecta a todos los párrafos y otra aplicada directamente sobre un segundo párrafo para sobrescribir el valor de 25px por 15px solo en este.

Etiquetas HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sintaxis básica de CSS</title>
    <link href="estilos.css" rel="stylesheet" type="text/css"> 
</head>

<body>
    <h1>Programación fácil</h1>
    <h2>Curso de CSS desde cero</h2>
    <p>Os doy la bienvenida al curso de CSS.</p>
    <p style="font-size: 15px">Cualquier duda dejarme un comentario.</p>
</body>
</html>

Hoja de estilos CSS

p {
    font-size:25px;
}

Resultado en el navegador

Falso. El selector de h6 {font-size:14px;} es h6.

Verdadero. El selector de h6 {font-size:14px;} es h6.

Verdadero y falso a la vez. Realmente, font-size es la propiedad, 14px es el valor, eso sí, de la propiedad. Por eso, si no lo has pensado así y has contestado verdadero sin más, la puedes dar por buena, ya que es una respuesta rebuscada.

Si cometes tantos errores como el de este ejercicio, solo me quedaría pensar que estás utilizando un bloc de notas para escribir tus páginas. Hay muchos errores. El primero es el guión entre font y family. El segundo es family con "y", no con "i". El tercero es que no se le puede aplicar a esta propiedad de famila de fuente un tamaño en píxeles, ya que es para especificar eso, un tipo de fuente y no su tamaño, para eso está la propiedad font-size. El cuarto error es que falta la llave de cierre del estilo "}".
Debe quedarte así: p {font-family: arial;}. Da igual si el valor es arial, calibri, etc.
Por cierto, al igual que en html, el navegador ignora los saltos de línea (los de la etiqueta br no) y los espacios en blanco, por eso, es lo mismo escribir un estilo en 3 líneas o más como hago en los ejemplos de los capítulos o hacerlo así, todo en la misma línea. Personalmente me parece más organizado hacerlo como en los ejemplos de los capítulos y no en una sola línea, cuando tengas muchos estilos, te será más complicado de localizar algo de forma rápida y fácil.

Capítulo 3

En este caso, le he aplicado simplemente un color a cualquier etiqueta h2 que haya utilizando un selector de etiqueta h2.

Página HTML

<!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Selectores de CSS</title>
     <link href="estilos.css" rel="stylesheet" type="text/css">
 </head>

 <body>
     <h1>Don Quijote de la Mancha</h1>

     <h2>Fragmento para probar tus habilidades con CSS</h2>

     <p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
     le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
     Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
     y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
     durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
     Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
     cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
     tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
     que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
     serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
     el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
     el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
     que a mí me suceden, pues a ti no...</p>
 </body>
 </html>

Hoja de estilos CSS

h2 {
     color: tomato;
 }

Resultado en el navegador

He creado un selector de clase llamado titulo_verde y lo he llamado en una etiqueta h1 con el atributo class.
Si has continuado con el estilo aplicado del ejercicio anterior, no hay problema. Lo que quiero es que entiendas como hacer las cosas.

Página HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Selectores de CSS</title>
    <link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1 style="titulo_verde">Don Quijote de la Mancha</h1>

    <h2>Fragmento para probar tus habilidades con CSS</h2>

    <p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
    le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
    Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
    y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
    durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
    Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
    cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
    tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
    que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
    serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
    el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
    el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
    que a mí me suceden, pues a ti no...</p>
</body>
</html>

Hoja de estilos CSS

.titulo_verde {
    color: green;
    text-align: right;
 }

Resultado en el navegador

He creado un segundo estilo con selector de clase y he aplicado los dos a la vez sobre la propia etiqueta h1.

Página HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Selectores de CSS</title>
    <link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1 style="titulo_verde titulo_dimensiones">Don Quijote de la Mancha</h1>

    <h2>Fragmento para probar tus habilidades con CSS</h2>

    <p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
    le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
    Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
    y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
    durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
    Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
    cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
    tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
    que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
    serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
    el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
    el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
    que a mí me suceden, pues a ti no...</p>
</body>
</html>

Hoja de estilos CSS

.titulo_verde {
    color: green;
    text-align: right;

.titulo_dimensiones {
    font-size: 50px;
}

Resultado en el navegador

He creado un selector de id con el símbolo # delante del nombre y aplicándolo al párrafo con el atributo id.

Página HTML

<!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Selectores de CSS</title>
     <link href="estilos.css" rel="stylesheet" type="text/css">
 </head>

 <body>
     <h1>Don Quijote de la Mancha</h1>

     <h2>Fragmento para probar tus habilidades con CSS</h2>

     <p id="parrafo_rosa">Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
     le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
     Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
     y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
     durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
     Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
     cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
     tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
     que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
     serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
     el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
     el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
     que a mí me suceden, pues a ti no...</p>
 </body>
 </html>

Hoja de estilos CSS

#parrafo_rosa {
    color: pink;
 }

Resultado en el navegador

Con el selector universal, no tengo que añadir nada en la página html, el estilo de fuente de 75px se ha aplicado a todas las etiquetas que admiten esta propiedad (font-size).

Página HTML

<!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Selectores de CSS</title>
     <link href="estilos.css" rel="stylesheet" type="text/css">
 </head>

 <body>
     <h1>Don Quijote de la Mancha</h1>

     <h2>Fragmento para probar tus habilidades con CSS</h2>

     <p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
     le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
     Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
     y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
     durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
     Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
     cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
     tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
     que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
     serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
     el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
     el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
     que a mí me suceden, pues a ti no...</p>
 </body>
 </html>

Hoja de estilos CSS

* {
    font-size: 75px;
 }

Resultado en el navegador

Le he aplicado gracias al selector de agrupación una serie de propiedades a todos los elementos h1 y h2 de una sola vez.

Página HTML

<!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Selectores de CSS</title>
     <link href="estilos.css" rel="stylesheet" type="text/css">
 </head>

 <body>
     <h1>Don Quijote de la Mancha</h1>

     <h2>Fragmento para probar tus habilidades con CSS</h2>

     <p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
     le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
     Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
     y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
     durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
     Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
     cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
     tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
     que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
     serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
     el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
     el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
     que a mí me suceden, pues a ti no...</p>
 </body>
 </html>

Hoja de estilos CSS

h1, h2 {
    color: MediumSpringGreen;
    text-align: center;
    font-family: sans-serif;
 }

Resultado en el navegador

Capítulo 4

Un comentario de una sola línea simplemente tiene que tener la apertura y el cierre en la misma línea.

Hoja de estilos CSS

/* Este es un comentario de una sola línea */

Un comentario multilínea simplemente tiene que tener la apertura y el cierre en diferentes líneas. En este caso, puesto que envuelve al selector p, lo anula, ya que el navegador lo ignora. Está, pero no se utiliza.

Hoja de estilos CSS

h1 {
    font-align: left;
    color: red;
}

/* Este es un comentario multilínea
p {
    font-align: center;
}
*/

Capítulo 5

Los valores (0, 250, 114, 0.44) corresponden a rgba(0, 250, 114, 0.44), ya que rgb cuenta con 3 valores del 0 al 255 para los colores básicos y además contiene el canal alfa para la transparencia.

Color resultante

Los valores (0, 80%, 50%) corresponden a hsl(0, 80%, 50%), un número de grados del 0 al 360 seguido de dos porcentanjes.

Color resultante

Voy a revisar los colores y a corregir los que estén mal.

Es erróneo, tiene cuatro canales que corresponden al tipo rgba y no a rgb.

Color resultante

Es erróneo, tiene cuatro canales que corresponden al tipo rgba y no a rgb.

Color resultante

Es correcto. Tiene 3 canales que corresponden al tipo hsl.

Color resultante

Es incorrecto. Tiene 3 canales pero el primero debe ser sin porcentaje, es un número de grados.

Color resultante

En este caso, no debería aparecer ningún color, pero supongamos que quitamos el símbolo de porcentaje y lo dejamos así: hsl(10, 50%, 50%).

hsal es un valor erróneo de hsla y el valor del canal alfa va sin el símbolo de porcentajes. El resto es correcto.

Color resultante

En este caso, no debería aparecer ningún color, pero supongamos que corregimos el fallo y lo dejamos así: hsla(10, 50%, 50%, 0.9).

Este es un valor de color hexadecimal. Es correcto.

Color resultante

Este es un valor de color hexadecimal. Es incorrecto, ya que la letra g no existe en valores hexadecimales. Recuerda, del 0 al 9 y de la a hasta la f.

Color resultante

Supongamos que ponemos el valor de la g en el más cercano posible (f), este sería el resultado:

El nivel de opacidad es del 90%. El nivel de transparencia, es del 10%. Ambas cosas son lo mismo, ya que si un elemento es 90% opaco, quiere decir que es 10% transparente, son dos formas de decir lo mismo. Lo importante es que comprendas el concepto.

Color resultante

Un 75% opaco equivale a un canal alfa con valor 0.75, hsla(10, 50%, 50%, 0.75)

Color resultante

Páginas

Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.