Esercitazione CSS

Gli esercizi marcati con uno o più asterischi sono facoltativi. Maggiore è il numero di asterischi, maggiore è la difficoltà dell'esercizio.

Differenza Inline-Internal-External

1. Aggiungere le opportune regole di stile inline al file semplice.html per ottenere i tre paragrafi di colore rosso ed il testo in enfasi di colore verde.
2. Come sopra ma con regole di stile internal.
3. Come prima ma con regole di stile external in un file "semplice.css".
4. Utilizzate lo stesso stile del punto precedente per il file semplice2.html.
5. ^(*) Fare in modo che il colore delle intestazioni di livello uno dei due file sopra siano di colore blu, che tutti i paragrafi di semplice.html siano di colore rosso e che la parola "zampe" in semplice2.html sia di colore verde, con il minimo numero di regole di stile.

Selettori ed uso di div e span

1. Con le opportune regole di stile impostare il colore dei link giallo normalmente e verde quando ci si va sopra con il mouse per il file semplice.html.
2. Colorate di tre colori diversi le parole in enfasi dell'ultimo paragrafo del file semplice2.html.
3. Utilizzare l'attributo class per fare in modo che solo il primo paragrafo del file semplice.html e la parola "matti" nell'intestazione siano di colore verde.
4. Colorare di blu la prima lettera dell'intestazione del file semplice.html.
5. ^(**) Rendere rossi i link in enfasi del file semplice.html quando si va sopra con il mouse.

Margini, bordo e sfondo

1. Impostare il bordo superiore di tutti i paragrafi dei due file semplice.html e semplice2.html di colore verde e tratteggiato.
2. Fare in modo che le parole in enfasi nel file semplice.html sembrino incassate nella pagina.
3. Aggiungere l'immagine pollo.gif come sfondo in alto in mezzo alla pagina del file semplice.html.
4. Aggiungere l'immagine pollo.gif come sfondo del primo paragrafo del file semplice.html. L'immagine deve essere posizionata in mezzo al paragrafo e ripetersi solo verticalmente.
5. Impostare lo sfondo dell'intestazione del file semplice.html di colore azzurro chiaro.
6. Impostare i margini sinistro e destro del file semplice.html in modo che il testo sia al centro della pagina ed occupi solo metà dello spazio disponibile.

Paolo Coppola
Last modified: 2002/04/09