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 BuilderHighlight the text you want to change the CSS for and select Insert/Edit Link.
  3. Add the URL to the link Premium Web BuilderAdd the link url in the URL box.
  4. Click teh advanced tab Premium Web BuilderClick the Advanced tab.
  5. Change teh CSS color Premium Web BuilderUnder 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 BuilderNow 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 BuilderHighlight 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 BuilderNow 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.

Continued Education in Course 103: Linking in the Premium Web Builder
You are viewing Section 4: Adding Inline CSS to links in the Builder
Section 3: Adding links to your pages in the sidebar of the Builder
Section 5: How do I remove links in my builder menu?
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!