13 – HTML Styles CSS

CSS è l’acronimo di Cascading Style Sheets.
I CSS risparmiano molto lavoro.
Può controllare il layout di più pagine Web contemporaneamente.

Esempio

<div style="margin-top:30px; width:360px; height:130px ;padding:20px ;border-radius:10px; border:10px solid #EE872A;font-size:120%;">
 <h1>CSS = Stile e Colore</h1>
 <div style="letter-spacing:12px; font-size:15px; position:relative; left:25px; top:10px;">Manipolazione del testo</div>
 <div style="color:#40B3DF; letter-spacing:12px; font-size:15px; position:relative;left:25px; top:20px;">Colore,
 <span style="background-color:#B4009E;color:#ffffff;">&nbsp;SPAN</span></div>
 </div>
</div>

Cos’è il CSS?

Cascading Style Sheets (CSS) viene utilizzato per formattare il layout di una pagina web.
Con i CSS, puoi controllare il colore, il carattere, la dimensione del testo, la spaziatura tra gli elementi, come gli elementi sono posizionati e disposti, quali immagini di sfondo o colori di sfondo devono essere utilizzati, diversi display per diversi dispositivi e dimensioni dello schermo e molto di piu!

Suggerimento: la parola cascata significa che uno stile applicato a un elemento genitore verrà applicato anche a tutti gli elementi figli all’interno del genitore.
Quindi, se imposti il ​​colore del corpo del testo su “verde”, anche tutte le intestazioni, i paragrafi e gli altri elementi di testo all’interno del corpo avranno lo stesso colore (a meno che tu non specifichi qualcos’altro)!


Usando i CSS

I CSS possono essere aggiunti ai documenti HTML in 3 modi:

  • Inline – utilizzando l’ style attributo all’interno degli elementi HTML
  • Interno – utilizzando un <style> elemento nella <head> sezione
  • Esterno : utilizzando un <link> elemento per collegarsi a un file CSS esterno

Il modo più comune per aggiungere CSS è mantenere gli stili in file CSS esterni.
Tuttavia, in questo corso utilizzeremo gli stili in linea e interni, perché è più facile da dimostrare e più facile da provare da soli.


CSS in linea

Un CSS in linea viene utilizzato per applicare uno stile univoco a un singolo elemento HTML.
Un CSS inline utilizza l’ style attributo di un elemento HTML.
L’esempio seguente imposta il colore del testo dell’elemento <h1> su arancione e il colore del testo dell’elemento <p> su bianco:

Esempio

<h1 style="color:orange;">Questo titolo e arancione</h1>
<p style="color:white;">Questo paragrafo è bianco.</p> 

CSS interno

Un CSS interno viene utilizzato per definire uno stile per una singola pagina HTML.
Un CSS interno è definito nella <head> sezione di una pagina HTML, all’interno di un <style> elemento.
L’esempio seguente imposta il colore del testo di TUTTI gli <h1> elementi (su quella pagina) su verde e il colore del testo di TUTTI gli <p> elementi su viola. Inoltre, la pagina verrà visualizzata con un colore di sfondo “grigio”: 

Esempio

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: grey;}
h1   {color: green;}
p    {color: violet;}
</style>
</head>
<body>

<h1>Questo è il Titolo</h1>
<p>Questo è il paragrafo.</p>

</body>
</html> 

CSS esterno

Un foglio di stile esterno viene utilizzato per definire lo stile per molte pagine HTML.
Per utilizzare un foglio di stile esterno, aggiungi un link ad esso nella <head> sezione di ogni pagina HTML:

Esempio

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="stile.css">
</head>
<body>

<h1>Questo è un Titolo</h1>
<p>Questo è un paragrafo.</p>

</body>
</html> 

Il foglio di stile esterno può essere scritto in qualsiasi editor di testo.
Il file non deve contenere alcun codice HTML e deve essere salvato con estensione .css.
Ecco come appare il filestyles.css“:

Esempio “stili.css”:

body {
  background-color: black;
}
h1 {
  color: lime;
}
p {
  color: green;
}

Consiglio: Con un foglio di stile esterno, puoi cambiare l’aspetto di un intero sito web, cambiando un file!


Colori, caratteri e dimensioni CSS

Qui, dimostreremo alcune proprietà CSS comunemente usate.
Imparerai di più su di loro in seguito.
La proprietà CSS color definisce il colore del testo da utilizzare.
La proprietà CSS font-family definisce il carattere da utilizzare.
La proprietà CSS font-size definisce la dimensione del testo da utilizzare.

Esempio

Uso delle proprietà CSS color, font-family e font-size:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 280%;
}
p {
  color: orange;
  font-family: courier;
  font-size: 170%;
}
</style>
</head>
<body>

<h1>Questo è un Titolo</h1>
<p>Questo è un paragrafo.</p>

</body>
</html> 

Bordo CSS

La proprietà CSS border definisce un bordo attorno a un elemento HTML.
Suggerimento: puoi definire un bordo per quasi tutti gli elementi HTML.

Esempio

Uso della proprietà bordo CSS

p {
  border: 4px solid orange;
} 

Imbottitura CSS

La proprietà CSS padding definisce un riempimento (spazio) tra il testo e il bordo.

Esempio

Uso delle proprietà CSS border e padding:

p {
  border: 3px solid lime;
  padding: 28px;
}

Margine CSS

La proprietà CSS margin definisce un margine (spazio) all’esterno del bordo.

Esempio

Uso delle proprietà del bordo e del margine CSS:

p {
  border: 3px solid green;
  margin: 48px;
}

Collegamento a CSS esterno

È possibile fare riferimento ai fogli di stile esterni con un URL completo o con un percorso relativo alla pagina Web corrente.

Esempio

Questo esempio utilizza un URL completo per collegarsi a un foglio di stile:

<link rel="stylesheet" href="https://www.tuosito.it/html/styles.css"> 

Esempio

Questo esempio si collega a un foglio di stile che si trova nella cartella html

 <link rel="stylesheet" href="/html/styles.css"> 

Esempio

Questo esempio si collega a un foglio di stile che si trova nella stessa cartella della pagina html:

 <link rel="stylesheet" href="styles.css"> 

Riassunto capitolo

  • Usa l’ style attributo HTML per lo stile incorporato
  • Usa l’ <style> elemento HTML per definire il CSS interno
  • Utilizza l’elemento HTML <link> per fare riferimento a un file CSS esterno
  • Usa l’elemento HTML <head> per memorizzare gli elementi <style> e <link>
  • Usa la color proprietà CSS per i colori del testo
  • Usa la font-family proprietà CSS per i caratteri di testo
  • Usa la font-size proprietà CSS per le dimensioni del testo
  • Usa la border proprietà CSS per i bordi
  • Usa la padding proprietà CSS per lo spazio all’interno del bordo
  • Usa la margin proprietà CSS per lo spazio fuori dal bordo

Puoi imparare di più si i CSS seguendo il corso dedicato al linguaggio di stile CSS.


Tag di stile HTML

TagDescrizione
<style>Definisce le informazioni di stile per un documento HTML
<link>Definisce un collegamento tra un documento e una risorsa esterna
Tabella Tag di stile HTML

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.