Cos’è il CSS?
Il linguaggio CSS (Cascading Style Sheets-Fogli di stile a cascata) nasce nel 1993 per permettere di modificare l aspetto estetico delle pagine web. Viene combinato con l’HTML; è utilizzato per la formattazione e lo stile, ovvero i font, i colori, le dimensioni…
Nel 1998 è uscita la seconda versione, vennero fatte molte aggiunte; al momento sono arrivati alla versione tre.
Come si cambia il colore di sfondo:
<body bgcolor="#6495ED"> (IN HTML)body {background-color: #6495ED;} (IN CSS)
body {background-color: lightblue;}
si può utilizzare sia il codi RGB esadecimale, che il nome del colore.
Come si cambia il font:
h1{font-family: arial;}
per mettere in grassetto un testo si può utilizzare il seguente codice:
h1 {font-variant: small-caps;}
nel caso che il font non sia disponibili in grassetto, il testo sarà visualizzato in minuscolo.
La dimensione del file viene definita con il comando “font-size“:
h1 {font-size: 30px;}
Per allineare il testo si utilizza il comando “text-align“:
h1{text-align: right;}
Per aggiungere “effetti” al testo si utilizza il comando “text-decoration“:
h1 { text-decoration: underline; testo sottolineato con una riga sotto }
h2 { text-decoration: overline; testo con una linea sopra }
h3 { text-decoration: line-through;linea nel testo }
Per mettere un link si utilizza il comando "href" :
<link href="zapagiweb.it">
Per usare le liste invece bisogna usare il comando ” list-style-type”:
parola {list-style-type: circle;}
parola {list-style-type: square;}
parola {list-style-type: upper-roman;}
parola {list-style-type: lower-alpha}
<body>
<h1>CIAO!</h1>
<p>un normalissimo testo</p>
</body>
h1 { color: yellow; background-color: white; }
p { color: red; font-family: arial;}
Come possiamo vedere, con l’HTML abbiamo fatto una scritta, un testo, con il CSS siamo andati a modificare la parte visiva del testo (ovvero il colore, il colore del background e il font).
Ora che avete le conoscenze base, potete anche seguire le altre parti della guida, in cui vi spiegheremo cose più complicate, come ad esempio il 3d transforms.
