Débuter en CSS

Les balises

Les feuilles de style sont utilisées pour mettre en forme le contenu d’une page HTML. Les styles sont déclinés pour des balises, pour des classes ou pour des identifiants. Nous parlons ici de sélecteurs.

Voici trois exemples simples, à partir de trois balises HTML :

<a href="index.php?module=essai>

<input class="num">

<input id="numero1">

qui vont pouvoir être traduites dans une feuille de style en s’appuyant sur la syntaxe suivante :

a { color: blue ; }

.num { width: 3em ; }

#numero1 {

color: red;

text-align: right;

}

Notre lien sera de couleur bleue, le champ de classe num aura une largeur de 3 em (3 fois la taille de la police, l’unité em correspondant à la taille de la police), et notre champ identifié numero1 verra son texte affiché en rouge, et aligné à droite.

Pour résumer, voici les sélecteurs de base :

• nomBalise : toutes les balises valant nomBalise. Exemple : input { }
• .nomClasse : toutes les balises contenant la classe nomClasse. Une balise peut contenir plusieurs classes, et ainsi se voir appliquer différentes mises en forme ;
• #identifiant : toutes les balises identifiées par le mot-clé id="identifiant" ;

Vous pouvez également indiquer les actions supportées, par exemple pour les liens :

a:hover { }

permet de définir le comportement quand la souris passe au-dessus d’un lien.

Vous avez la possibilité de combiner les sélecteurs, en les séparant par une virgule :

a:hover, a:active { }

définit le comportement pour un lien survolé par la souris ou actif (pendant le clic).

Il est également possible de définir le comportement d’une balise en fonction de sa position relative par rapport aux autres balises :

• table a:hover décrit le comportement de tous les liens survolés, insérés dans un tableau, quel que soit le niveau hiérarchique où le lien se situe ;
• div > p va traiter un paragraphe déclaré dans une balise div, au niveau immédiatement inférieur :
  • <div> <p>paragraphe 1</p> <p>paragraphe 2</p> <span><p>paragraphe 3</p></span> </div>
  • Les paragraphes 1 et 2 seront traités, par le paragraphe 3, qui se trouve à un niveau -2.
• div + p va traiter la balise p, si elle se trouve au même niveau hiérarchique, et située immédiatement après une balise div :
  • <div> (...) </div> <p>paragraphe 1</p> <p>paragraphe 2</p>
  • Seul le paragraphe 1 sera traité par la déclaration CSS.
• div ~ p va traiter tous les paragraphes situés après la balise div, mais de même niveau. Par rapport au sélecteur précédent, les deux paragraphes seront traités par cette déclaration.

Vous pouvez combiner plusieurs déclarations pour obtenir l’effet voulu. Voici un exemple issu d’une mise forme utilisée pour générer un menu. Le menu est créé avec des listes non ordonnées (balises <li> pour définir le niveau, et <ul> pour définir les items de la liste).

div.menu>ul>li { }

Cette balise permet de définir le comportement des balises <li>, comprises dans une balise <ul>, elle-même comprise dans une balise <div class="menu">.

div.menu>ul li { }

Par rapport à l’exemple précédent, les balises <li> sont traitées quelles que soient leur niveau hiérarchique par rapport à la balise <ul>.

Ce mécanisme est très intéressant pour définir un affichage en fonction du contexte. Ainsi, vous pouvez créer une balise <div class="maClasse">, qui contiendra diverses balises (un formulaire, des fieldset - des boites permettant de délimiter des zones, etc.). En créant, dans votre feuille de style, des descripteurs commençant par .maClasse, par exemple .maClasse input, vous pourrez obtenir des affichages qui ne seront valables que dans la balise <div>.

Les tailles

Les tailles de police, de zones... peuvent être exprimées dans plusieurs unités différentes. Pour les écrans, il est recommandé de n’utiliser que les unités proportionnelles, qui seront adaptées à chaque écran pour obtenir un résultat toujours identique, quel que soit la taille du support. Vous pouvez exprimer vos tailles :

• en pourcentage (%) de la taille de l’écran. C’est souvent utilisé pour les grands blocs (largeurs de colonne si vous séparez votre écran en deux pour afficher vos données, par exemple) ;
• en taille de police (em). 1 em correspond à la taille de votre police. Si votre police est plus grande, une largeur de 2 em sera également plus grande ;
• en pixel (px). Le pixel est défini comme un point petit et lisible ; une ligne d’un pixel doit être lisible, sans crénelage, et ce quel que soit votre type d’écran. Il a donc une taille variable, qui ne dépend ni de la taille de la police, ni de la taille de l’écran, mais de l’usage qui en est fait (un smartphone aura des traits plus fins qu’un écran d’ordinateur, placé plus loin de vos yeux).

Dans la pratique :

• utilisez les pourcentages pour dessiner les grands blocs de vos écrans, ou pour dimensionner de manière relative les différentes colonnes d’un tableau ;
• utilisez les em pour définir la taille de l’ensemble de vos champs ;
• utilisez les pixels pour les images affichées ;
• et abandonnez les dimensions absolues, comme le centimètre (cm), le pica (pc), le point (pt) - qui vaut 2,54 cm -, sauf si vous utilisez la feuille de style pour imprimer.

Les limites du CSS

Le CSS, dans sa version actuelle, ne traite que les aspects de présentation : il n’est pas possible de définir, dans la feuille de style, des attributs qui interviennent en interaction avec l’utilisateur. Ainsi, pas question de préciser les attributs des champs de saisie comme required (champ obligatoire), title (message affiché au survol ou en cas d’erreur dans le formulaire), placeholder (exemple de saisie) dans la feuille de style.

Ces attributs peuvent toutefois être déclarés dans des scripts Javascript (JQuery). En combinant des déclarations JQuery avec des feuilles de style, vous pouvez ainsi obtenir des comportements globaux dans l’application.