Changer la couleur des titres et autres basiques

Chez Red Fish Web Syndrome on est bien conscient qu'on a pas inventé l'eau tiède. Aussi, vous trouverez fréquemment des liens appropriés vers des aides externes gratuites et en français. Par contre, on essaye de traduire si besoin en langage e-monsite.

Changer la couleur du titre

Vous êtes peut-êtyre arrivé sur cette page par hasard. Découvrez sur cette page : comment centrer un titre.

Comment modifier la couleur d'un titre en CSS

Pour la démonstration, je changerai la couleur de mes h6. Cela reste valable pour tous les titres en modifiant h6 par le titre idoine.

Ce titre est un h6, je le mets en rouge.
h6{
color: #ff0000;
}

Sans centrer le titre : décaler un titre

On peut choisir de centrer son titre ou de décaler celui-ci (un peu à la façon "Tab" des logiciels comme Word).

Parce qu'on vous conseillera toujours (au moins jusqu'en 2016 Sourire) les design responsive, il est préférable de ne jamais utiliser les "pixels" avec un desgin responsive. Même si on doit jamais dire jamais. La valeur de base d'un "em" étant en pixels...

Les marges seront à renseigner en "em" ou en "%". J'admets qu'un "em" = 10/14 pixels. C'est (rarement,) faux. Cependant on en est pas loin sur les thèmes e-monsite. Le "em" étant renseigné par le designer, ça peut être 1px comme 20px.

Prenons donc l'exemple de ce "retrait" d'un titre. Je vais mettre un retrait de 3em sur mon h6 (titre en rouge). Sur PC le retrait est de 36px ;)

h6{
margin-left: 3em;
}

L'avantage à mettre du "em" ou "%" est que sur mobile, si  le "em" vaut 12px, le retrait ne sera pas de 36px par exemple mais de 18px (3em) - 3 fois la valeur initiale du "em". Cela reste cohérent sur mobile.

Si j'avais mis 36px, mon titre h6 en rouge - avec une marge de 36px - aurait été centré ou hors cadre sur mobile. La proportion est donc conservée avec les "em" ou "%". Pour info (j'en vois au fond de la salle qui discutent en disant "oué mais il parle pas de l'utilisation du pourcentage, toussa"). Le pourcentage est utile quand vous voulez qu'un truc - Objet, Contenu, Tableau, etc. - fasse 20% de plus ou soit à 100% de la fenêtre et pas tant de retrait par exemple sur tout support.

Tableau avec 100% de largeur (la hauteur est automatique)

1 A
2 B

 

Tableau avec 500px de largeur.

1 A
2 B

 

Sur mobile, le premier passe bien, le second... pas top !

 

 

Compiler les règles CSS

h6{
color: #ff0000;
margin-left: 3em;
}

Dans la zone "Ajouter/modifier des règles CSS au thème" j'ai donc le code visible à gauche.

Je cible le h6 et j'y ajoute deux règles : rouge et 3em de décalage depuis la gauche.

Ajouter un commentaire