CSS Cascading Style Sheet

C'est un langage descritptif, qui indique au navigateur comment il doit afficher le code HTML d'une page web à l'écran. Plus exactement il permet de réécrire la présentation par défaut de chaque (ou de quelques) balise(s), que le navigateur utiliserait pour afficher la page sans CSS.

intégration

le css peut s'écrire directement dans les balises HTML via l'attribut style, de la façon suivante:

L'avantage de cette méthode est que vous n'avez pas besoin de sélecteur, car vous agissez sur le style de la balise sur lequel l'attribut style agit.
Mais cette manière de procéder n'est pas trés élégante, puisqu'elle parasite le code HTML et le rend moins lisible.
En général on factorise les déclarations css sous forme d'une suite de règles, précédée d'un sélecteur, qui permet de définir sur quelle(s) balise(s) vont agir les règles contenues entre { ... } qui lui succèdent

sélecteur{
    element-de-mise-en-forme₁ : valeur₁;
             ...
    element-de-mise-en-forme_n : valeur_n;
}

Ce type de déclaration (sélecteurs + règles) peut être intégré directement dans la partie méta de la page web entre les balises <style></style> ou (encore mieux!) être rangé dans un fichier texte à part. On fait alors référence à ce fichier, que nous nommerons style.css, de la manière suivante dans la partie head de la page web.

Sélecteur

Basiquement un sélecteur est une référence à élément précis de la page (attribut id), à un groupe d'élément précis de la page (attribut class) ou à un type d'élément de cette page (nom de balise). Dans les deux derniers cas, la déclaration s'appliquera à chaque fois que le groupe ou le type d'élément est rencontré par le navigateur.

Référence à un élément précis en le nommant par son id

code source de la page web:

<h1 id="titreGeneral">Mon Titre</h1>
<h1>Mon Titre2</h1>

code source du fichier CSS:

#titreGeneral{
font-size: 14px;
border: 1px solid red;
}

affichage dans le navigateur

MonTitre

MonTitre2

L'id doit être unique. C'est le # qui signifie qu'on fait référence à l'attribut id ayant pour valeur titreGeneral (la chaîne de caractères qui se trouve derrière le #)

Référence à un groupe d'éléments précis en le nommant par sa classe

code source de la page web:

<h1 class="titre">Mon Titre1</h1>
<h2 class="titre">Mon Titre2</h2>
<h1>Mon Titre sans classe</h1>

code source du fichier CSS:

.titre{
    color: green;
    margin-left: 50px;
    border-bottom: 1px solid green;
    border-left: 1px solid green;
}

affichage dans le navigateur

Mon Titre1

Mon Titre2

Mon Titre sans classe

C'est le . qui signifie qu'on fait référence à tous les éléments ayant l'attribut class à "titre" (la chaîne de caractères qui se trouve derrière le .)

Référence à un nom de type d'élément (balise html) en nommant cette balise:

code source de la page web:

<h1>Mon Titre1</h1>

code source du fichier CSS:

h1{
    color: pink;
    font-family: arial;
    border-left: 1px solid red;
    padding-left: 50px;
}

affichage dans le navigateur

Mon Titre

J'indique par cette déclaration CSS, que toutes les balises <h1> présentes dans la page web seront affichées par le navigateur avec ce style de mise en forme.