Tag Archive Come funziona il CSS?

Cos’è il CSS?

Cos’è il CSS?

Il linguaggio CSS (Cascading Style Sheets-Fogli di stile a cascatanasce 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.

VEDIAMO UN PO’ DI CODICE

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}

RIASSUNTO

<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.