Tutoriel CSS Accéléré

Bénéfices des Cascading Style Sheets

En HTML 4.0, la plupart des éléments de mise en forme HTML sont dépréciés (toujours supportés mais le W3C recommande de ne plus les utiliser).

Les Web designers doivent utiliser les CSS à la place.

Les avantages des CSS sont :

1. Code plus propre
   • Plus facile à maintenir
   • Chargement + rapide
   • Meilleur SEO
2. Code Modulaire
   • Les Style peuvent être appliqués à plusieurs pages
   • Cohérence du design
   • Maintenance facilitée
3. Puissance du Design
   • Contrôle précis de la position / aspect des éléments.
4. Division des tâches
   • Les développeurs développent / les Designers designent
5. Meilleure Accessibilité
   • Pas de perversion des tags (ex. <blockquote> pour formater)
   • Pas d'image invisible pour positionner

Règles CSS

Les règles CSS sont des déclarations qui définissent le style d'un élément ou d'un groupe d'éléments.
La syntaxe est comme suit :

  selecteur {
  	propriété:valeur;
 	propriété:valeur; 
  	propriété:valeur
  }
  

Chaque paire propriété:valeur est une déclaration. Les déclarations multiples sont séparées par un point-virgule. Le sélecteur définit quels éléments sont concernés par la règle.

  p {
	color:darkgreen;
	 font-family:Verdana;
	 font-size:10pt  
	}
	

Cette règle spécifie que tous les textes de paragraphes sont en vert foncé, 10-points et Verdana.

Commentaires CSS

Les Commentaires en CSS commencent avec "/*" et se terminent par "*/".

  p {   
	color:red; 
	/* paragraphes en rouge */  
	}
	

Sélecteurs

Il y a différents types de sélecteurs:

• Type
• Descendant
• Enfant
• Classe
• ID
• Attribut
• Universel

Les Sélecteurs identifient le ou les éléments concernés par la règle CSS.

Sélecteur de Type

Un sélécteur de type s'applique aux éléments (balises) d'un certain type. Exemple pour le type p :

  p {   
  color:darkgreen;   
  font-family:Verdana;   
  font-size:10pt;  
  }
  

Cette règle s'appliquera à tous les p.

Sélecteur Descendant

Un sélecteur descendant spécifie l'élément d'un ancêtre. Chaque génération est séparée par un espace.
Exemple : tous les SRONG qui sont dans des P :

  p strong {   
  	color:red;  
  }
  

Attention : le STRONG ici n'est pas forcément descendant direct de P..

Sélecteur Enfant

Un sélecteur Enfant spécifie une relation précise :

  p > strong {
  color:red;  
  }
  

Ici, seuls les <strong> qui sont enfants directs de <p> seront concernés.

Sélecteur de Classe

Presque tous les éléments peuvent prendre un attribut Class, qui assigne un nom de classe.
Un nom de classe est créé dans la feuille de style et défini par un sélecteur de classe qui commence par un point (.);
Exempl : la classe attention (en gras et rouge) :

  .attention {   
  font-weight:bold;   
  color:#ff0000;  
  }
  

Elements utilisant la classe "attention" : .

  <h1 class="attention">Attention !</h1>  
  <p class="attention">Important !</p>

Si le sélecteur de classe est précédé d'un nom d'élément, le sélecteur ne s'applique qu'à cet élément.
Exemple : h1 de classe "attention" sera souligné, mais pas les p :

  h1_attention {   
  color:#ff0000;   
  text-decoration:underline  
  }  
  p.attention {   
  color:#ff0000;   
  font-weight:bold;  
  }
  

Comme la couleur est commune, on peut écrire :

  .attention {   
  color:#ff0000;  
  }  
  h1_attention {   
  text-decoration:underline;  
  }
  p.attention {   
  font-weight:bold;  
  }
  

Note : on peut assigner plusieurs classes à un élément en séparant par un espace ::

<div class="C1 C2 C3">...

Sélecteurs d'ID

Presque tous les éléments peuvent avoir un attribut id, qui est un identifiant unique de l'élément dans la page.
Un sélecteur d'id commence par dièse (#) :

  #texte {
  margin-left:20px;
  margin-right:20px;
  }
  <div id="texte">   Ceci est le texte de la page...  </div>
  

Sélecteur d'Attribut

Spécifie un élément contenant un certain attribut, avec éventuellement une certaine valeur.

  a[target] {
  color:red;
  }
  

Uniquement target = "_blank".

  a[target="_blank"] {
  color:red;
  }
  

Sélecteur Universel

Le sélecteur universel est l'asterisque (*). Il spécifie "tous les éléments".

  * {
  color:red;
  }
  

Groupage

Des sélecteurs peuvent partager la même déclaration, en les séparant avec une virgule :

  i, .attention, #important {
  text-decoration: underline;
  }
  

Précédence des Sélecteurs

En cas de conflit de Règles :

• La règle ayant le sélecteur le plus spécifique s'applique.
• A spécificité égale, la dernière règle spécifiée s'applique.