HTML Tags and CSS Styling

When editing text on your store, such as a product description or a non-product page in the Manage > Pages section, you can view the HTML code for the text by clicking the TOOLS > SOURCE CODE toolbar option in the editor. You can then edit the code directly to add or change the layout and styles.

In this guide, we'll take a look at a few common HTML tags and styles and see how they can be integrated into your store:

<br /> - Line Break
This BR tag can be used to insert a line break into a section of text. For example, please take a look at the following section of code, noting the BR in the middle of the text:



The above code would display the following text on your store:



For further information, please see the following page: http://www.w3schools.com/tags/tag_br.asp.

<p> & </p> - Paragraph Tags
The P tag can be used to break up your paragraphs. Paragraph Tags automatically insert a double line break between sections of text. Please note that Paragraphs require an opening <p> tag and a closing </p> tag to surround each paragraph. For example:



This code would display the following text on your store:



For further information, please see the following page: http://www.w3schools.com/tags/tag_p.asp.

style="" - CSS Style Attributes
Most HTML tags can have multiple CSS Styles associated with them. These can be used to alter the default behaviour of a particular element, such as changing the colour of text or adding extra spacing around a paragraph. To add CSS Styles to an HTML tag, you need to use the style="" attribute. For example:



Note the color:red; part (and, also, the Amercican-English spelling of the word "color"). This turns whatever text is within the P tag red. The text would display as follows on your store:



You can include names of colours in the color attribute, such as "red", "blue", "green" and "white", or enter Hexadecimal Colour Codes.

For further information, please see the Inline Styles section of the following page: http://www.w3schools.com/css/css_howto.asp.

<span> & </span> - Span Tags
By default, the Span tag does not add any style or make any changes to the layout of text, however, it can be used to style specific sections of text using CSS Style Attributes. This can be used to add colour to certain parts of text, or perhaps change the alignment. For example:



This code would display the following text on your store:


This is the fourth code example.

For further information on any of this, we recommend you take a look through the HTML and CSS help available at http://www.w3schools.com.