Se hai iparato l'HTMl e ora di imparare i CSS.


Corso CSS. Impara a creare fogli di stili CSS

Guarda online l'intero corso del linguaggio CSS gratuitamente, ricorda che HTML è la base di uno sito web e fogli di stili CSS sono il loro stile. Hai bisogno di cambiare tipo di caratteri, loro colore o grandezza su un sito web? Vuoi riposizionare immagini o cambiare lo sfondo della tua pagina? Vuoi cambiare il colore del tuo menu di navigazione? Non sai come farlo e dove cercare codice per cambiare? Indipendente dal fatto se utilizzi Joomla o WP o stai creando uno semplice sito HTML o una Landing Page avrai sempre che fare con gli fogli di stili CSS.

Cosa impari dal corso?
Da questo corso imparerai cosa sono i fogli di stili CSS. Come posiamo collegare vari stili alla nostra pagina web, cosa sono selettori in css ,dove trovare il codice css del elemento che vuoi cambiare, come scegliere un coloro e come vengono indicati colori nel CSS, come aggiungere un bordo ad una aria scelta, attaccare il numero di telefono del tuo sito web che resti sempre visibile(per esempio un numero di telefono di pizzeria) anche se la pagina score. Vorrei anche dirti subito che linguaggio CSS con i vari stili applicati alla stessa pagina puo cambiarla in un modo da non credere agli occhi. E un strumento potentisimooooo! Tufati nel mondo del linguaggio CSS e vedrai come cambierà il tuo sito! Segui questo video corso CSS online complettamente gratis!

Il corso comprende 45 video tutorial.
7ore 45 minute del video per imparare linguaggio CSS

Ma che cosa c'è su questo corso?

Vediamo lezione per lezione i momenti principali del linguaggio CSS

Abbiamo 45 videotutorial che ci aiutano di scoprire CSS.

1.Installazione estensioni 02:23

In questa lezione introduttiva vediamo di adeguare il nostro browser di lavoro Mozilla Firefox, installando due estensioni di quali ne avremo bisogno durante il nostro corso. Sarano i nostri principali aiutanti durante lavoro. Con aiuto di queste estensioni riusciremo molto facilmente individuare la riga del codice CSS che dobbiamo correggere o sostituire.

2. I principi del funzionamento di CSS 08:48

Vediamo cosa sono questi Tag . Vediamo la struttura di una pagina web, com’è divisa , dove si trova la testa e il corpo della nostra pagina e come si chiama la pagina principale di qualsiasi sito. Non lo sapevi, che tutele pagine principali di qualsiasi sito si chiamano index.html? Okei! allora procediamo…

3.Come collegare foglio di stile e 3 seletori di base in CSS 22:02

Per scegliere qualche elemento dalla nostra pagina HTML per esempio un paragrafo o un titolo si utilizzano cosi detti Selettori. In questa lezione conosceremo i 3 principali selettori, vediamo la differenza fra di loro e creeremo il nostro primo foglio di stile . Provvederemo anche di collegarlo con la nostra pagina index.html che abbiamo creato nel corso precedente del linguaggio HTML.

4. Selettori del guppo 05:33

Abbiamo conosciuto i primi selettori e in questa lezione vedremo come posiamo attribuire per esempio lo stesso colore a un gruppo di paragrafi o liste e quindi conosceremo selettore del gruppo, che ci faciliterà la vita, e velocizzerà il nostro lavoro.

5.Selettori dei discendenti in CSS 08:33

Siamo tutti discendenti dei nostri genitori e nostri parenti, abbiamo nel carattere o nella statura o nel viso qualcosa dai nostri genitori, la stesa cos vale anche per i CSS, in questa lezione scopriremo cosa sono selettori dei discendenti e che cosa ereditano e da chi.

6.Pseudo-classi 08:11

Avete mai visto in una pagina web testo del link, per esempio, cambiare colore quando si passa con puntatore del mouse sopra? O immagine che cambia il suo aspetto quando avvicino puntatore o un link che abbiamo cliccato cambia il colore? Se si allora eravate curiosi come si fa! In questa lezione scopriremo cosi detti pseudo selettori che aiutano a realizzare questo effetto.

7. Famiglie di font(caratteri). 10:05

Anche i caratteri (font) che utilizziamo sulla nostra pagina web come le persone sono divise in famiglie. Vediamo di scoprire in questa lezione famiglie di font e come assegnarli a varie elementi della pagina web.

8. Dimensioni di font(caratteri) 8:05

Avete parecchie volte visto che altezza del font può variare. In questa lezione vediamo quali unita di misura sono utilizzati nei CSS, come sono diversi uno dal altro e come orientarsi fra varie unita di misura.

9.Grassetto e corsivo. 08:23

Dobbiamo evidenziare qualcosa sulla nostra pagina in modo che l’utente nota per esempio il nostro titolo di benvenuto o dello sconto subito a primo sguardo? Posiamo irrobustire il nostro teso con grassetto e farlo diventare più elegante con corsivo ma come faccio?!. Non c’è problema basta capire come funzionano questi cambiamenti in CSS.

10.Come sotolineare testo in CSS 05:39

Voi sottolineare qualcosa nel tuo articolo? Oppure cancellare con una riga qualche parola. Allora vediamo come possiamo realizzare questo con i mezzi del CSS.

11.Allineamento del testo5:56

Vorrei spostare testo a destra! No! Vorrei spostarlo a sinistra! No! Vorrei centrarlo, direi di si. Abbiamo sempre bisogno di mettere testo o una immagine in un punto preciso. Come fare? Lo scopriremo in questa lezione.

12.Altezza della riga e spazi fra le parole in CSS. Text-transform o come fare tutto in maiuscolo o minuscolo14:26

In questa lezione vediamo come posiamo gestire altezza della riga con il testo, modificare la distanza fra le parole e testo e come fare tutto il testo in maiuscolo o minuscolo.

13. Proprieta font e la scrittura abbreviata 07:34

Abbiamo imparato parecchie proprietà del CSS, e l’abbiamo scritto sempre in forma estesa. In questa lezione impareremo come posiamo accorciare il nostro codice, vediamo la sintassi abbreviata delle proprietà CSS .

14.Bordi 10:00

In questa lezione impareremo a creare bordi con aiuto di CSS, vediamo come impostare spessore , colore e tipo, posiamo mettere bordo solo sulla sinistra o solo in alto, dipende dalla situazione. E con bordi posiamo evidenziare qualsiasi elemento sulla nostra pagina.

15.Lavoriamo con liste in CSS 10:15

Abbiamo imparato come creare le liste con HTML e oggi impareremo come posiamo cambiare loro aspetto con fogli di stili CSS. Abbiamo imparato liste numerate e con aiuto dei CSS posiamo cambiare la tipologia di questi numeri, posiamo a posto dei numeri inserire delle immagini a e tanto altro.

16.Ereditarieta 09:04

In questa lezione impareremo un principio dei CSS che si chiama ereditarietà. Vediamo come si ereditano varie proprietà che abbiamo attribuito ad elementi genitori dai elementi figli .

17.Specificita e cascate in CSS 14:24

In questa lezione impareremo un agrumeto difficile come le cascate in CSS, in questo ci aiuterà plugin che abbiamo installato nella prima lezione firebug, Sara un può difficile ma non aver paura, importante di capire il concetto e come nella guida della machina solo la pratica ci dara la sicurezza nel argumento

"Hosting e dominio"

Registrare un dominio e acquistare un hosting

Come registrare un nome del dominio per il vostro progetto ( vedremo su un esempio reale come registrare un dominio con la compilazione di tutti i campi durante la registrazione); Che cose è un hosting, a cosa serve e quale scegliere per il vostro progetto. Come collegare il vostro dominio che avete acquistato nel passo precedente con il hosting.(senza questo passo il vostro sito semplicemente non funzionerà ). Come semplicemente e facilmente collegare una casella postale al vostro sito

18.Modello box, margin e padding. 16:40

Oggi impareremo cosi detto modello box nei CSS. La nostra pagina web posiamo immaginare come una matriosca russa prima va il bodi poi testa e corpo e al interno di questi ultimi elementi c’è né sono tanti altri sempre in forma di matriosca uno dentro altro. Fra di loro ci sono spazi e puoi lo spessore di questi matriosche e dobbiamo valutare tutti questi spazi per capire volume interno , più o meno è il concetto del box in CSS che vediamo in questa lezione.

19.Larghezza e altezza dei box, allignamento 04:35

In questa lezione vediamo come gestire altezza e larghezza di cosi detti scatole in CSS come posiamo allinearli sulla destar sinistra e al centro e tanto altro

20.Conflitti degli spazi in CSS19:21

Con il modello box abbiamo creato delle scatole ma non tutto cosi semplice ogni tanto queste scatole entrano in conflitto e non rispettano i spazzi tra di loro maggiormente riguarda la proprietà margin . Vediamo come evitare errori nel posizionamento e come gestire in maniera corretta la proprietà margin

21.Ellementi block e inline. 11:56

Come avete già capito dalle lezioni precedenti quasi tutti elementi sulla nostra pagina HTML fanno parte del modello box, ciò è rappresentano scatole separati, con i suoi spazi al interno e al esterno, ma ci sono anche dei elementi che non fanno parte del modello box, non creano spazzi intorno a se e non hanno spessore… in questa lezione scopriremo proprio questi nuovi elementi che si chiamano "inline"

22.Colore di sfondo e immagini in CSS. Introduzione. 24:29

E come avevo già detto, ancora nella nostra prima lezione, fogli di stile CSS sono il fascino della nostra pagina. Ma quale fascino può esistere senza colori e immagini. In questa lezione cominceremo a conoscere come posiamo cambiare lo sfondo del qualsiasi parte della nostra pagina non che de a pagina intera. E vediamo anche come posiamo inserire un’immagine come sfondo.

23.Come ripetere immagine di sfondo 03:45

In questa lezione vediamo come posiamo distribuire una piccola immagine anche 1x 1 millimetro per tuttala pagina o moltiplicare la stessa immagine solo in direzione o per aria desiderata.

24.Collocare un’immagine di sfondo nel punto desiderato con CSS. 07:06

Abbiamo imparato come posiamo utilizzare una immagine come lo sfondo. In questa lezione vediamo di mettere un’immagine come lo sfondo in un punto preciso della nostra pagina. In un punto dove la vogliamo vedere noi. Per esempio logo della nostra pizeria.

25.Incolare nel punto desiderato una immagine di sfodo 07:53

Abbiamo imparato come posizionare una immagine di sfondo nel punto desiderato che potrebbe essere anche numero di telefono della nostra attività. Ma con scorrere la pagina e l’immagine sparirà in alto! In questa lezione vediamo come incollarla nel punto preciso che resi sempre in vista.

26.Scrittura abbreviata del codice dello sfondo in CSS 04:00

Come abbiamo visto l’immagine di sfondo può avere parecchie proprietà nel CSS. E per non allungare il nostro codice di dismisura vediamo come posiamo descrivere tutti i parametri per lo sfondo in poche righe.

Se queste lezioni gratuite ti sono stati d'aiuto nel capire meglio linguaggio CSS puoi fare una donazione per sostenere il progetto.

Passando sulla pagina di PayPal scegli te stesso l'importo che vorresti donare e paga o con la carta di credito o con una prepagata acquisibile dal tabaccaio tipo “Poste italiane”.

Grazie!

"Sito web da zero"

Approfondiamo HTML e CSS

Questo corso riguarda creazione di un tipico HTML-sito web, il lavoro sul quale sarà un'ottima base per passare ai siti più sofisticati con utilizzo delle tecnologie PHP+MySQL oppure ai siti, creati con aiuto di varie CMS tipo Joomla e Wordpress.

27.Tabelle in CSS 16:15

In questa lezione vediamo come con i stili CSS, si possa cambiare aspetto finale della nostra tabella creata nel corso HTML. Gestire colori, bordi e i caratteri al interno della tabella e tutto questo tramite i fogli di stili CSS.

28.Css e forme parte119:32

In questa lezione vediamo di modificare la nostra pagina con le forme che abbiamo creato nel corso dedicato HTML, vediamo di restringere il blocco degli input, aggiungere bordi, allargare input e tante altre cose.

29. Css e forme parte2 12:18

Proseguiamo a conoscere le possibilità di gestione forme in CSS, come cambiare misura di un imput impostare una immagine come sfondo di questo imput, e cambiare bordo e sfondo al momento che imput diventi attivo.

30. Proproieta float introduzione 18:50

In questa lezione vediamo di scoprire elementi flottanti in Css, vale a dire proprietà “float” E una proprietà molto interessante che permette ai nostri elementi sulla pagina di uscire dal modello box, e galleggiare , posiamo dire cosi, sulla nostra pagine indecentemente, lasciare la riga recentemente occupata nel modello box per altri elementi, vorrei anche sottolineare che questa proprietà viene usata su tutte le pagine , quindi e molto importante!

31.Creare una semplice carcassa della pagina web con proprieta float di CSS 14:18

E dopo che abbiamo scoperto la proprietà float possiamo provare a creare con aiuto di questa proprietà una carcassa del a nostra pagina web con menu laterali con hieder futer e ovviamente con la parte centrale del content!

32.Particolarità dei elementi flotanti.11:55

Nel utilizzo dei elementi flottanti ci sono delle regole da seguire, dobbiamo sempre ricordare di indicare certi valori indispensabili per elementi con proprietà float . Per esempio larghezza e altezza e poi altri. In questa lezione scopriremo queste particolarità della proprietà float in css

33.Creare colonne ad altezza uguale con CSS 07:19

E dopo che abbiamo creato la carcassa della nostra pagina con tre colonne diversi come left e raight said e content, e anche futer vediamo come posiamo regolare il loro altezza che il futer non risale se contenuto di queste colonne e diverso tra di. Ci sono varie modi ma noi vediamo la soluzione ottimale al mio parere.

34.Introduzione nel posizionamento in CSS 09:51

Avete creato una pagina e volete posizionare il logo della vostra azienda in qualche posto preciso di questa pagina , e nel CSS esiste proprio una proprietà che si chiama “position” e che ci permette di posizionare qualsiasi elemento in qualsiasi parte della nostra pagina. In questa lezione vediamo di cambiare la nostra pagina per capire meglio questa proprietà “position”.

35.Posizionamento assoluto in css 12:16

E vediamo il primo valore della proprietà position come absolut, vediamo posizionamento assoluto, scopriremo le particolarità di questo valore e dove posiamo usarlo.

Se queste lezioni gratuite ti sono stati d'aiuto nel capire meglio linguaggio CSS puoi fare una donazione per sostenere il progetto.

Passando sulla pagina di PayPal scegli te stesso l'importo che vorresti donare e paga o con la carta di credito o con una prepagata acquisibile dal tabaccaio tipo “Poste italiane”.

Grazie!

36.Posizionamento relativo CSS 07:19

In questa lezione vediamo secondo valore della proprietà position come relativ, vediamo posizionamento relativo, scopriremo le particolarità di questo valore e dove posiamo usarlo.

37.Posizionemto fisso in CSS 10:22

In questa lezione vediamo terzo valore della proprietà position come fixed, vediamo posizionamento fisso, scopriremo le particolarità di questo valore e dove posiamo usarlo.

38.Z-index in CSS 06:19

Supponiamo che abbiamo 3-4 immagini nello stesso punto della nostra pagina come posiamo gestirli in senso di precedenza(andando in profondità della pagina)? Per questo scopo esiste la proprieta z-index, indicando il suo valore posiamo mettere un’immagine davanti ad altra oppure spostarla in fondo e metterla per ultima in senso della profondità della pagina web.

39.Creare colonne ad altezza uguale con CSS 03:12

In questa lezione vediamo come posiamo nascondere o render visibili elementi precedimene nascosti in CSS. Ci sono due possibilità di nascondere elemento sula nostra pagina. Il primo fare in modo che elemento viene nascosto ma nessun altro elemento può occupare il suo posto e altra possibilità sta nel fatto di nascondere completamente se anche nel codice sarà presente.

40.Larghezza massima e minima del sito web15:09

Nell’era dei monitor extra large e dei telefonini molto piccoli e con internet che ormai collega tutto con tutto dobbiamo pensare anche come vera visualizzata la nostra pagina web su questi dispositivi. Quindi il nostro sito o sara schiacciato di dismisura e non si capirà niente o allargato di dismisura e anche in questo caso perderà il suo fascino. In questa lezione vediamo come posiamo gestire larghezza del nostro sito web

"Css pratica"

Consolidiamo in paratica

In questo corso vediamo di consolidare le nozioni che avete acquisito nei corsi HTML+CSS in pratica.Nient altro aumenterà il livello delle nostre capacita nella creazione delle pagine web come buona porzione di pratica nella forma di creare templates reali.E proprio per questo, durante il corso noi insieme vedremo di trasformare un temlate grafico in un codice di una pagina web in stile web 2.0.

41.Browser07:18

A parte la larghezza dobbiamo anche testare il nostro sito su varie browser per essere sicuri che tutti elementi della nostra pagina web verranno visualizzati ugualmente su qualsiasi browser del utente.

42.Varie modi per collegare stili CSS 06:51

In questa lezione vediamo varie modi di collegare i fogli di stili CSS alla nostra pagina web. Uno sappiamo gia...

43.Ereditare proprietà che non si ereditano04:06

Sappiamo della ereditarietà nel CSS ma sappiamo anche che non tutte le proprietà si ereditano, in questa lezione scopriremo come ereditare proprietà che non si ereditano

44.Conclusione01:22

Abbiamo concluso anche il corso del CSS. E in questa lazione vorrei dare dei consigli(se anche nesuno ascolta consigli ma comunque io ci provo a darli).

 

Per csaricare materiale agiuntivo al corso
mandaci un messagio sulla nostra pagina Facebook