Résultats du Quiz CSS débutant

Que signifie CSS ?
- Cascading Style Sheets
- Create Simple Samples
- C'est Super Simple !
- Choucroute et Saucisses de Strasbourg
CSS est l'abréviation de Cascading Style Sheets (Feuilles de Style en Cascade).
À quoi sert le langage CSS ?
- À réaliser des pages dynamiques
- À ajouter du style aux documents web
- À insérer du contenu dans une page internet
- À simuler une application en mode avion durant les trajets dans un bus
Le CSS est un langage simple qui sert à styler (polices, couleurs, positions, dimensions ...) les documents internet.
Lire Introduction aux feuilles de style.
Pourquoi utilise-t-on généralement du CSS ?
- Pour se compliquer la vie bien sûr
- Pour séparer le contenu et la présentation des documents web
- Cela permet de faire de plus jolis dégradés de couleurs
- Parce que c'est plus simple à comprendre que JavaScript
Le CSS est généralement utilisé pour séparer le contenu (HTML, XHTML, XML) de sa mise en forme. Cela permet une maintenance simplifiée selon qu'il faille en modifier son aspect ou son contenu.
Lire Le fond et la forme d'un document Web.
Où est-il conseillé de placer le code CSS ?
- Dans le <body>, c'te question
- Entre les balises <head>, c'est bien plus propre
- Dans un fichier externe utilisable pour plusieurs pages
- Dans un fichier JavaScript
Bien que les 4 possibilités évoquées soient possibles, il est vivement déconseillé de placer le code CSS à l'intérieur du HTML dans le body.
Quitte à l'inclure dans le fichier internet, il est plus intéressant de le placer dans les balises head.

Cependant, pour que les possibilités offertes par le CSS soient pleinement exploitées, l'utilisation d'un fichier externe est recommandé. En effet, un même fichier pourra alors servir pour plusieurs pages en même temps et ainsi éviter la redondance inutile.
Dans quoi définit-on les déclarations CSS ?
- Entre deux crochets séparées par des tirets [ ... - ... ]
- Entre deux guillemets séparées par des slashs " ... / ... "
- Entre deux accolades séparés par des points-virgules { ... ; ... }
- Dans un fichier texte de type ".doc" ou "docx"
Un bloc de déclarations CSS est délimitée par des accolades. En son sein, chaque déclaration (couple "propriété : valeur") est ponctuée par un point-virgule.
L'ensemble formé par le sélecteur et le bloc de déclaration se nomme une règle :
```
a.lien { 
  color : blue;
  text-decoration : underline;
}
```
A noter que la présence du point-virgule au niveau de la dernière déclaration n'est pas obligatoire. Il est d'usage de le conserver pour éviter toute erreur due à un déplacement de ligne par exemple.
Dans la règle suivante, quel élément deviendra rouge ? strong#intro {background-color: red;}
- L'élément dont l'id est "intro" et qui est contenu dans un élément <strong>
- L'élément <strong> dont l'id est "intro"
- Tous les éléments <strong> contenus dans un élément dont l'id est "intro"
- Tous les éléments <strong> et les éléments dont l'id est "intro"
Puisqu'il n'y a pas d'espace entre "strong" et "#intro", cela signifie qu'il s'agit du même élément. Il n'y a pas de notion de contenant et de contenu ici. La règle s'applique à un seul élément : l'élément <strong> dont l'id est "intro".
Lire Les sélecteurs en CSS.
Quel élément sépare la propriété de sa valeur ?
- Le signe espace ( )
- Le signe égal (=)
- Le signe deux points (:)
- Le signe point-virgule (;)
- Un signe impossible à distinguer
La propriété font-size est séparée de sa valeur (exprimée ici en unité variable -em) par deux points :
```
p {
  font-size : 1em;
}
  
```
Lire Comment on écrit une feuille de style.

Pourquoi est-il d'usage de sauter une ligne entre chaque déclaration ?

Pour rien du tout
Pour que le code soit bien interprété par les navigateurs
Pour rendre le code plus lisible et la maintenance plus facile
Pour faciliter les échanges de styles entre deux fichiers (je raconte n'importe quoi là)

Il n'est pas nécessaire de sauter des ligne ou d'indenter votre code. Ces deux exemples sont rigoureusement identiques :

    a.lien { color:blue; text-decoration:underline; font-size:0.9em; font-weight:bold;  }  
     h1.titre { color:red; text-decoration:none; font-size:1.5em; font-weight:normal;   }
     p { font-size:1em; margin:5px; padding:10px; }

     a.lien { 
      color : blue;
      text-decoration : underline;
      font-size : 0.9em; 
      font-weight : bold ;
     }  
  
     h1.titre { 
       color : red;
       text-decoration : none; 
       font-size : 1.5em; 
       font-weight : normal;   
     }

    p {
       font-size : 1em;
       margin : 5px; 
       padding : 10px;
     }

Mais avouez tout de même que le second est plus facile à lire, à corriger... Et surtout à débbuger quand vous venez demander un coup de main sur le forum... ;o).

À quoi sert le sélecteur de classe : h2.nomDeClasse ?
- Ah bon ... C'est censé servir à quelque chose ?
- À créer une ancre sur la balise <h2>
- À définir différentes propriétés pour l'élément <h2> dont la classe est "nomDeClasse".
- À ajouter un peu de classe à notre code parfois un peu tristounet
Le sélecteur de classe different permet de modifier l'apparence des titres de niveau 2 dont la class est "different" et uniquement ceux possédant cette classe.
```
<h2 class="nomDeClasse">
Titre de niveau 2 différent des autres
</h2>
```
Lire Les classes et sélecteurs de classe.
Combien de règles peut contenir un fichier CSS ?
- Il n'y a pas de limite, on peut en créer autant que l'on veut
- Si le poids du fichier n'excède pas 20Ko, c'est tout bon
- 150 à plus ou moins 10%
- Cela dépend des navigateurs
Un fichier CSS n'est limité ni par son poids, ni par le nombre de ses règles. Vous pouvez donc coder de gros fichiers.
Mais pensez quand même à les optimiser, ce n'est pas la peine non plus de tenter le Guiness Book du plus long fichier CSS !

Résultats du Quiz CSS débutant

Le verdict de Hiro Nakamura