table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid black;
}

th {
  height: 50px;
  text-align: left;
}

td {
  height: 50px;
  vertical-align: bottom;
}

th, td {
  padding: 15px;
}

tr:hover {
  background-color: #f5f5f5;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Le tabelle, grazie a CSS, possono essere notevolmente migliorate, per esempio, conl’utilizzo dei border e delle sua varie proprietà. Oppure, possiamo impostare una larghezza e una altezza, grazie ai comandi width e height, o allineare il testo orizzontalmente o verticalmente rispettivamente grazie a text-align e vertcal-align. Possiamo impostare un’imbottitura con l’utilizzo del padding. In aggiunta a tutto questo, possiamo anche utilizzare il selettore :hover su <tr> per evidenziare le righe della tabella, mentre ci passiamo sopra con il mouse. Infine, possiamo colorare la tabella in modo zebrato, usando il selettore nth-child() e aggiungendo il background-color a tutte le righe della tabella pari o dispari.

ul.a {
  list-style-type: circle;
  list-style-position: outside;
}

ul.b {
  list-style-type: square;
  list-style-position: inside;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

ul {
  list-style-image: url('sqpurple.gif');
}

In HTML, ci sono due tipi principali di liste:

• elenchi non ordinati (<ul>) – gli elementi dell’elenco sono contrassegnati da punti elenco
• elenchi ordinati (<ol>) – gli elementi dell’elenco sono contrassegnati con numeri o lettere

Le proprietà dell’elenco CSS ti consentono di:

• Impostare diversi indicatori di voci di elenco per gli elenchi ordinati
• Impostare diversi indicatori di voci di elenco per gli elenchi non ordinati
• Impostare un’immagine come indicatore dell’elemento della lista

La list-style-type è la proprietà che specifica il tipo di marcatore dell’elemento della lista(circle, square, upper-roman, lower-alpha). Mentre, la list-style-image specifica un’immagine come indicatore dell’elemento della lista.

a:link {
  text-decoration: none;
  background-color: yellow;
}

a:visited {
  text-decoration: none;
  background-color: cyan;
}

a:hover {
  text-decoration: underline;
  background-color: lightgreen;
}

a:active {
  text-decoration: underline;
  background-color: hotpink;
}

Con CSS, i collegamenti possono essere in stile con qualsiasi proprietà CSS(per esempio color, font-family, background, etc.). Inoltre, i collegamenti possono essere designati in modo diverso a seconda dello stato in cui si trovano.

I quattro stati dei collegamenti sono:

• a:link – un link normale, non visitato
• a:visited – un link che l’utente ha visitato
• a:hover – un collegamento quando l’utente lo sostituisce
• a:active – un collegamento nel momento in cui viene fatto clic

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

h1 {
  font-size: 40px;
}

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

In CSS possiamo attribuire molte caratteristiche al font del testo. Una di queste è il font-style proprietà che viene principalmente utilizzata per specificare il testo:

• normale – Il testo è mostrato normalmente
• corsivo – Il testo è mostrato in corsivo
• oblique – Il testo è “pendente” (obliquo è molto simile al corsivo, ma meno supportato)

Oppure, grazie al font-size, possiamo attribuire una grandezza al testo. Infine, possiamo attribuirgli un “peso” grazie al font-weight.

h1 {
  color: green;
  letter-spacing: 3px;
  text-align: center;
  text-decoration: overline;
}

h2 {
  text-align: left;
  text-decoration: line-through;
  word-spacing: 10px;
}

h3 {
  text-align: right;
  text-decoration: underline;
}

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

In CSS possiamo attribuire varie caratteristiche al testo che abbiamo scritto in HTML. Possiamo attribuire un colore grazie alla proprietà color, che lo può specificare in vari modi:

• un nome di colore – come “rosso”
• un valore HEX – come “# ff0000”
• un valore RGB – come “rgb (255,0,0)”

Oppure, possiamo allinearlo grazie al text-align, questo può allineare a sinistra, a destra o centrato. Un’altra proprietà è la text-decoration che viene utilizzata per impostare decorazioni al testo. Possiamo anche rendere maiuscole o minuscole, lettere del testo grazie alla text-transformation. Infine, possiamo attribuire una spaziatura alle lettere o alle parole, grazie alle proprietà letter-spacing e word-spacing.

div {
  width: 500px;
  height: 100px;
}

Le proprietà height e width vengono utilizzate per impostare l’altezza e la larghezza di un elemento. Height e width può essere impostato su automatico, oppure essere specificato in valori di lunghezza , come px, cm, ecc. O in percentuale (%) del blocco contenitore.

div {
  padding-top: 50px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 40px;
}

Le padding sono proprietà CSS che vengono utilizzate per generare spazio attorno al contenuto di un elemento, all’interno di qualsiasi bordo definito. Con  CSS, hai il pieno controllo del padding. Ci sono proprietà per l’impostazione del padding per ciascun lato di un elemento (in alto = “top”, a destra = “right”, in basso = “bottom” e a sinistra = “left”).

p {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 50px;
  margin-bottom: 30px;
}

Le margin sono proprietà CSS che vengono utilizzate per creare lo spazio attorno agli elementi, al di fuori dei confini definiti. Con CSS, hai il pieno controllo sui margini. Ci sono proprietà per l’impostazione del margine per ciascun lato di un elemento (in alto = “top“, a destra = “right“, in basso = “bottom” e a sinistra = “left“).

p {
  border-style: solid;
  border-width: 5px;
  border-color: black;
}

h3 {
  border-top-style: dotted;
}

h5 {
  border-style: solid;
  border-radius: 5px;
}

Le border sono proprietà CSS che consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento. Questo grazie a “border-style“, “border-width“, “border-color“.  Possiamo anche definire queste caratteristiche a tratti “border-top-style“. Infine, abbiamo anche la possibilità di conferire rotondità agli angoli dei bordi “border-radius“.

body {
  background-image: url("NomeFile.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

La proprietà background-image è una funzione che permette di impostare come sfondo, una immagine che abbiamo scaricato da Internet. Quest’ultima, se troppo piccola, viene ripetuta fino a riempire tutto lo schermo. Quindi, se non si vuole questa caratteristica, possiamo inserire la linea “background-repeat: no-repeat”. Inoltre, possiamo definirne anche la posizione con “background-position: center”, possiamo anche immettere “right”, “left”, “up”, “bottom”.