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.

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 our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

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

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2060
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5392

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

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!