Adding Inline CSS to links in the Builder

As you progress through creating your Premium Web Builder site, you may need to add code to your links to style them in a way the WYSIWYG editor cannot. The “Insert/Edit Link” function allows links to be styled with your own “Inline CSS code“. The Advanced tab allows for you to add “Inline” styles to each link. This tutorial will explain how to change the style of your links using the advanced style in the premium Web Builder.

Adding custom CSS to a link

  1. Log into the web builder.
  2. Insert Edit link in the Premium Web Builder

    Highlight the text you want to change the CSS for and select Insert/Edit Link.

  3. Add the URL to the link Premium Web Builder

    Add the link url in the URL box.

  4. Click teh advanced tab Premium Web Builder

    Click the Advanced tab.

  5. Change teh CSS color Premium Web Builder

    Under the Style box, type the CSS code you want to use. In this example we are changing the color of the link to red. The following code is used:

    color: #ff0000;

    Click OK.

    View of Color change Premium Web Builder

    Now the Text is red and its a link. Now we will get rid of the underline.

  6. Adding more than one CSS stye inline Premium Web Builder

    Highlight the text again and select Insert/Edit link. On the advanced tab, add the following code to the color CSS code like as follows:

    color: #ff0000;text-decoration: none;

    Click OK.

    Final view of style added Premium Web Builder

    Now the text is red and the underline is gone.

You can add CSS styles one after another to create your own CSS style. For more information on CSS please see our tutorial on Using & Understanding CSS – Website Design 203.

Was this article helpful? Let us know!