To style all text in the packing slip the same way, go to the Packing Slip Template in your template settings and add the following code to the beginning of the Order Header section:
<style>
* {
font-size:14px;
font-family: Georgia, serif;
color: #4f4f4f;
}
</style>
The * is a global selector. The above code sets the size for all text in the packing slip to 14px, the font to Georgia (or, if Georgia is not an available font, to the standard serif font), and the color to the hex value 4f4f4f (dark grey).
Change the values for the font-size, font-family, and color to the values you prefer.
To style the text for just a specific element, instead of the entire packing slip, add the style attribute to the element tag you wish to style (this example adds the same text options as above to the <p> tag for the packing slip message):
<p align="center" style="font-size:14px; font-family: Georgia, serif; color: #4f4f4f">[Packing Slip Message]</p>
To accomplish this, add the bold text from the example above to your packing slip code and change the values for each style as needed.
To make the font in the above example bold, just add the font-weight property to the style attribute:
style="font-size:14px; font-weight: bold; font-family: Georgia, serif; color: #4f4f4f"
You can add many property-and-value pairs to style tags, whether inline for a single element or between <style> tags at the head of the packing slip code, to get your desire effect.
Here are the most popular additions to a style attribute:
-
Bold
font-weight: bold;
-
Italicize
font-style: italic;
-
Underline
text-decoration: underline;
-
Add a highlight color to the background of the text
background-color: yellow;
-
Change text color to red
color: red;
-
Change the font size to 18 point
font-size: 18pt;
To modify some text in an element, but not all the text in an element, you must add <span> tags.
For example, make the text "30 days" in this example sentence to red with a yellow highlight color and italicized, but keep the surrounding text the same.
Here is how this should look in your packing slip Order Footer section:
<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>
To learn more ways you can style text elements like this, visit the W3Schools or Mozilla Developer Network HTML & CSS tutorial pages.