CSS 2 : SYNTAXE DU LANGAGE CSS

1. Sélecteur, Propriété et Valeur
Un SELECTEUR sert à déterminer à quels éléments du fichier .html ou à quel type d'éléments, le style choisi doit être appliqué.
Une PROPRIETE va permettre de cibler le critère de la modification du style (taille d'un texte, couleur du fond, police d'écriture, etc.).
Une VALEUR va préciser la propriétéen renseignant le comportement souhaité (couleur bleue, taille de 16px, etc.).

En terme de syntaxe, on remarque que :
  • L'ensemble des propriétés pour un sélecteur donné sont mis entre accolades ;
  • Chaque propriété est séparée de sa valeur par deux points ;
  • On place un point-virgule après avoir spécifié une valeur pour chacune des propriétés.
2. Notion de class
Quand on définit un style sur un sélecteur donné, cela signifie que tous les sélecteurs du fichier .html concerné par la feuille de style auront le style correspondant. Or, il peut arriver que l'on souhaite qu'un paragraphe, qu'une zone se comportent différement d'un autre.
Pour corriger cela, il est possible d'introduire des CLASS.

Prenons l'exemple de ce cours, pour chaque mot important nouvellement introduit, je choisi de le faire apparaître en "rouge avec ombrage". Ces mots étant en milieu de ligne, j'utilise pour cela une balise <span> </span> (pour séparer le mot à mettre en avant), et je lui applique une class = "defi".
    
p{
    background-color : blue ;
    color : white ;
}

.defi {
    color :  #971F06;
    text-shadow: 1px 1px;
    }
    
La class est définit dans le CSS, précédée d'un point, et elle est applicable autant de fois que l'on souhaite, sur des balises de nature différente.
3. Rôle spécifique des balises <div> </div> et <span> </span>
Comme définit ici, le langage CSS s'applique en cascade de balises successives. Les balises <div> </div> vont permettre de découper une page web en sous-partie de style différent.

Les balises <span> </span> vont quand à elles, permettre de faire du style à l'intérieur même des lignes du texte.

Fichier .html

                        
<!DOCTYPE html>
    <html>
        <head>
            <title>Page 1</title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="style1.css">
        </head>
        <body>
            <div>
                Ici, aucun style.
            </div>
            <div class="bleu">
                Ici, du texte en bleu.
                <div class="fond_jaune">
                    Ici, du <span class="defi">texte</span> en bleu sur fond jaune.
                </div>
            </div>
        </body>
    </html>
                        
                    

Fichier .css

                        
.fond_jaune{
    background-color : yellow ;
}

.bleu {
    color :  blue ;
}

.defi {
    color :  #971F06;
    text-shadow: 1px 1px;
}
                        
                    

Résultat dans le navigateur :