{"id":657,"date":"2023-06-07T10:05:01","date_gmt":"2023-06-07T10:05:01","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2023\/06\/07\/7986905-hostinger-website-builder-how-to-customize-your-website-s-design-using-code\/"},"modified":"2025-08-28T11:14:58","modified_gmt":"2025-08-28T11:14:58","slug":"7986905-hostinger-website-builder-how-to-customize-your-website-s-design-using-code","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/7986905-hostinger-website-builder-how-to-customize-your-website-s-design-using-code\/","title":{"rendered":"Hostinger Website Builder: How to Customize Your Website\u2019s Design Using Code"},"content":{"rendered":"

You can style almost any element on your website by adding custom CSS<\/a><\/b> to the <head><\/head><\/a><\/b> part of your website’s code.<\/p>

CSS (Cascading Style Sheets)<\/a><\/b> 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.<\/p>

\n

As Hostinger Website Builder<\/a><\/b> is the best compatible with Google Chrome<\/a><\/b>, the below instruction applies when using this particular internet browser 💡<\/p>\n<\/div>

Firstly, inspect the code of your website:<\/p>

    \n
  1. \n

    Open your website in a new browser tab<\/p>\n<\/li>\n

  2. \n

    Right-click on the screen, and select Inspect<\/b>:<\/p>\n<\/li>\n<\/ol>

    \"A<\/div>

    It will open the Chrome DevTools<\/a><\/b> menu:<\/p>

      \n
    1. \n

      Open the Elements<\/b> tab <\/b><\/p>\n<\/li>\n

    2. \n

      Click on the selector icon<\/b> – it allows you to select any element on the page and inspect it.<\/p>\n<\/li>\n

    3. \n

      After clicking on the selector icon, click on the element\/section within your webpage that you want to modify<\/p>\n

      \n<\/p><\/li>\n<\/ol>

      In this example, we’ll change the font color of the phrase This field is required<\/i> that’s visible if somebody tries submitting a contact form without filling in the required fields:<\/p>

      <\/div>

      Once you click on the element, you will see its CSS code under the Styles <\/b>tab. You can expand and zoom into that section to see it better:<\/p>

      <\/div>

      You can edit the attributes on the spot for testing. For example, the property that’s responsible for the text color is color<\/a> <\/b>(click the link to learn about many other properties). It looks something like color: red;<\/code> <\/b>in the code:<\/p>

      <\/div>

      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:<\/p>

      <\/div>

      To apply this change on your website, follow the steps below:<\/p>

      1. After selecting the element with the selector tool, find the Styles tab<\/b> (1) and click on the plus + button<\/b> (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<\/code><\/b>:<\/p>

      <\/div>

      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;<\/code><\/b>:<\/p>

      <\/div>

      3. Write a simple line of <style><\/style><\/b> code that combines everything together (element + the adjustment we want to apply to the element).<\/p>

      <style>.the element {attribute: value !important;} <\/style><\/code><\/b><\/p>

      In our example, the code would be:<\/p>

      <style>.p.input__error-message.z-body-small {color: red !important;} <\/style><\/code><\/b><\/p>

      4. Once you have the code, open your website’s integrations settings and paste the code in the Custom code<\/a> <\/b>field. Save the code and update your website<\/a><\/b> for the changes to reflect online.<\/p>

      NOTE<\/b><\/p>