You can style almost any element on your website by adding custom CSS to the <head></head> part of your website's code.
CSS (Cascading Style Sheets) is a style sheet language used for describing how your website elements look and behave. It defines the location, size, color, opacity, font, and other stylistic features of various components within a website. You can edit the CSS of your website by editing already existing CSS styles.
As Hostinger Website Builder is the best compatible with Google Chrome, the below instruction applies when using this particular internet browser 💡
Firstly, inspect the code of your website:
Open your website in a new browser tab
Right-click on the screen, and select Inspect:
It will open the Chrome DevTools menu:
Open the Elements tab
Click on the selector icon – it allows you to select any element on the page and inspect it.
After clicking on the selector icon, click on the element/section within your webpage that you want to modify
In this example, we'll change the font color of the phrase This field is required that's visible if somebody tries submitting a contact form without filling in the required fields:
Once you click on the element, you will see its CSS code under the Styles tab. You can expand and zoom into that section to see it better:
You can edit the attributes on the spot for testing. For example, the property that's responsible for the text color is color (click the link to learn about many other properties). It looks something like color: red; in the code:
To make changes to the text color, simply delete the existing color value and insert whatever color you like instead. You can also similarly change other properties, e.g., the background color:
To apply this change on your website, follow the steps below:
1. After selecting the element with the selector tool, find the Styles tab (1) and click on the plus + button (2) – it will generate a fragment of code that you'll need to use while making changes. In our example, it's p.input__error-message.z-body-small:
2. Specify the particular attribute (e.g., color, background-color, etc.) and specify the preferred value (e.g., red, blue, green, aquamarine, etc.). In our example, it's color: red;:
3. Write a simple line of <style></style> code that combines everything together (element + the adjustment we want to apply to the element).
<style>.the element {attribute: value !important;} </style>
In our example, the code would be:
<style>.p.input__error-message.z-body-small {color: red !important;} </style>
4. Once you have the code, open your website's integrations settings and paste the code in the Custom code field. Save the code and update your website for the changes to reflect online.
NOTE
The custom changes won't be visible in the editor, they will only reflect online