Cos’è 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.

 

admin

Leave your message