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…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Un fattore importante e spesso sottovalutato per avere successo nel campo del web development è la capacità di fare buone domande e sapere dove trovare aiuto all’occorrenza. Quando Google non bast…
Le tecnologie legate all’intelligenza artificiale stanno facendo progressi rapidi, suscitando al tempo stesso non poche congetture. Da scenari distopici in stile 2001: Odissea nello spazio, passando…
Il settore tech è appannaggio esclusivo della popolazione maschile? Questo preconcetto è abbastanza diffuso, ma come stanno davvero le cose? Oggigiorno il mondo tech, non solo in Italia, è in gran …

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

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

Pagamento rateale

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

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

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/07/2023 al 31/12/2023.

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 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

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/07/2023 al 31/12/2023.

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.