Médiaforma

All posts tagged css

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

Dans la rubrique précédente, vous avez vu que les styles pouvaient être définis dans une feuille de styles, à l’intérieur du document HTML, entre les balises <style> et </style>. Dans cette rubrique, je vais vous montrer comment regrouper les styles dans un fichier annexe.

A titre d’exemple, nous allons redéfinir le style de titre H2. Pour cela, nous créons un nouveau fichier dans Notepad++. Pour modifier le style h2, nous écrivons h2, suivi d’une accolade ouvrante puis d’une accolade fermante. A l’intérieur des accolades, nous définissons les propriétés à modifier :

  • la couleur du texte sera rouge ;
  • la taille des caractères est fixée à 50 pixels ;
  • les caractères seront affichés en italique.

Cette feuille de styles est sauvegardée dans le fichier styles.css.

Pour faire référence à la feuille de styles que nous venons de définir, nous utiliserons la balise <link>, en précisant que :

  • le document référencé est une feuille de styles ;
  • la feuille de styles contient du texte ;
  • le fichier à utiliser est styles.css.

Cette simple balise suffit pour donner accès à tous les styles qui ont été redéfinis dans la feuille de styles.

Le document est affiché dans Internet Explorer avec la commande Launch in IE dans le menu Exécution. Le résultat est bien conforme à ce qui était attendu : les deux balises <h2> ont les caractéristiques définies dans la feuille de styles externe.


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.


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

La maîtrise du langage CSS est un vrai plus pour les concepteurs de pages HTML. Par son intermédiaire, il est possible de décorréler la mise en page du contenu. Ainsi, vous utilisez un document HTML pour définir le contenu (textes, images, vidéos) et une feuille de styles pour définir la mise en forme et la mise en page de tous les éléments contenus dans le document HTML. Il est même possible d’utiliser une même feuille de styles pour mettre en forme plusieurs documents HTML. C’est d’ailleurs ce qui assure l’uniformité des pages d’un site Web.

Un style CSS peut être défini à trois emplacements :

  • Dans un document HTML, à l’intérieur d’une balise.
  • Dans l’en-tête d’un document HTML.
  • Dans un fichier spécifique d’extension CSS.

Dans les rubriques suivantes, vous allez découvrir chacune de ces possibilités et comprendre quand vous devez les utiliser.


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 centrer horizontalement une balise <div> en utilisant quelques lignes de CSS. Dans cet exemple, la balise <div> contient quelques lignes de texte, mais vous auriez tout aussi bien pu y placer d’autres éléments, comme des images et/ou des vidéos par exemple.

La balise <div> est de style aucentre. Le centrage de la balise se fera donc dans la classe aucentre. Pour bien discerner les limites de la balise <div>, un arrière-plan de couleur jaune et une bordure groove continue de couleur rouge sont définis. La largeur de la balise est fixée à 300 pixels. L’astuce réside dans l’utilisation de la propriété margin, qui fixe les marges de la balise. Dans cet exemple, les marges supérieure et inférieure sont nulles et les marges gauche et droite s’adaptent automatiquement aux autres caractéristiques de la balise. Etant donné que la largeur de la balise a été fixée à 300 pixels, les marges gauche et droite se répartissent également la place restante.

Voici le résultat dans Internet Explorer :


Il est peu fréquent d’attribuer plusieurs classes à un élément. C’est pourtant tout à fait possible, en séparant les noms des classes par un espace.

Lorsqu’un élément se voit affecter plusieurs classes, les propriétés de chacune des classes lui sont appliquées. Ici par exemple, nous avons défini quatre classes au nom évocateur :

  • rouge colore le texte en rouge ;
  • bleu colore le texte en bleu ;
  • gras affecte l’attribut gras au texte ;
  • italique affecte l’attribut italique au texte.

Deux classes sont affectées au premier paragraphe : rouge et gras.

Deux classes sont affectées au deuxième paragraphe : bleu et italique.

Enfin, trois classes sont affectées au troisième paragraphe : gras, rouge et italique.

Voici le résultat dans Internet Explorer. Comme vous pouvez le voir, chacun des paragraphes cumule les propriétés de toutes ses classes :