Changing the colour of your text using code is simple and straightforward to tech geeks, but for those who are just beginning with websites and coding it can be a little tricky. Whether your modifying your business website, starting from scratch or starting your own personal blog, these tips will help you change the colour of your text.
Surrounding HTML Element of Text
To successfully change the colour, size, or anything else of the text in hand, you must find out what HTML elements your text is surrounded by.
Example HTML Elements
- H1 – H6 -Used for Headings
- P – Paragraphs
- span – inline element used for styling
- div – used for block elements
H1 – <h1>Heading</h1>
P – <p>Paragraph</p>
SPAN – <span>inline element</span>
DIV – <div>block element</div>
Find out whether the text is surrounded by one of the above. If your text is not surrounded by anything, or is surrounded by a different element, don’t stress, read on.
If your text is not surrounded by anything add one of the above elements around it, making sure to include the <opening> tag aswell as the </closing> tag.
Whatever your text is surrounded by, keep reading to learn how to modify it’s formatting.
Each element can have an identifier to reference a class or id. These classes or id’s can then be given styling information for the HTML page to process. If your text has <h1> you can add a custom style to that h1.
Example: <h1 class=”custom-style”>My Heading</h1>
Class can be re-used as much as you want.
Another Examaple: <h1 id=”unique-style”>My Heading</h1>
ID “unique-style” can only be used once per page. It has to be unique.
Cascading Style Sheets (CSS)
Cascading Style sheets are used for storing the style information of a page. A css file will usually be called style.css and be referenced by a html page in it’s head tag. CSS files are external.
<link rel=’stylesheet’ href=’https://www.exampledomain.com.au/style.css’ type=’text/css’ media=’all’ />
Example contents of style.css:
Adding the code above to the style.css file and referencing the file using the <link> tag in the head of the page will change to colour of each element.
Inline Styles are normally used withing the current HTML page without needing to reference an external file. You can include Styles anywhere on the page.
This code will change the colors for both elements using an inline style.
I hope you found this article helpful, please add any suggestions, questions or comments below.