CSS responsive

/*reset CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

• ⏱️ 8 ore di corso registrato
• 🧩 Più di 50 algoritmi risolti passo passo
• 🎯 Livello base — da zero ad eroe
• 💻 100% online, fruibile quando vuoi

Prezzo€ 19,90

🅿️Acquista con PayPal — € 19,90

Cominciamo dal body, che rappresenta il corpo della pagina, a cui assegno un colore di sfondo #d8e8f5 che corrisponde all'azzurrino che vedete nell'esempio, un colore di testo #303030 che corrisponde al grigio scuro, font-family scelgo la famiglia di caratteri senza grazie Helvetica e Arial con dimensione di 14 pixel.

Dopo imposto i valori di default dei collegamenti ipertestuali (<a>), sia quando sono 'a riposo' sia quando si passa con il mouse sopra il collegamento (hover).

Faccio lo stesso per i tag dei titoli da h1 ad h6 a cui assegno le dimensioni in pixel.

Per il tag p imposto un'altezza della riga pari a 16 px, per facilitare la lettura dei testi.

Ad hr imposto un colore di linea #d8e8f5 che corrisponde ad un azzurro.

Al tag semantico figure dò una distanza dal margine dal basso di 10 pixel, per creare un pò di spazio tra le immagini e il testo.

Imposto un margine di 20 pixel per p, hr, h1, h2, h3, h4, h5, h6, ol, ul; è sempre un buon consiglio quello di non scrivere tutto attaccato ma creare appositi spazi vuoti.

/* Main style*/
body {
	background-color:#d8e8f5;
	color:#303030;
	font-family:Helvetica, Arial, sans-serif;
	font-size: 14px;
}
a 	{color: #3e75b9;text-decoration: none;}
a:hover {color: #416695;}

h1 	{font-size: 32px;}
h2 	{font-size: 28px;}
h3 	{font-size: 26px;}
h4 	{font-size: 21px;}
h5 	{font-size: 18px;}
h6 	{font-size: 16px;}

p {line-height:16px;}
hr {color:#d8e8f5}

figure {margin-bottom:10px;}
p, hr, h1, h2, h3, h4, h5, h6, ol, ul {margin-bottom: 20px;}

Sezione header

Imposto la sezione header con larghezza 920px, allineamento a sinistra, sfondo bianco e padding uguale a 20. Il padding è la distanza degli elementi attorno al box che li contiene, serve a creare il giusto spazio per dare armonia alla pagina.

/*** Header ***/
header 	{width: 920px;float:left;padding:20px;background:#fff;} 

Sezione nav

Adesso pensiamo alla barra di navigazione nav. Imposto la barra al 100% della larghezza del suo contenitore con allineamento a sinistra e sfondo azzurro (#197dd1).

Imposto per l'elenco <ul> sempre la disposizione a sinistra, ma con allineamento del testo centrale (text-align:center), senza punto elenco (list-style: none) e imposto overflow: hidden ovvero gli indico con questa proprietà che il contenuto eccedente deve essere ritagliato, cioè nascosto.

/*nav*/
nav		{width: 100%;float:left;background: #197dd1;}
nav ul 		{margin: 0px;float:left;width:100%; list-style: none;overflow:hidden;padding:10px;text-align:center;}
nav ul li 	{float: left;margin: 0px;position: relative;}
nav a 		{color: #fff; display: block;font-size:0.9em;padding: 14px 20px;text-transform:uppercase;}
nav a:hover {background:#d8e8f5;}

Struttura

Adesso inseriamo gli id assegnati ai tag div che compongono la struttura.

Al wrapper che è assegnato al primo tag div che apro sotto body, dò una larghezza di 960 px, sfondo bianco e margin sopra e sotto pari a 0 e a destra e sinistra auto, questa proprietà è importante per visualizzare la struttura di tutto il sito al centro della finestra del browser.

Al container dò una larghezza di 920 px perchè se notate sto dando un padding di 20 px, cioè una distanza dal box di 20px per ciascun lato. Infatti (920+20+20)px=960 px. Con float:left gli sto dicendo di posizionarsi sulla sinistra.

Al content, che rappresenta la parte a sinistra della pagina (sotto l'immagine grande), dò una larghezza di 620px lasciando così gli altri 300 per la sidebar, cioè per il menù laterale (meno un pò di padding) .

/* Struttura */
#wrapper 	{width: 960px;margin:0 auto;background:#fff;}
#container	{width: 920px;float:left;padding:20px;}
#content	{width: 620px;float:left;}

Post

Ai post assegno le seguenti proprietà: il padding lo metto a zero perché non mi interessa creare altro spazio. Al titolo dò un margine dal basso di 20 pixel e a entry-title a dò il grassetto e una distanza tra le lettere di -1, tanto per creare un effetto diverso.

.post 		     {padding:0px;}
.post .entry-title   {margin-bottom: 20px;}
.post .entry-title a {font-weight:bold;letter-spacing:-1px;}
.post .entry-content {line-height:24px;}

Barra laterale

Adesso pensiamo alla barra laterale, che indico usando il tag semantico aside. La larghezza che imposto è 270px e imposto chiaramente float a destra in quanto la barra laterale in genere và a destra.

Per i widget laterali imposto per ciascuna voce dell'elenco nessun punto elenco e una distanza tra le linee di 35 pixel.

/*barra laterale */
aside		{width: 270px;float:right;}
.widget li 	{line-height:35px;list-style-type:none}

Altre classi utili

Innanzitutto ho impostato un classe clear con la proprietà clear:both per ripulire da altri posizionamenti a destra o a sinistra.

Dopo ho creato anche una classe per le immagini di nome img in modo tale da avere la larghezza al 100%, altezza automatica e margine dal basso di 10 pixel, questo è importantissimo per visualizzarle scalate su tutti i dispositivi.

Poi ho impostato l'id sitemap che serve a visualizzare il menù in basso con una distanza dal bordo sinistro di 10px.

.clear 	    {clear:both;}
.img	    {width:100%;height:auto;margin-bottom:10px;}
#sitemap    {padding-left:10px;}

Footer

Il piede della pagina, indicato dal tag semantico footer, ha una larghezza di 920 pixel; infatti ho impostato il padding di 20 pixel. Il colore di sfondo è grigio scuro #676767, mentre il carattere è bianco.

Ho impostato i collegamenti con una dimensione di 14 pixel, di colore bianco e altezza della linea di 30 pixel per creare un effetto gradevole.

I collegamenti diventano azzurrini quando si passa sopra con il mouse.

footer {width:920px;float:left;padding:20px;background:#676767;color:#fff;}
footer a 	{font:14px;color:#fff; line-height:30px;}
footer a:hover 	{color:#d8e8f5;}
footer p 	{padding-left:10px;}

Media query

Continuiamo la creazione del nostro CSS responsive.
Per rendere una pagina web responsive uno dei possibili metodi è utilizzare le media queries. Le media queries sono nate con la versione 3 dei CSS e consentono di riconoscere il dispositivo con cui si sta navigando, sia per la risoluzione sia per l'orientamento.

Così basterà programmare la nostra pagina seguendo la sintassi:

@media (max-width: risoluzione) { ... }

Oppure:

@media (min-width: risoluzione) { ... }

Ed è possibile anche usare gli operatori logici, ad esempio:

@media (min-width: risoluzione) and  (max-width: risoluzione) { ... }

Dove risoluzione è il valore che di volta in volta vado a cambiare.

Per strutture che hanno una larghezza massima di 767 pixel allora imposto la mia pagina web con questi valori:

@media (max-width: 767px) {
body      {padding:10px;background:#fff;}
header    {width:100%;padding:20px 0 20px 0px;} 
nav	  {width:100%;float:left;}
#content  {width:100%;float:left;}
aside     {width:100%;float:right;padding:20px 0 0 0px;}
footer	  {width:100%;padding:20px 0 20px 0px;}
#wrapper      {width:100%;margin: 0 auto;}
#container    {width:100%;float:left;padding:20px 0 0 0;}
#site-title a {font-size:25px;margin-left:10px;}

}

Noterete che ho impostato molti valori al 100% per far in modo che prendono tutto lo schermo.

Per i dispositivi che hanno una risoluzione da 768px a 980px imposto questi valori:

@media (min-width: 768px) and (max-width: 980px) 	{
header 		{width:708px;float:left;padding:20px;} 
nav	        {width:100%;float:left;}
aside		{width:210px;float:right;}
#wrapper        {width:748px;margin: 0 auto;}
#container 	{width:708px;float:left;padding:20px;}
#content	{width:470px;float:left;}
footer		{width:708px;float:left;padding:20px;}
}

Per i dispositivi che hanno una risoluzione maggiore di 1200px imposto questi valori:

@media (min-width: 1200px) {
header 		{width:1130px;float:left;padding:20px;} 
nav		{width:100%;float:left;display:block;}
aside		{width:420px;float:right;}
footer		{width:1130px;float:left;padding:20px;}
#wrapper 	{width:1170px;margin:0 auto;}
#container	{width:1130px;float:left;padding:20px;}
#content        {width:670px;float:left;}
}

Chiaramente è possibile impostare anche altre risoluzioni, ma vi parlerò ancora delle media queries più avanti in dettaglio.

In questo modo avete creato il vostro CSS responsive. Salvatelo e provate, il risultato dovrà essere come questo:
https://www.codingcreativo.it/coding_creativo_modello/

Le immagini le potete prendere aprendo la pagina dal link sopra, cliccando con il tasto destro e scegliendo salva con nome. Per un corretto funzionamento dovete creare una sotto-cartella di nome images dove le andrete ad inserire, perché ho inserito il percorso nella pagina html.

In pratica dovreste avere questa situazione, dove dentro images inserirete le immagini.

Chiaramente questo vuole essere solo un semplice esempio di struttura realizzata con HTML5 e CSS3 responsive.

Se provate i collegamenti non porteranno a niente, programmate voi le altre pagine come meglio credete e realizzate i collegamenti.

Questo è solo un esempio di possibile realizzazione di un CSS responsive.

Alcuni link utili:

Form in html

Tag strong

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Tag img e attributo alt per la SEO

Paragrafi in html

Tabelle in html

Elenchi in html

📘 Vuoi approfondire l'argomento? Dai un'occhiata a 50 Algoritmi per imparare JavaScript — vedi su Amazon.

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web