Durante la progettazione del tuo sito web potrebbe tornarti utile utilizzare un po' di C S S.

Probabilmente ne avrai già sentito parlare online.

Il C S S che cos'è semplicemente un linguaggio che gestisce il design e l'aspetto grafico ed estetico degli elementi che si trovano all'interno della tua pagina web e lavora in combinazione con gli in t M L.

Ad esempio, quando andiamo a creare un testo o un pulsante di base, la struttura di quell'elemento è fatta tramite codice H T M l.

Il C S S è un codice tramite il quale si può applicare il design e lo stile, come ad esempio il colore, il bordo, un effetto un'animazione, una transizione e quindi tutto quello che va ad aggiungersi sopra a livello puramente estetico.

Quando lavorate con elemento, potrebbe capitarvi che con alcuni diciamo che in pochi casi capita oggi perché elemento è molto flessibile, però in alcuni casi potrebbe capitare con alcuni che non riuscite ad eseguire un certo tipo di modifiche e dovete intervenire per forza via C S S.

In questo in questa lezione io vi mostrerò alcuni tool per generare C S s e e come inglobale attraverso gli elementi e i di elemento.

Allora innanzitutto andiamo in una pagina di elemento ad aggiungere dei sui quali voglio mostrarvi un test.

Allora andrò ad aggiungere un facciamo intanto una un contenitore con due colonne dove andrò a inserire qui un'immagine e magari sotto un semplice intestazione, giusto per farvi capire come si comporta e come si può aggiungere del c s s personalizzato ai agli e agli elementi con elemento allora carico.

Chiaramente è un'immagine.

Questa qui va più che bene.

Okay, facciamo una piena, okay, aggiorno la pagina la in front e fino a qui tutto okay.

È una semplice immagine con sotto un'intestazione un h due in questo caso allora, che cosa potrebbe accadere? Che magari volete applicare degli stili a questa immagine, ma con elemento non riuscite a raggiungere il vostro obiettivo e in questo caso dovete aggiungere del C S personalizzato online.

Ci sono diversi tool che vi consentono e vi aiutano a generare codice C S S, che poi semplicemente dovrete andare ad implementare dentro il vostro con elemento uno tra tutti è web cod punto tus, dove il suo funzionamento è molto semplice.

Scegliete che tipo dice se se volete generare ad esempio un background colore per generare un uno stile con un colore differente di sfondo e in automatico scegliete il colore e lui vi rilascia il codice esatto che dovete inserire per generare quel tipo di stile.

Poi c'è c s s generator punto com anche questo è un ottimo strumento online.

Poi c'è h t m l c s s javascript punto com troverete una voce che richiama alla voce del c s s per andare alla funzione esatta e poi ci c'è generator punto code punto io che vi aiuterà anche questo a generare varie tipologie sono tutti strumenti che funzionano allo stesso modo.

Um ad esempio in questo caso potete scegliere di generare un codice gradiente o qui un bordo tramite c s s e in automatico c'è una procedura guidata dove vi farà scegliere il tipo di colore.

Il tipo di bordo, ad esempio, che volete inserire in automatico.

Poi vi rilascia il codice c S s.

Una guida super utile è quella di v tre school punto com, dove sono dettate tutte le linee guida del c s s e di come va gestito e um utilizzato eventualmente anche come strumento di um di studio.

E qui c'è veramente qualsiasi cosa.

Come vedete colori, background, bordi, margini, spazzature di padding, testi, font c'è veramente qualsiasi cosa.

Quindi se volete um studiare, conoscere, apprendere un po' di più sul c s s sicuramente all'interno di questa suite potete imparare veramente veramente tanto.

Però tornando a noi um voglio mostrarvi degli esempi.

Allora, come funziona il il c s s con elemento allora innanzitutto potete andare.

Ad esempio voglio aprire questo questo qua ho sono sono entrato in questo sito.

Ho generato sostanzialmente un test per applicare una un'ombra a il testo a questo determinato testo.

Qui potete scegliere il Blair la distanza a in basso o a destra, quindi chiaramente in base al vostro stile però, giusto voglio farvi vedere il funzionamento.

Um a questo punto, una volta che avete configurato il vostro stile al di sotto alla voce C S S, vi comparirà questo codice.

Questo codice è un semplice codice text è una proprietà, una classe C S S che aggiungerà questo stile alla vostra intestazione di testo e andiamo a vedere come funziona.

Allora innanzitutto andiamo a copiare l'intero codice che è quello che genererà lo stile alla nostra intestazione e torniamo nella pagina di elemento mi sposto sul intestazione in questo caso avanzato vado in fondo e la prima cosa che devo fare è assegnare una classe c s s.

Una classe c s s è semplicemente un nome univoco, unico alla quale attribuisco questo stile.

Ad esempio posso chiamarla ombra? Okay e qui andiamo a inserire una classe c s s che definiamo noi quindi chiaramente in base anche alle vostre preferenze.

Come vi rimane? Più comodo, ovviamente, e deve essere un po' coerente con quello che andate a modificare in modo tale che in futuro vi ricorderete meglio il motivo per cui avete fatto e svolto questa funzione.

Poi eh per incollare eseguire il c s s potete spostarvi nell'ultima voce chiamata c s s personalizzato e andate ad incollare lo stile che avete generato nel sito di c S s.

A questo punto demo text potete eliminarlo perché fa riferimento a una classe che effettivamente non esiste era sempre era semplicemente di eh di di demo ad esempio e andrete ad aggiungere il nome della classe che avete precedentemente creato, anticipata sempre dal valore punto noi avevamo chiamato la classe ombra ed eccola qua in automatico viene già mostrata.

Faccio una giornata e voglio vedere come si comporta e come vedete lo stile c s s viene applicato alla mia intestato.

Questo chiaramente è un semplice esempio.

Però in questi ci sono tanti, tanti c s s da cui potete partire ed eventualmente modificare e generare chiaramente in base alle vostre preferenze.

Però, come vedete con un semplice comando c S s prima segnando la classe al di elemento e poi assegnando il parametro per generare quel determinato stile in pochissimi secondi siete in grado di assegnare uno stile di diverso diverso al vostro un'altra, cosa che potrebbe tornarvi utile.

Ad esempio, um potrebbe essere il bordo.

Vediamo un attimo torniamo sul sito.

Qua vediamo un attimo Border radius oppure border border radius chiaramente fa riferimento al ai bordi tondeggianti eh border C S s generator.

Eccolo qua.

Proviamo a generare un bordo di colore.

Vediamo un po' blu di questo colore largo cinque pixel.

Perfetto.

A questo punto questo è il codice che dovremmo andare a generare.

Faccio una breve parentesi tutti i codici c s s per essere mostrati correttamente devono essere anticipati dal nome della classe, queste parentesi e poi il codice all'interno.

Ora, per comodità andrò a copiare tutto questo parametro e lo andrò a applicare anche all'immagine per farvi vedere un altro esempio.

Quindi clicchiamo sul al quale vogliamo assegnare il nostro c s s andiamo su avanzato classi c s s quindi vado ad aggiungere una nuova classe.

Lo chiamerò bordo immagine.

Anzi no bordo blu, chiamiamolo bordo blu.

Okay, poi c s s personalizzato, quindi nell'ultima sezione vado ad incollare il mio la mia classe e lo stile.

Ovviamente qui devo cambiare il nome della classe e abbiamo chiamato testo blu, se non sbaglio bordo blu scusate.

Okay c s s bordo blu quindi l'andiamo a modificare chiaramente deve essere c corrispondente, altrimenti non funzionerebbe.

Bordo blu e poi torno nel tool dove ho generato.

Eccolo qua il codice dello stile con il bordo a cinque pixel di colore blu.

Mi sembra che non lo abbia preso.

Vediamo un attimo qui, saltiamo la pubblicità, okay? E andiamo ad incollare il c s s all'interno delle parentesi, mi raccomando all'interno delle parentesi, altrimenti poi non viene applicato.

Ed eccolo qua Border cinque pixel solid.

Quindi significa che in automatico viene assegnato un border, un bordo a tutta l'immagine di questo determinato colore che abbiamo generato tramite questo tour.

Ora vado in front per vedere se funziona correttamente ed eccola qua.

Quindi abbiamo visto che con dei semplici passaggi, anche non conoscendo il c s s perché per fortuna oggi tramite questi tool o tramite anche dei tool di intelligenza artificiale, siamo in grado di generare delle porzioni di codice c h, t, m l e c s s, quindi se vediamo che a un certo punto non riusciamo a raggiungere un certo tipo di design e di stile suter scusate su determinate sezioni o elementi e e possiamo ricorrere all'utilizzo di c s s personalizzato.

Quindi per fare un breve recap quando siamo all'interno del alla voce layout dobbiamo in primis assegnare una classe c s s unica non deve essere presente anche in altre sezioni, altrimenti potrebbe creare conflitto.

Poi mi sposto la tav della voce c s s personalizzato vado ad assegnare il valore punto con il nome della classe e all'interno delle parentesi vado ad inserire il mio parametro c s s che genererà un determinato stile