Statistiche web Creare un semplice file CSS | Computer e Web

Creare un semplice file CSS

HTML, CSS, PHP e MYSQL sono i quattro linguaggi fondamentali per generare un sito web dinamico dove l’utente può interagire con un database. Questa guida si occupa della grafica CSS.

Dove inserire il codice CSS?

Il codice CSS va inserito all’interno dei tag <head></head> prima del contenuto rappresentato dai tag <body> e </body>.

Come abbiamo visto nella guida Creare File PHP per Connettersi al Database anche in questo caso non è necessario riportare il codice in ogni pagina bensì richiamare il file tramite una specifica istruzione.

Se in PHP richiamiamo il database tramite l’istruzione require, il file CSS viene richiamato mediante il tag <link rel=”stylesheet” href=”nomefile.css”>.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La mia pagina</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Contenuto della tua pagina -->
</body>
</html>

Esempio di file CSS semplice

Nella sua versione basica il file CSS non fa altro che richiamare i tag, utilizzati nel linguaggio html, racchiudendo tra parentesi graffe le varie istruzioni.

Se desiderate modificare un intestazione <h1>…<h6> basterà richiamarlo e in questo modo tutte le intestazioni di quel tipo avranno lo stesso stile come il colore.

/* Questo è un commento CSS */
/* Definizione dello stile per il body */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

/* Definizione dello stile per un titolo */
h1 {
    color: #333333;
}

/* Definizione dello stile per i paragrafi */
p {
    font-size: 16px;
    line-height: 1.5;
    color: #666666;
}

/* Definizione dello stile per un link */
a {
    color: #0066cc;
    text-decoration: none;
}

/* Stile per il link al passaggio del mouse */
a:hover {
    text-decoration: underline;
}

Le classi e gli ID

Diversamente se lo stile non dev’essere applicato a tutti i tag ma solamente ad alcuni si possono utilizzare le classi.

Una classe può essere applicata su più tag, definendola di volta in volta ed è sempre preceduta dal .

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La mia pagina</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Stile per la classe */
        .mio-stile {
            color: blue;
        }

        /* Stile per l'ID */
        #header {
            background-color: gray;
        }
    </style>
</head>
<body>
    <!-- Esempio di utilizzo della classe -->
    <p class="mio-stile">Questo testo sarà blu grazie alla classe "mio-stile".</p>

    <!-- Esempio di utilizzo dell'ID -->
    <div id="header">
        <h1>Questo è l'intestazione della pagina</h1>
    </div>
</body>
</html>

Un ID, come si può facilmente dedurre è associato a un singolo tag. Viene dichiarato precedendolo dal cancelletto #.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *