HTML Tag Shortcuts: Inline Styling in HTML to overwrite CSS
Occasionally, when formatting a webpage you may encounter issues, such as CSS styling overwriting page styling, front end editors being disabled or visual composers simply not working. If and when this happens the following HTML code can be very useful in formatting text and images manually in the text file or text editor.
Some of these first tags you will likely be familiar with, such as the bold and italics tags:
– Bold HTML tags – <b> or <strong> – Bold text (the <strong> tag makes the text appear in bold, whilst also adding semantic importance to the defined text)
– Italic HTML tags<i> or <em> – Italic text (the <em> tag makes the text appear in italics, whilst also adding semantic importance to the defined text)
HTML Header Tags
Header tags are useful for sectioning up your articles and pages, and help optimise pages for SEO:
– Header HTML tags – <h1>/<h2>/<h3> – these make the text appear as a heading, decreasing in size as their number increases
More Formatting Tags
Here are some other useful text mark-up tags:
– <mark> – Marks/highlights the text
– <small> – Makes the text appear small
– <del> – Deletes or strikes through the text
– <ins> – Underlines text, referred to as inserted text
– <sub> – Subscript text
– <sup> – Superscript text
The above tags should all be wrapped around the text they intend to style, ending in a closing tag (eg. </bold> </h1> </sub>).
Margin Indent Tags, Text Align and Image Align HTML Tags
Moving objects and text around a page is also incredibly useful if you find the usual page formatting incorrect or in need of editing.
– Margin indent HTML code – style=”margin-left: 40px” – indents chosen text or items by the pixel width specified (can replace ‘left’ with ‘right’, ’top’, ‘bottom’ or simply use ‘margin:’ to affect all aspects)
– Align HTML code – style=”text-align:center;” – aligns chosen text to the left, centre or right, as specified (can replace ‘center’ with ‘left’ and ‘right’)
– Image align HTML code – align=”middle” – align code for images (can replace ‘middle’ with ‘left’ and ‘right’)
How to implement ‘style=’ HTML tags
These codes should be placed within the first tag that contains the text or element that you want to affect as follows:
More useful style= tags: Manually changing fonts and text size
Lastly, some final formatting, which should be placed as the style tags above have been, within the first tag of the element you wish to affect. Alternatively, you can affect select pieces of text by placing them within a set of <div> tags, and placing this style formatting within the opening <div> tag.
– Text font HTML code – style=”font-family:verdana;” – styles the text font
– Text size HTML code – style=”font-size:180%;” – styles the text size
We hope you found this article useful, and happy editing!