Benvenuto in questo nuovo articolo in cui ti spiegheremo cos’è il CSS, come
scriverli e come applicarli (sono più codici) in una pagina html.
Incominciamo con il dire che il termine CSS non è altro che l’abbreviazione di
Cascading Style Sheets, ovvero Fogli di Stile a Cascata, esso consente di creare
regole che consentono di specificare l’aspetto di un elemento.
Ad esempio, puoi scegliere il colore del testo, decidere il colore dello sfondo oppure decidere che tutti i paragrafi vengano scritti in rosso e con il carattere EXO.
Una regola CSS è composta da due parti, un Selettore e una Dichiarazione.
Il Selettore indica a quale elemento la regola viene applicata, mentre la
Dichiarazione è lo stile che viene applicato al selettore, a sua volta la dichiarazione è divisa in due elementi, una proprietà e un valore.
p {
font-family: ‘Exo’ ;
}
h1, h4, h6 {
font-family: Arial;
color: #fffff;
}
La Proprietà indica ciò che si vuole modificare nell’elemento, mentre i Valori specificano le impostazioni da utilizzare per le proprietà scelte.
Per poterlo applicare in una pagina html ci sono due metodi, ulilizzare un css
interno o utilizzare un css esterno.
Utilizzando il metodo interno, è sufficente inserire l’elemento <style> prima dell’elemento </head>
<!DOCTYPE html>
<html>
<head>
<style type=“text/css”>
body {
font-family: Arial;
background-color: rgb(255.255.255);)
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Ma utilizzando questo metodo ci sarà bisogno di riscriverlo per ogni pagina. Per ovviare a questo “problema” è sufficente creare un file “style.css” e posizionarlo dentro la cartella css nel nostro hosting, per permettere alla nostra pagina html di leggerlo, bisogna inserire l’elemento <link>, con il percorso del nostro file css, prima che venga chiuso <head>.
<!DOCTYPE html>
<html>
<head>
<link href=“css/style.css” type=“text/css” rel=“stylesheet”>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Dove href specifica il percorso del file, type il tipo di documento e rel la relazione tra pagina e CSS.
Bene, questo era il tutto, speriamo di averti aiutato nell’ampliare le tue conoscenze in campo informatico, precisamente su cosa sono i CSS e come sono strutturarli.
Comments