CONTATTACI

Blog

5 esercizi CSS per skillarti

Imparare a programmare è un processo necessario per saper sviluppare siti web. Inoltre, esercitarsi su HTML e CSS permette di assimilare una conoscenza tale da ambire al ruolo di web developer. Insieme a JavaScript questi due formano un bagaglio imprescindibile per creare siti web, prevalentemente lato front-end. In questo articolo vedremo cinque esercizi per migliorare le proprie abilità con CSS, le sue proprietà e l’integrazione con HTML, compagno fidato del linguaggio CSS.

CSS, cos’è?

Cascading Style Sheets (CSS), si tratta di un linguaggio di markup utile per determinate lo stile e il design di pagine web. Gestire il layout, il colore o il font dei vari elementi all’interno di una pagina web, senza alterarne i contenuti (settati tramite HTML). In gergo vengono chiamati fogli stile.

Negli esercizi che vedremo riportati ci sarà sia HTML, che CSS, ma non sarà richiesto alcun compito da risolvere nel linguaggio HTML. Il consiglio è sempre quello di cercare di scrivere in maniera autonoma gli script e poi osservare la soluzione.

La difficoltà degli esercizi sarà graduale, in modo tale da comprendere gli esercizi CSS al pieno delle loro finalità.

  1. Come settare differenti proprietà per il background in una dichiarazione?
  2. In che modo la proprietà flex-basis specifica la lunghezza iniziale di un elemento flex?
  3. Usando HTML e CSS crea un input con un prefisso visibile, non editabile. Indizio: usa display:flex per creare un elemento contenitore. Rimuovi il bordo e il contorno dal campo <input>. Applicali all’elemento genitore per farlo sembrare una casella di input.
  4. Usando HTML e CSS crea un effetto animato che sottolinea una testo quando l’utente ci passa sopra con la freccia del mouse. Indizi: utilizza display: inline-block per fare in modo che la sottolineatura si estenda solo per la larghezza del contenuto del testo. Anima la trasformazione usando transform-origin: left e una transizione appropriata. 
  5. Come impostare correttamente la proprietà di overflow per scorrere la pagina web?

 

Per focalizzare la pratica sulla scrittura di codice CSS alcuni script HTML necessari al funzionamento dell’esercizio verranno riportati direttamente nelle soluzioni.

Risolvendo questi esercizi potrai prendere una maggiore dimestichezza con alcuni delle più importanti proprietà di CSS e di gestione dei fogli stile.

Soluzioni:

 

  1. Settare e gestire lo sfondo di una pagina web è fondamentale, specialmente se ci sono tanti blocchi di testo, titoli ed elementi che devono essere facilmente visibili a seconda di quello che è inserito nello sfondo. Ecco come settare più proprietà del background CSS: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Impostare differenti proprietà background in una sola dichiarazione</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>Esercizio 1</p>
</body>
</html>

 

  1. Flexbox CSS permette di adattare in modo flessibile e dinamico. È uno strumento che permette di strutturare esplicitamente il layout in una pagina web. Padroneggiarne le proprietà è fondamentale per gestire in maniera semplice i box all’interno di un elemento contenitore. La proprietà flex-basis imposta la grandezza iniziale di un elemento flex.
<!DOCTYPE html>
<html>
<head>
    <title> Come la proprietà flex-basis specifica la lunghezza iniziale di 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>Esecizio 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>
    

 

  1. Bisogna far collaborare CSS e HTML, ma focalizziamoci sul codice CSS. In questo caso bisogna operare sull’input box e sul suo .prefix. Il codice HTML serve solo a mostrare quello che ci serve. Di seguito prima il codice HTML e poi il CSS. Per completare l’esercizio non è necessario scrivere anche l’HMTL.
<!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>

33.  

 

  1. Apparentemente un esercizio complesso, ma basta utilizzare un container e il selettore hover, utilizzato per selezionare elementi quando il mouse viene passato sopra questi.

HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Usando HTML e CSS crea un’animazione sottolineatura quando l’utente passa il mouse sopra
        l’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>

 

  1. La proprietà overflow CSS per muoversi all’interno di una pagina web (aka scrollare) è molto semplice quanto utile da utilizzare.
<!DOCTYPE html>
<html>
<head>
    <title>Come settare la proprietà overflow CSS per scrollare in una pagina 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">Il linguaggio CSS è utilizzato per dare uno stile personale alla pagina web che
        si sta realizzando. </div>
</body>
</html>

 

Le proprietà CSS sono davvero tante. Si diversificano per utilità, funzionalità, a seconda di quelle che sono le personalizzazioni che si vogliono implementare all’interno della pagina web. Questi esercizi servono a capire, gradualmente, come poter personalizzare al meglio la propria pagina web tramite esercizi di coding online.

Esercitarsi è importante in qualsiasi contesto che riguarda la scrittura di codice, che sia front end o back end, attraverso qualsiasi tipo di paradigma programmazione.

Se vuoi approfondire meglio il CSS consulta la nostra guida HTML e CSS in italiano.

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.