Pour donner le même style à tout le texte du bordereau d'expédition, accédez au modèle de bordereau d'expédition dans vos paramètres de modèle et ajoutez le code suivant au début de la section En-tête de la commande :
<style>
* {
font-size:14px;
font-family: Georgia, serif;
color: #4f4f4f;
}
</style>
Le symbole * est un sélecteur global. Le code ci-dessus définit la taille de tous les textes dans le bordereau d'emballage sur 14px, la police sur Georgia (ou, si Georgia n'est pas une police disponible, sur la police avec empattement standard) et la couleur sur la valeur hexadécimale 4f4f4f (gris foncé).
Modifiez les valeurs des champs taille de la police, famille de la police, et couleur en fonction de vos préférences.
Pour donner un style au texte d'un élément particulier plutôt que pour l'ensemble du bordereau d'expédition, ajoutez l'attribut de style à la balise de l'élément que vous souhaitez styliser (cet exemple ajoute les mêmes options de texte que ci-dessus à la balise <p> pour le message du bordereau d'expédition) :
<p align="center" style="font-size:14px; font-family: Georgia, serif; color: #4f4f4f">[Message du bordereau d'expédition]</p>
Pour ce faire, ajoutez le texte en caractères gras de l'exemple ci-dessus à votre code de bordereau d'expédition et modifiez les valeurs de chaque style selon vos besoins.
Pour créer la police dans l'exemple ci-dessus en caractères gras, ajoutez simplement la propriété poids de la police à l'attribut de style :
style="font-size:14px; font-weight: bold; font-family: Georgia, serif; color: #4f4f4f"
Vous pouvez ajouter de nombreuses paires propriété et valeur aux balises de style, qu'elles soient en ligne pour un seul élément ou entre les balises <style> à la tête du code de bordereau d'expédition, pour obtenir l'effet désiré.
Voici les ajouts les plus populaires à un attribut de style :
-
Caractères gras
font-weight: bold;
-
Italique
font-style: italic;
-
Soulignement
text-decoration: underline;
-
Ajoutez une couleur de surbrillance à l'arrière-plan du texte
background-color: yellow;
-
Changez la couleur du texte en rouge
color: red;
-
Changez la taille de la police en 18 points
font-size: 18pt;
Pour modifier du texte dans un élément, sans changer tout son texte, vous devez ajouter des balises <span>.
Par exemple, il est possible de mettre le texte « 30 days » de cette phrase en rouge avec une couleur de surbrillance jaune et en italique, sans modifier le texte environnant.
Voici à quoi pourrait ressembler le bas de page votre bordereau d'expédition de commande :
<p align="center" style="font-weight: bold; font-size: 11px">Return items within <span style="font-style: italic; text-decoration: underline; background-color: yellow; color: red;">30 days</span> for a full refund.</p>
Pour en savoir plus sur la façon de personnaliser les éléments de texte comme celui-ci, consultez les pages du didacticiel HTML et CSS de W3Schools ou de Mozilla Developer Network.