La presentazione

Ora partiamo da questo sito qui che contiene sia HTML sia CSS.

Un po' di stile con i font

Cambiamo gli stili del testo nel tag h1.

• Nel file main.css identifica il selettore h1 e inserisci la seguente regola all'interno delle graffe per cambiare il tipo di font:

font-family: Palatino, 'Palatino Linotype', serif;

• Ora cambiamone il colore con la proprietà color

  a. Possiamo usare il nome di un colore come color: red oppure usare altri nomi, prova con: AntiqueWhite, Chocolate, DarkOliveGreen, DeepSkyBlue

  b. Possiamo usare un codice esadecimale: #2e69a3, #d8dabe, #dabece

  c. Oppure la rappresentazione equivalente, ma in devimale: rgb(46,105,163), rgb(216,218,190)

Possiamo identificare gli elementi della pagina, oltre che con i nomi dei tag, anche con le classi CSS associate. Ad esempio, gran parte del contenuto della pagina è nel div con classe hero, il selettore corrispondente è .hero

• Costruiamo quindi una regola per cambiare il font in quel div

.hero {
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

Notate come questa regola si applica anche sui figli del div (cioè sugli elementi che contiene).

La dimensione del testo può essere modificata utilizzando la proprietà font-size che può essere espressa con diverse misure:

• pixel: punti dello schermo,
• rem: rappresenta la dimensione di default dei font nel browser. E' buona norma utilizzare questa misura in modo tale che gli elementi HTML scalino di dimensione in funzione del browser e delle dimensioni dello schermo. In molti browser, 1rem equivale a 16px
• em: rappresenta un valore che cambia in funzione della dimensione dell'elemento padre.

Ora procediamo ad alcune modifiche degli stili nel file main.css:

• Identifichiamo la regola per il selettore h2 che contiene il testo Sprout. e ingrandiamolo definendo la sua proprietà font-size pari a 56px.

• Ora raddoppiamo la dimensione del testo nel paragrafo, tag p. Identificate la regola per il selettore p e inserite il seguente testo per la proprietà font-size: font-size: 2rem;

• Infine rimane da definire la dimensione per il testo del tag a all'interno del div con classe hero. Identificate la regola per il selettore .hero a e cambiate la proprietà font-size affinchè valga una volta e un quarto la dimensione dell'elemento padre: font-size: 1.25em.

Immagini e stile

Alcune proprietà dei CSS ci permettono di lavorare con il background degli elementi della pagina.

• Aggiungiamo una immagine di sfondo alla pagina. All'interno della regola per il selettore .hero definiamo una immagine di background utilizzando l'url a cui recuperare tale risorsa. Scriviamo:

background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg");

• L'immagine sembra però troppo ingrandita, facciamo sì che sia riscalata in modo da diventare grande quanto l'area da coprire e non di più. Definiamo la proprietà background-size come segue: background-size: cover.

• Dal momento che, con l'immagine di sfondo, il testo non si riesce a vedere bene, ne cambiamo il colore aggiungendo la seguente specifica sempre nella regola per il selettore .hero: color: #ffffff. Di che colore diventa il testo?

Lo stile per un elemento particolare

Abbiamo imparato ad usare i selettori per definire lo stile dei tag HTML e dei tag a cui è stata associata una classe. Ora vediamo come identificare un elemento specifico, solo quello e solo uno, a cui applicare uno stile. In questo caso si utilizza l'attributo id che serve appunto a identificare univocamente uno e uno solo elemento della pagina.

• Aggiungiamo l'attributo id al tag p con l'indicazione del copyright della pagina:

<p id="footer">&copy; Mystwood Publishers Limited</p>

• Aggiungiamo una regola specifica per quell'elemento:

#footer {
}

• Ora specifichiamo la dimensione del testo per quell'elemento font-size: 0.75rem;