Materiali
Incontro 3
Creiamo un foglio di stile esterno
Creiamo un foglio di stile esterno, cioè un file in formato .css che contiene le informazioni per il formato di ciascun elemento della nostra pagina (sfondo dello schermo, contenitore centrale, colore del testo, grandezza dei titoli ecc)
1) Clicchiamo sull'icona della tavolozza nel menu in alto
2) Si apre una finestra come quella in figura.
Clicchiamo sul simbolo in alto a sinistra e selezioniamo la prima voce:
@import
3) Clicchiamo sul pulsante Create Import At rule
4) Clicchiamo sul pulsante Export Stylesheet and switch to exported version
5) Ora si apre una finestra che ci chiede di scegliere il file .css
Non l'abbiamo ancora creato, quindi scriviamo direttamente il nome del file:
stile.css
e salviamo.
Possiamo dare qualsiasi nome al file, basta che l'estensione sia .css
6) Nello spazio di sinistra vediamo che compare il nome del nostro foglio di stile.
7) Se andiamo a vedere il codice HTML della pagina, cliccando su Source, vediamo che è comparsa la stringa:
<html>
<head>
<title>Titolo della pagina</title>
<link
rel="stylesheet" type="text/css"
href="stili.css">
</head>
<body>...
Ci indica che il nostro file, cioè la pagina html, è collegata
ad un foglio di stile che si chiama stili.css.
Sarà questo foglio di stile a decidere il formato dei titoli, dello
sfondo, dei blocchi di testo ecc.
Se creiamo una nuova pagina e vogliamo dare lo stesso formato ai testi
basta collegarla allo stesso foglio di stile.
