Coder en CSS et intégrer le style à une page HTML
Intégration et syntaxe type
Coder en CSS et intégrer le style à une page HTML
Nous allons apprendre à mettre en forme un document HTML en utilisant la technique la plus adaptée.
Nous verrons qu’il existe plusieurs méthodes pour appliquer du style au éléments d’une page et vous apprendrez à vous servir des sélecteurs CSS afin de styliser un ou plusieurs éléments à la fois et selon une hiérarchie et des règles de priorité établies.
Définition et syntaxe
Les feuilles de styles en cascade permettent de mettre en forme des documents web. Le terme cascade signifie que la mise en forme d’une page peut faire appel à plusieurs feuilles de styles.
Une règle CSS est composée de 2 éléments : le sélecteur et la déclaration. Le sélecteur indique l’élément sur lequel vont s’appliquer les déclaration CSS.
La déclaration les propriétes et les valeurs à appliquer à cet élément. Exemple de syntaxe CSS :
#style { /*sélecteur*/
background-color: pink } /*propriétés : valeur*/
Déclaration CSS en ligne
Une première méthode consiste à intégrer le code CSS directement dans votre balise HTML en utilisant l’attribut style. Cette technique est à éviter puisqu’elle ne permet pas de dissocier le contenu de la mise en forme. La mise à jour des pages devient alors difficile et cela supprime la clarté du code dans votre document.
Sachez que cette solution existe mais réservée la à une utilisation ponctuelle, pour par exemple définir un style sur un seul élément n’apparaissant que sur une seule page de votre site. Exemple d’utilisation de l’attribut style :
<body>
...
<div style="background-image:url(images/fond.jpg); border-color: #849460; border-style:solid;
border-width: 2px; border-radius: 10px; width:300px; margin:auto; text-align:left; padding-left:80px;">
Contenu de votre élément
</div>
...
</body>
Feuille de style interne
Il est préférable d’identifier les balises concernées à l’aide de noms afin de leur appliquer des règles distinctes. Il est possible d’écrire du code CSS dans l’entete d’un document HTML, dans la balise >head>. Il suffit pour cela de l’encadrer par une balise >style> ayant pour attribut type= »text/css ».
Cette méthode permet de retirer la mise en forme du corps du document, mais elle ne s’appliquera qu’a la page concernée et non à l’ensemble du site.
Exemple de feuille de style interne:
<head>
<style type="text/css">
#header{
position: relative; text-align: center; width: 900px; margin: auto; height: 200px;
background-image: url(image.png); }
body {
font: 16px "Carnivalee Freakshow"; margin: auto; position: relative; width: 900px; height: auto;
background: url(images/fondpage.png) repeat-x center; }
#boite1 {
position: relative; margin: auto; margin-left: 20px; height: auto; width: 643px; float:left;
background-image: url(images/catalog.png); }
#boite2 {
position: relative; margin-left: 20px; height: 28px; width: 323px; float:left;
background-image: url(images/bottom2.png); }
#footer {
font-size: 11px Arial, sans-serif; line-height: 14px; position: relative; width: 900px; height: 80px;
background-image: url(images/piedpage.png) no-repeat center; }
</style>
...
</head>
<body>
...
Feuille de style externe
La dernière méthode consiste à rédiger le code CSS dans un document externe afin qu’il puisse etre appelé par les différentes pages de notre site.
La séparation du fond et de la forme permet de retrouver et de corriger plus rapidement le texte des pages, de facilement mettre à jour le design et rendre vos document HTML plus léger.
Pour déclarer une feuille de styles externe, il suffit de l’appeler dans le <head> de votre document HTML.
Exemple d’une feuille de style externe (ici nommée « monstyle.css ») :
@charset "utf-8";
/* CSS Document */
#header{
position: relative; text-align: center; width: 900px; margin: auto; height: 200px;
background-image: url(image.png); }
body {
font: 16px "Carnivalee Freakshow"; margin: auto; position: relative; width: 900px; height: auto;
background: url(images/fondpage.png) repeat-x center; }
#boite1 {
position: relative; margin: auto; margin-left: 20px; height: auto; width: 643px; float:left;
background-image: url(images/catalog.png); }
#boite2 {
position: relative; margin-left: 20px; height: 28px; width: 323px; float:left;
background-image: url(images/bottom2.png); }
#footer {
font-size: 11px Arial, sans-serif; line-height: 14px; position: relative; width: 900px; height: 80px;
background-image: url(images/piedpage.png) no-repeat center; }
Appel de cette feuille dans le >head> de votre page HTML :
<head>
<link rel="stylesheet" media="screen" type="text/css" href="monstyle.css"/>
...
</head>
Hiérarchie des feuilles de styles
Vous devez savoir qu’il y a une hiérarchie dans l’interprétation des feuilles de style par votre navigateur. Une règle de style intégré au sein du code HTML, par l’attribut « style » prédomine sur une feuille de style interne, intégrée dans le >head> de votre page, qui elle-meme prédomine sur une règle de style établie dans une feuille de styles externe, applelée dans le >head> de votre documant par une balise >link>.
Ainsi :
Feuille de style externe ( appelée dans le >head> par >link rel="stylesheet" media="screen" type="text/css" href="monstyle.css"/> ) img { width:120px; height:80px; } peut etre modifiée par une feuille de style interne :
<style type="text/css">
img { width:120px; height:100px; }
</style>
Elle meme modifiable au sein du corps de page par <img style="width:120px; height:120px;"... >
Les sélecteurs CSS
Vous avez surement déjà constaté que des éléments de document HTML possèdent parfois un attribut class ou id. Maintenant que nous savons où placer le code CSS, nous allons voir comment sélectionner les différents éléments d’une page pour les mettre en forme, à l’aide des sélecteurs.
Le sélecteur de balise
le sélecteur de balise permet tout simplement d’appliquer du style à toutes les balises concernées de la page. Il suffit de déclarer la définition comme ceci :baliseHTMLconcernée {propriété: valeur; }
Exemple :
img {
width:120px;
height:80px; }
Dans cette exemple, toutes les images appelées par la balise auront une hauteur de 80px et une largeur de 120px.
Le sélecteur de classe
Imaginons maintenant que nous voulions changer la taille de plusieurs éléments dans la page, mais sans les changer toutes. Nous utiliserons alors un sélecteur de type class qui sera attribué uniquement aux éléments concernés. Le sélecteur class est représenté par un . suivi de son nom.
Prenons l’exemple d’images de moto et voiture se voyant affectées des dimensions différentes : En CSS :
.voiture { width:120px; height:80px; }
.moto { width:120px; height:120px; }
Intégration HTML
<body>
<img scr="image_auto.jpg" class="voiture"> ... l'image aura pour dimensions 120px x 80px
<img scr="image_moto.jpg" class="moto"> ... l'image aura pour dimensions 120px x 120px
<div class="auto">... la balise aura pour dimensions 120px x 80px
Plusieurs balises différentes peuvent avoir la meme classe.
Le sélecteur d’identifiant
Sii vous souhaitez sélectionner un unique élément de la page, il faut donner à la balise HTML un identifiant. Celui-ci se déclare en HTML de cette manière :#identifiant { ... }
Prenons exemple avec un élément <h2> auquel vous souhaitez appliquer un style propre :
En CSS :
#texterouge { color: red ; }
Intégration HTML
...
<h2>titre affiché normalement </h2>
<h2 id="texterouge">titre affiché en rouge </h2>
Hiérarchie des sélecteurs
Vous pouvez appliquer un style à un élément à condition qu’il se trouve lui meme dans un autre éléments.
Pour cela, il vous suffit de séparer les noms de balises par un espace.
Pour l’exemple, nous allons modifier uniquement la taille de police de caractère des balises >h1> contenu dans un bloc <div> :
div h1 { font-size: 22px; }
Modifions maintenant les éléments <a> (lien) contenu dans une ligne <li> de liste <ul>, ces derniers sont contenus dans une <div> dont l’id est « menu » :
div #menu ul li a {
font-size: 22px; text-decoration: underline; color: green;
}
Multi-sélections
Il est tout à fait possible d’appliquer une règle de style à plusieurs balises différents sans avoir à réécrire la dites règle. Pour cela il vous suffit de déclarer plusieurs éléments en les séparant par une virgule. En exemple :
#article, #titre, #modele {
font: 14px #000000 arial; }
Les sélecteurs d’attributs
Cette méthode permet de sélectionner une balise ayant un attribut donné. Plutot que de différencier chaque balise par un id spécifique, vous pouvez les sélectionner grace à leur attribut.
Modifions, pour l’exemple, le style des balises de type texte et de type bouton très utilisées dans les formulaires :
input [type="text"] {
border: solid 2px #919191; }
input [type="submit"] {
border: solid 1px #919191;
font: black 10px arial; }
Les pseudo-classes
En CSS, vous pouvez apporter des précisions aux sélecteurs en utilisant des pseudo-classes accolées à une balise. On distingue notamment ::first-child, :last-child, :link, :hover, ... . Utilisons pour l’exemple la pseudo-classes :hover afin de modifier la couleur d’un lien au passage de la souris :a:hover {
color: pink; } Au survol de la souris, le lien deviendra rose.
Le sélecteur universel
Ce sélecteur est représenté par une étoile et permet d’appliquer une règle de style à l’ensemble des balises du document.
Si, par exemple, vous souhaitez oter toutes les marges par défaut de toutes les balises, vous saisirez la règle suivante : * { margin: 0; padding:0; }
Insérer des commentaires
Sachez qu’il est possible d’insérer des commentaires dans un code CSS, comme vous le feriez pour votre document HTML, afin de vous y retrouver plus facilement lorsqu’il faudra y apporter des modifications.
Les commentaires se placent entre les signes /* et */, vous verrez alors le texte saisie en grisé et ne sera pas pris en compte dans la lecture des règles CSS.
Le CSS en 3 questions/réponses – en bref
🖥️ C'est quoi HTML et CSS ?
Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML
🤔 Qu'est-ce que le CSS ?
CSS est l’acronyme de « Cascading Style Sheets » c’est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).
📆 Différence entre CSS et CSS3 ?
CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.
