Qué es css: 5 ejercicios para mejorar tus skills

HTML Css CSS Ejercicios Css

Aprender a programar es importante para saber desarrollar de la mejor manera posible sitios web. Además, practicar h tml&css permite asimilar conocimientos como para aspirar al rol de desarrollador web. Junto con JavaScript, estos dos forman un equipaje esencial para la creación de sitios web, principalmente en el front-end. En este artículo veremos cinco ejercicios para mejorar tus habilidades con CSS, sus propiedades y la integración con HTML, un compañero de confianza del lenguaje CSS.

¿Qué es CSS?

Cascading Style Sheets (CSS), es un lenguaje de markup útil para determinar el estilo y el diseño de las páginas web. Administrar el diseño, el color o la fuente de los distintos elementos dentro de una página web, sin alterar los contenidos (establecidos a través de HTML). En la jerga se les llama hojas de estilo.

En los ejercicios que veremos reportados habrá tanto HTML como CSS, pero no se requerirá ninguna tarea para ser resuelta en el lenguaje HTML. El consejo siempre es tratar de escribir los guiones de forma independiente y luego observar la solución.

La dificultad de los ejercicios será gradual, para que se comprendan los ejercicios de CSS en su máxima expresión.

¿Cómo establecer diferentes propiedades para el background en una declaración?
¿De qué manera la propiedad flex-basis especifica la longitud inicial de un elemento flex?
El uso de HTML y CSS crea un input con un prefijo visible no editable. Sugerencia: usa display:flex para crear un elemento contenedor. Quita el borde y el contorno del campo <input>. Aplícalos al elemento principal para que parezca un cuadro de input.
El uso de HTML y CSS crea un efecto animado que subraya un texto cuando el usuario pasa la flecha del mouse sobre él. Sugerencias: usa display: inline-block para que el subrayado se extienda solo a lo ancho del contenido del texto. Anima la transformación usando transform-origin: left y una transición adecuada.
¿Cómo configurar correctamente la propiedad de overflow para desplazarse con la página web?

Para centrar la práctica en escribir código CSS, se reportarán directamente en las soluciones algunos scripts HTML necesarios para el funcionamiento del ejercicio.

Resolviendo estos ejercicios, podrás familiarizarte con algunas de las propiedades más importantes de CSS y la gestión de hojas de estilo.

Soluciones:

Configurar y administrar el fondo de una página web es esencial, especialmente si hay muchos bloques de texto, títulos y elementos que deben ser fácilmente visibles según lo que se inserte en el fondo. Aquí se explica cómo establecer varias propiedades de fondo CSS:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Establecer diferentes propiedades de background en una sola declaración</title>
    <style>
        body {
            margin-top: 300px;
            background: #6699FF no-repeat center/80% url("https://aulab.it/img/logo-aulab-square-black.png");
            
        }
    </style>
</head>
<body>
    <p>Ejercicio 1</p>
</body>
</html>

Flexbox css te permite adaptarte de forma flexible y dinámica. Es una herramienta que permite estructurar explícitamente el diseño de una página web. Dominar sus propiedades es fundamental para gestionar las box dentro de un elemento contenedor de forma sencilla. La propiedad flex-basis establece el tamaño inicial de un elemento flex.

<!DOCTYPE html>
<html>
<head>
    <title> ¿Cómo especifica la propiedad flex-basis la longitud inicial de un elemento flex? </title>
    <style type="text/css">
        #aulab {
            width: 400px;
            height: 100px;
            border: 1px solid #3300FF;
            display: -webkit-flex;
            display: flex;
        }
        #aulab div {
            -webkit-flex-grow: 0;
            -webkit-flex-shrink: 0;
            -webkit-flex-basis: 40px;
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 40px;
        }
        #aulab div:nth-of-type(2) {
            -webkit-flex-basis: 80px;
            flex-basis: 80px;
        }
    </style>
</head>
<body>
    <p><strong>Ejercicio 2</strong></p>
    <div id="aulab">
        <div style="background-color:#00FF00;">HTML5</div>
        <div style="background-color:#3333FF;">CSS</div>
        <div style="background-color:#FF6600;">PHP</div>
        <div style="background-color:#FF3399;">SQL</div>
        <div style="background-color:#FFCC33;">MYSQL</div>
        <div style="background-color:#CCFFFF;">Proprietà flex CSS.</div>
    </body>
</html>

Necesitamos hacer que CSS y HTML funcionen juntos, pero concentrémonos en el código CSS. En este caso, debe operar en el input box y en el .prefix. El código HTML solo sirve para mostrar lo que necesitamos. A continuación se muestra primero el código HTML y luego el CSS. Para completar el ejercicio no es necesario escribir también el HTML.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Using HTML, CSS creates an input with a visual, non-editable prefix.</title>
</head>
<body>
    <div class="input-box">
        <span class="prefix">+39</span>
        <input type="phone number" placeholder="254 254 1111"/>
    </div>
</body>
</html>

CSS:

    <style>
        
        .input-box {
            display: flex;
            align-items: center;
            max-width: 300px;
            background: #CCC;
            border: 1px solid #a0a0a0;
            border-radius: 4px;
            padding-left: 0.5rem;
            overflow: hidden;
            font-family: sans-serif;
        }
        
        .input-box .prefix {
            font-weight: 300;
            font-size: 14px;
            color: #999;
        }
        
        .input-box input {
            flex-grow: 1;
            font-size: 14px;
            background: #fff;
            border: none;
            outline: none;
            padding: 0.5rem;
        }
        
        .input-box:focus-within {
            border-color: #777;
        }
    </style>

Aparentemente un ejercicio complejo, pero solo usando un contenedor y el selector hover, se usa para seleccionar elementos cuando se pasa el mouse sobre ellos.

HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Usando HTML y CSS se crea una animación de subrayado cuando el usuario pasa el mouse sobre
        el elemento </title>
    </head>
    <body>
        <strong>Preview:</strong><br>
        <p class="hover-underline-animation">Hover w3resource text to see the effect!</p>
    </body>
</html>

CSS:

        <style>
            
            .container{
                border: 1px solid #cccfdb;
                border-radius: 2px;
            }
            .hover-underline-animation {
                display: inline-block;
                position: relative;
                color: #0087ca;
            }
            
            .hover-underline-animation:after {
                content: '';
                position: absolute;
                width: 100%;
                transform: scaleX(0);
                height: 2px;
                bottom: 0;
                left: 0;
                background-color: #0087ca;
                transform-origin: bottom right;
                transition: transform 0.25s ease-out;
            }
            
            .hover-underline-animation:hover:after {
                transform: scaleX(1);
                transform-origin: bottom left;
            }
        </style>

La propriedad overflow CSS para moverse dentro de una página web (también conocido como desplazamiento) es tan simple como útil de usar.

<!DOCTYPE html>
<html>
<head>
    <title>Cómo configurar la propiedad overflow CSS para desplazarse en una página web</title>
    <style type="text/css">
        div.aulab {
            background-color: #CCFF00;
            width: 150px;
            height: 150px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <h2>Esercizio 5</h2>
    <div class="aulab">El lenguaje CSS se utiliza para dar un estilo personal a la página web que
        se está realizando. </div>
</body>
</html>

Hay tantas propiedades CSS. Difieren en utilidad, funcionalidad, según las personalizaciones que se desee implementar dentro de la página web. Estos ejercicios sirven para comprender gradualmente cómo personalizar mejor tu página web a través de ejercicios de coding online.

Practicar es importante en cualquier contexto que involucre la escritura de código, ya sea backend y frontend, a través de cualquier tipo de paradigma de programación.

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo