Médiaforma

All posts tagged style

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Pour mettre en évidence le surclassement des styles, j’ai redéfini les styles h1, h2 et h3 dans une feuille de styles externe nommée styles.css. Comme vous pouvez le voir, le style h1 aura une couleur rouge, une taille de 50 pixels et des caractères gras. Le style h2 aura une couleur bleue, une taille de 35 pixels et des caractères italiques. Enfin, le style h3 aura une couleur verte et une taille de 25 pixels.

Nous allons utiliser un document HTML élémentaire qui utilise la feuille de styles styles.css et se contente d’afficher un titre de niveau 1, un titre de niveau 2, un titre de niveau 3 et un simple texte.

Affichons ce document dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :

Nous allons maintenant surclasser le style h2 en définissant une feuille de styles interne. Pour cela, nous ajoutons une balise <style> dans l’en-tête du document et nous modifions la couleur du style h2 :

Affichons ce document dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style interne. Par contre, la taille des caractères est inchangée et les caractères apparaissent en italique. Il y a donc eu un surclassement partiel du style h2.

Nous allons maintenant ajouter un attribut style dans la balise <h2>. Ici, nous demandons que les textes de style h2 soient affichés en caractères noirs :

Affichons le document ainsi modifié dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style de la balise h2. Il y a donc eu un premier surclassement via la feuille de styles interne et un deuxième via l’attribut style de la balise <h2> :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les trois rubriques précédentes, vous avez vu qu’il était possible de définir un style CSS dans une balise HTML, dans une feuille de styles intégrée au document HTML ou dans une feuille de style externe, stockée dans un fichier d’extension .css.

La troisième technique est celle qui donne les meilleurs résultats en termes de réutilisation. En effet, la feuille de styles externe peut être utilisée par toutes les pages d’un site, ce qui assure leur uniformité et soulage l’écriture. Il suffit pour cela d’insérer une balise <link> dans chaque page concernée.

L’utilisation d’une feuille de styles interne est intéressante lorsque le nombre de pages est très limité.

Quant à la modification des styles dans les balises, elle est marginale et ne sert qu’à “surclasser” un style, c’est à dire à modifier les caractéristiques d’un style qui a été défini dans une feuille de styles externe ou interne.

De la même manière, les styles définis dans une feuille de styles interne surclassent ceux définis dans une feuille de style externe.

Il y a donc deux niveaux de surclassement possibles : les styles définis dans une feuille de styles externe sont surclassés par ceux définis dans une feuille de styles interne qui sont eux-mêmes surclassés par ceux définis dans les balises HTML.

Lorsque vous définissez un site Web, la démarche consiste à créer une feuille de styles externe dans laquelle vous définissez les styles généraux à utiliser dans vos pages. Si une page doit utiliser un ou plusieurs styles spécifiques, il vous suffit de les redéfinir dans une feuille de styles interne. Enfin, si une balise doit utiliser un style particulier, il vous suffit de le définir dans la balise en utilisant un attribut style.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez appris à insérer l’attribut style dans une balise quelconque pour modifier ses caractéristiques. Dans cette rubrique, je vais vous montrer comment définir une feuille de styles interne, entre les balises <head> et </head> de la feuille. Pour cela, vous devez insérer une balise <style type=”text/css”> et terminer cette balise avec une balise </style>. Les styles seront redéfinis entre ces deux balises.

A titre d’exemple, nous allons redéfinir les caractéristiques de la balise <h2>. Pour cela, nous précisons le nom de la balise, sans l’encadrer par les caractères “<” et “>”, puis nous insérons des accolades ouvrante et fermante à sa suite. Les propriétés modifiées seront insérées entre les deux accolades. Ici, nous redéfinissons la couleur et la taille des balises <h2>.

Comme vous pouvez le voir, le simple fait d’insérer une balise <h2> dans le document lui fait adopter la couleur et la taille définie dans la feuille de styles.

SI vous insérez une autre balise <h2>, elle adopte également les caractéristiques redéfinies dans la feuille de styles interne. Tout le document est donc concerné par la feuille de styles.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Pour insérer un style dans une balise, vous utiliserez l’attribut style :

<balise style=”propriété1: valeur1; propriété2: valeur2; etc.”>

A titre d’exemple, nous allons utiliser une propriété CSS pour modifier la couleur d’une balise de titre <h2>, puis la couleur et la taille des caractères d’une autre balise <h2>.

La ligne 5 affiche un titre <h2>.

La ligne 6 affiche un titre <h2> en modifiant sa couleur. Ici, nous avons choisi d’utiliser la couleur prédéfinie red, mais nous aurions tout aussi bien pu utiliser une couleur RVB.

La ligne 7 affiche un titre <h2> en modifiant sa couleur et sa taille. La propriété font-size définit la taille de la balise, en pixels. Comme vous le voyez, chaque propriété est suivie d’une valeur et d’un point-virgule. Cette remarque s’étend à toutes les propriétés RSS que vous manipulerez.

Une autre remarque : un style défini à l’intérieur d’une balise ne concerne que cette balise. Il ne s’étend absolument pas aux balises de même type qui figurent dans le document. Dans cet exemple, les styles définis dans chacune des balises <h2> n’entrent jamais en conflit.


Dans la rubrique précédente, vous avez appris à définir une bordure personnalisée pour un tableau. Dans cette rubrique, nous allons voir comment définir une bordure personnalisée pour chacune des cellules du tableau. Pour cela, il va falloir modifier le style de la balise <td>.

Commencez par insérer une balise <style> </style> entre les balises <head> et </head>, et définissez le type de la balise <style> à “text/css”. Pour modifier le style de la balise <td>, il suffit d’écrire td entre les balises <style> et </style> et d’énumérer les caractéristiques de la balise <td> entre des accolades. Ici, toutes les balises <td> auront une couleur rouge pointillée épaisse de 5 pixels.

Avec cet exemple élémentaire, vous commencez à percevoir le potentiel des instructions CSS. Le simple fait d’avoir modifié le style de la balise <td> entre les balises <style> et </style> s’applique à tout le document.

Un dernier détail : pour éviter d’avoir des bordures répétées entre les cellules, il suffit de définir la propriété CSS border-collapse de la balise <table> et de lui affecter la valeur collapse.


Deux propriétés CSS permettent de définir l’espace autour des éléments de type box : margin et padding :

  • margin définit l’espace entre un élément et les autres éléments qui l’entourent ;
  • padding définit l’espace entre la bordure de l’élément et son contenu.

Il est possible de définir des marges supérieure, inférieure, gauche et droite en accolant (respectivement) les suffixes top, bottom, left et right aux mots-clés margin et padding et en les séparant par un tiret.

Examinons le code suivant :

Deux balises <div> de classe conteneur et interieur sont imbriquées. Ces classes contiennent un peu de texte issu du site http://fr.lipsum.com/.

La classe conteneur définit une couleur d’arrière-plan rose pâle et fixe les dimensions de la balise.

La classe interieur définit une couleur d’arrière-plan jaune pâle, une bordure noire épaisse de deux pixels, des marges extérieures de 10 pixels et des marges intérieures de 40 pixels.

Voici le résultat dans Internet Explorer :

Les quatre marges intérieures étant identiques, les quatre propriétés padding peuvent se résumer à une seule :

padding: 40px;

Il en va de même pour les marges extérieures qui se résument en :

margin: 10px;

Supposons maintenant que nous voulions utiliser les marges intérieures suivantes :

  • Gauche : 40px ;
  • Droite : 41px ;
  • Supérieure : 42 px :
  • Inférieure : 43px.

La forme condensée de la propriété padding sera :

padding: 42px 41px 43px 40px;

Vous voyez donc que les quatre marges sont spécifiées dans l’ordre suivant : haut, gauche, bas et droite. Pour retenir cet ordre, imaginez que vous partez d’en haut et que vous décrivez un cercle dans le sens inverse des aiguilles d’une montre.

Il en va de même en ce qui concerne les marges extérieures. Supposons que nous voulions utiliser les marges extérieures suivantes :

  • Gauche : 10px ;
  • Droite : 11px ;
  • Supérieure : 12 px :
  • Inférieure : 13px.

La forme condensée de la propriété margin sera :

margin: 12px 11px 13px 10px;

Supposons maintenant que les marges extérieures gauche et droite soient identiques et égales à 15 pixels, et que les marges extérieures supérieure et inférieure soient identiques et égales à 20 pixels. La propriété margin pourra être condensée comme ceci :

margin: 20px 15px;

Cette remarque s’applique également aux marges intérieures.


Cette rubrique va vous montrer comment modifier le style des puces dans une liste <ul>. Dans cet exemple, nous avons utilisé une liste pour énumérer les Etats membres de l’Union Européenne :

La balise <ul> marque le début de la liste et la balise </ul> marque la fin de la liste. Les divers éléments de la liste sont délimités par les balises <li> et </li>. Voici le résultat :

Dans une rubrique précédente, vous avez vu comment utiliser d’autres types de liste en utilisant l’attribut type. Consultez la rubrique Listes à puces pour en savoir plus à ce sujet.

Dans cette rubrique, je vais vous montrer comment remplacer les puces prédéfinies du langage HTML par des images. Pour cela, vous allez utiliser la propriété CSS list-style et lui affecter une image. Ici par exemple, l’image utilisée a pour nom puce3D2.jpg. Si l’image n’est pas disponible, vous pouvez préciser le nom de la puce prédéfinie à utiliser : disc, square ou circle.

Voici le résultat quand l’image est trouvée, et quand l’image n’est pas disponible :