css : couleurs

Mise en forme : apparence

Rappelons que le rôle du code css est la mise en forme.

On peut grossièrement séparer la mise en forme en deux catégories :

la définition de l'apparence (couleur, taille...) de chaque élément individuellement.
la définition de l'apparence globale de la feuille (ou mise en page) : positionnement de chaque élément les uns par rapport aux autres notamment.

Le second aspect est plus difficile que le premier. Nous commençons donc par l'un des aspects de la première catégorie : la mise en couleur des éléments.

Couleur du texte

Pour mettre le texte des éléments p en vert, on définit une règle css concernant les paragraphes.

Cette règle peut être placée dans l'entête de la page (exemple ci-dessous) entre les balises <style> et </style> lorsque cette règle est destinée à ne s'appliquer qu'à cette page. Elle sera placée dans un fichier .css séparé lorsqu'elle est destinée à s'appliquer à plusieurs pages.

La règle css est la suivante : p{ color: rgb(0,200,0); } . Cette règle css ne fait intervenir que la seule propriété color (qui concerne la couleur du texte).

Tous les paragraphes verts

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Couleur du texte  </title>
        <style>
        p{ color : rgb(0,200,0); }
        </style>
    </head>
    
<body> 

<h1> Les paragraphes verts </h1>

  
<p> Un paragraphe </p>

<p> Et un autre </p>

<p> Et encore un autre. </p>
</body>
</html>

Certains paragraphes verts

Dans l'exemple précédent, vous constatez que tous les paragraphes présentent un texte vert.

Comment procèder pour que certains paragraphes seulement le soient ?

La méthode la plus fréquente sera d'utiliser un attribut class spécifique.

Dans l'exemple ci-dessous, les paragraphes qui se voient attribuer la classe "martien" présenteront un texte vert, les autres présenteront un texte noir.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Couleur du texte  </title>
        <style>
        p{color: black;}
        p.martien{ color : rgb(0,200,0); }
        </style>
    </head>
    
<body> 

<h1>  Les paragraphes martiens </h1>

  
<p class="martien"> Un paragraphe </p>

<p> Et un autre </p>

<p class="martien"> Et encore un autre. </p>

<p> Et un dernier. </p>
 
       
</body>
</html>

Le rôle de l'attribut class portant sur un élément html est exactement celui que l'on vient d'utiliser : permettre d'appliquer une même règle de style à tous les éléments portant la même valeur pour cet attribut.

Un seul paragraphe vert

Si l'on veut maintenant mettre en vert un unique paragraphe pour une raison très particulière, on pourra définir le style css directement dans la balise de l'élément html.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Couleur du texte  </title>
         
    </head>
    
<body> 

<h1>  Les paragraphes martiens </h1>

  
<p> Un paragraphe </p>

<p> Et un autre </p>

<p style="color:green"> Et encore un autre. </p>

<p> Et un dernier. </p>
 
       
</body>
</html>

Cette inscription du code css directement dans la balise de l'élément html sera rarement utilisée. Elle est réservée à une situation où un unique élément, pour une raison bien particulière, doit avoir un style à part.
Dès qu'un style est présent au moins deux fois dans la page, placez une règle de style en entête.
Dès qu'une règle de style est utilisée dans plus d'une page, placez cette règle dans un fichier .css séparé.

Il s'agit là d'usage de bon sens :

Cela vous évite de retaper plusieurs fois le même code.
Toute modification ultérieure de la règle sera beaucoup plus simple puisque la règle sera écrite une unique fois.

Couleur du fond

background-color

Tout élément html est en fait inscrit dans une boîte rectangulaire.

Une couleur peut être attribuée à l'intérieur de cette boîte. Cette couleur est une couleur de "fond" en ce sens qu'elle ne vient pas se superposer à celle du texte (c'est au contraire le texte qui vient s'écrire par-dessus).

La propriété concernée se nomme background-color.

<!DOCTYPE html>
<html lang="fr">
	
	
<head>
	<meta charset="utf-8">
	<title> Couleur du texte  </title>
	<style>
		article{
			background-color : rgb(220, 0, 0);
			padding: 5px; /* marge interne */
		}
		
		p.mars{ 
			background-color : rgb(0, 240, 0);
			color: blue;
			width : 50%; /* limite la taille du paragraphe */
			margin: 3px; /* marges autour de la boîte */
		}
	</style>
	 
</head>

    
    
<body> 

<h1>   Paragraphes avec un attribut class  </h1>

<article>
	
	<h2>  Paragraphes planétaires </h2>
	
	
	Le fond rouge est dû au css déclaré sur l'élément <code>article</code>.
	
	<p class="jupiter"> 
		Je suis un élément paragraphe avec un attribut class de valeur jupiter. 
		Mais  aucun css n'est défini sur cette valeur d'attribut, cette valeur
		d'attribut n'a donc aucune conséquence sur mon affichage.   
	</p>
	 

	<p  class="mars"> 
		Je suis un élément paragraphe avec un attribut class de valeur mars. 
		La règle css définie sur cette valeur d'attribut m'est donc appliquée. 
	</p>

	<p>  Je suis un paragraphe sans règle css particulière. </p>
</article>

<p> Et un dernier. </p>
 
       
</body>
</html>

gradient

On peut également attribuer une couleur avec dégradé :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Couleur du texte  </title>
        <style>
        	div{
        		background: linear-gradient(red, yellow);
        	}
        	
        	.mars{ 
				width: 80%;
        		background: linear-gradient(to right, rgb(0,220,0) , orange);
        		text-align: center;
        	}
        </style>
         
    </head>
    
<body> 

<h1>  La classe mars </h1>

<div>
	<p> Un paragraphe </p>

	<p> Et un autre </p>

	<p> Et encore un autre. </p>
</div>

 
 
<div class="mars">
	<p> Un paragraphe </p>

	<p> Et un autre </p>

	<p> Et encore un autre. </p>
</div>


 
       
</body>
</html>

La syntaxe est à lire ici : gradient sur w3schools

Couleurs des bordures

Chaque boîte définissant un élément html est muni d'une bordure.

Cette bordure peut se voir attribuer une couleur.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Couleur du texte  </title>
        <style>
        	div{
        		border-style: dotted; /* on trace la bordure en pointillés */
        		border-color: pink; /* on la colore en rose */
        	}
        	
        	p{
        		border-style: solid; /* on trace la bordure en traits pleins */
        		border-color: red green magenta brown; /* une couleur pour chaque côté */
        		border-width : 5px; /* épaisseur de la bordure */
        		width: 80%;
        		height: 50px;
        		margin: 10px;
        	}
        </style>
         
    </head>
    
<body> 

 <div>
	 Élément div
	 
	 <p> Un paragraphe dans le div </p>
 </div>
 
 <p> Un paragraphe hors div. </p>
 
       
</body>
</html>

Lorsqu'un élément a une bordure d'épaisseur non nulle et que la propriété border-color n'est pas renseignée, la couleur de bordure est alors égale à la couleur du texte (donnée par la valeur de la propriété color).