La base du CSS

Pour comprendre comment le CSS fonctionne, nous allons tout d'abord voir comment lier le HTML au CSS.
Tout se passe entre les balises head de votre document HTML. Nous allons créer un lien (link) en précisant sa nature :

Précisez le type de document que cible le lien grace à l'attribut type, pour le CSS il s'agira forcément de text/css. Le rel n'est pas obligatoire, il permet parfois des liens avec le javascript. L'attribut media précise pour quel support le CSS va s'appliquer. En effet il peut y avoir plusieurs CSS en fonction des medias :

- screen : écran, il s'agit du plus utilisé, c'est ce qui apparait à l'écran de votre ordinateur
- all : convient pour tous les périphériques
- aural : destiné aux synthétiseurs vocaux
- braille : destiné aux appareil braille tactiles
- embossed : conçu pour les imprimantes braille
- handheld : Destiné aux appareils portatifs (typiquement petit écran monochrome, bande passante limitée).
- print : impression, il s'agit du style que prendra une page Internet si elle est imprimée. Il est bien souvent nécessaire d'alléger le style de la page, surtout si votre site Internet est très coloré.
- tty : permet d'adapter votre site Internet aux téléphones portables et petits terminaux de ce style.
- tv : permet d'adapter votre site Internet aux télévisions
- projection : destiné aux appareil de projection, transparents etc...

L'attribut href, comme pour le lien (a) permet de pointer vers le fichier CSS que nous allons créer par la suite. Ici il se trouverait dans le dossier "styles" et porterait le nom "design".

Création du fichier CSS
Créez un dossier nommé "styles" à la racine de votre site.
Ouvrez un nouveau document sous Notepad++ (ctrl+N) et enregistrez-le d'entrée (une bonne habitude à prendre). Ciblez le dossier "styles" que nous venons de créer et entrez le nom de votre fichier suivi de l'extension CSS : "design.css". Validez.

Présentation du code
Votre document CSS est prêt à être complété, et déjà lié à notre page HTML. Désormais, libre à vous de reprendre sur une nouvelle page HTML ou de continuer à la suite de la page que nous maltraitons depuis le début du cours :p !
Quoiqu'il en soit je vais vous fournir un code CSS afin de vous familiariser avec la présentation (qu'il vous appartiendra d'arranger en fonction de vos envies). Voici un aperçu d'un code CSS :

Nous allons détailler ce code ensemble.

Globalement la structure est toujours la même :
- Un élément ciblé (sélecteur) - des déclarations encadrées par des accolades

Vous voyez ici que l'élément ciblé (body) est de couleur bleu (sur l'image) et seul ! Il s'agit donc d'un ciblage de balise. Cela veut dire que la cible de ce code est simplement la balise body dans notre code HTML. Toutes les balises peuvent être ciblée de la sorte.

Vient ensuite l'ouverture de l'accolade qui signifie que l'on va maintenant donner des déclarations à cette balise, c'est à dire appliquer des styles. Une déclaration, comme un attribut, possède une propriété (appelée "nom" pour l'attribut) et une valeur. Prenez par exemple la deuxième déclaration : "color: #222;", ici la propriété est color la valeur est #222.

- Une directive se termine par un ";" (point-virgule) (sauf si c'est la dernière de la liste)
- Les accolades à l'image des chevrons ("<" et ">") vont toujours par paire, une pour ouvrir les déclarations, une pour les clore.
- Entre le nom et la valeur d'une directive il y a toujours présence du ":" (deux-points)

La bonne habitude à garder, organiser vos codes, je le répète encore et toujours, une bonne présentation c'est du temps et de la clarté de gagné.
Ainsi je vous présenterai ici et sur le forum de Never Utopia des codes qui n'auront pas toujours la même présentation mais qui auront toujours la même valeur. Apprenez à organiser en fonction de vos affinités.

Pour le moment je ne détaille pas le contenu des déclarations, cela viendra par la suite, poco a poco (petit à petit pour les francophones :p)
Bien, ici vous remarquerez immédiatement, puisque vous êtes de bons élèves, que l'élément ciblé n'est pas le même, de par la forme et la couleur.
En effet celui-ci est précédé d'un point et de couleur rouge. Il s'agit d'un ciblage de classe. Cela veut dire que le code CSS cible toutes les balises qui possèdent comme nom de classe "images1".

Et là ! C'est le drame ! Nous n'avons pas vu ça précédemment !
Qu'est-ce qu'une classe ?
Alors, voici un morceau de code qui possède cette classe ciblée :

L'attribut class permet d'attribuer une classe à une balise, ou plus précisément à des éléments précis. La valeur de celle-ci ne doit surtout pas posséder d'espace et il est judicieux d'éviter les majuscules et les caractères de ponctuation. Ainsi "images1" respecte ces critères. Plusieurs éléments peuvent posséder cette même classe !

Exemple
Recopiez ce code HTML sur votre document :

Recopiez maintenant ce code dans votre feuille de style CSS :

Comme vous pouvez le voir, deux éléments possèdent la même classe nommée "texte_important". Ces deux éléments HTML vont subir des modifications via le CSS qui sont les suivantes : font-weight (poids du texte) vaut bold (gras), text-decoration (decoration du texte) vaut underline overline (souligné et surligné).
En ouvrant ou en rafraichissant votre page HTML sous votre navigateur, vous verrez que les deux éléments changent d'apparence en même temps.
Petit exercice simple, enlevez le mot overline de la deuxième déclaration, puis actualisez la page sous votre navigateur, vous verrez que tout s'actualise ensemble.

Ici il ne s'agit que d'exemple, mais imaginez que vous ayez un site Internet d'une trentaine de pages avec cinquante mots importants... voyez le temps gagné en comparaison à l'utilisation que nous avions faite de l'attribut style !
Bref, l'utilité d'une feuille de style n'est plus à prouver, mais nous le confirmerons encore plus par la suite.

Cette fois-ci nous n'avons pas un point, mais un dièse devant cet élément bleu clair. Cela ne s'appelle plus une classe mais un identifiant. Et cela va aussi se ressentir sur le code HTML ainsi que son utilisation !
En effet un code HTML utilisant un identifiant aura cette forme là :

En concervant les informations CSS telles qu'elles sont, notre logo s'afficherait en haut à gauche de l'écran, à 10px du bord supérieur, et 5px du bord gauche.
Je vous invite à faire les manipulations nécessaire pour tester cela.

Un identifiant est unique !! Contrairement à la class, celui-ci ne doit apparaitre dans le code HTML qu'une seule et unique fois.

À retenir
- Un identifiant (id) est unique, il apparait dans le CSS précédé d'un dièse (#) et de couleur bleue
- Une classe (class) peut être attribué à n'importe quelle balise, elle apparait dans le CSS précédé d'un point et de couleur rouge
- Le CSS peut aussi agir sur une balise, il faut simplement signaler le nom de la balise dans le code. Il apparait alors en bleu.

Prochain cours, "l'héritage en CSS"...

Merci de votre lecture, pour tout signalement d'erreur ou questionnement, rendez-vous sur le forum.
Pour une aide en codage, rendez-vous ici.

Cours précédent : Les tableaux en HTML