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

Curso de css básico desde cero

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

  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.

  2. 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

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

  4. 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
  5. 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.

  6. 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

    Atributo color en párrafos con CSS

    Capítulo 2

  7. 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.

  8. 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

    Propiedad font-size de CSS
  9. 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.

  10. 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

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

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

  13. 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.

  14. 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.

  15. Capítulo 3

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

  17. 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

    selectores css etiquetas
  18. 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.

  19. 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

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

  21. 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

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

  23. 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

    selectores css de id
  24. 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).

  25. 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

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

  27. 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

    selectores css de agrupación

    Capítulo 4

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

  29. Hoja de estilos CSS

    /* Este es un comentario de una sola línea */
  30. 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.

  31. Hoja de estilos CSS

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


    Capítulo 5

  32. 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.

  33. Color resultante


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

  35. Color resultante


  36. Voy a revisar los colores y a corregir los que estén mal.
    1. Es erróneo, tiene cuatro canales que corresponden al tipo rgba y no a rgb.

    2. Color resultante


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

    4. Color resultante


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

    6. Color resultante


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

    8. 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%).


    9. 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.

    10. 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).


    11. Este es un valor de color hexadecimal. Es correcto.

    12. Color resultante


    13. 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.

    14. Color resultante

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

  37. 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.
  38. Color resultante


  39. Un 75% opaco equivale a un canal alfa con valor 0.75, hsla(10, 50%, 50%, 0.75)
  40. 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.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.