CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Styling Links and Link Generators

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Each different style of link colors need to have their
own class name wsnextlink1 to wsnextlink2 for example

<style type="text/css">
a.wsnextlink1:link{text-decoration:underline; color:#2a5db0;}
a.wsnextlink1:visited{text-decoration:underline; color:#560080;}
a.wsnextlink1:hover{text-decoration:underline; color:#800000;}
</style>

The generated code for "Inside HEAD"

On the "Html tab" in "Insert Page HTML"
Copy/Paste the code in the
HEAD

You put your text on the page and add your link like you always do then:

The generated class for the "anchor tag"

Select your text and on the TEXT tab in "Clipboard" select "edit HTML" put the class in the link like this:

<P>
<A class=wsnextlink1 href="yourlink.html">your link</A>
</P>

between the A and the href

class=wsnextlink1

CSS Link Style in Web Studio

LINKS IN WEB STUDIO
Web Studio has an option to change the link colors for everything on your page but
more often than not you want to use a few different style of links.
To do that you use CSS with a class which can be used multiple times on a page or website.

To see the step by step tutorial for making and doing more with links see this page

Select an underline option and a color for each type of link
Each style of link used on a page or website needs it's own name, select a number if you use 2 or more.

Text Link Generator

Press generate to update the code before you copy

Customize the Link Example background

border size:
1 2 3 4
border color:
background color:

Normal Link

underline:
Yes No

Visited Link

underline:
Yes No

Hover Link

underline:
Yes No

Class Name

each link style needs it's own number:
1 2 3 4 5 6 7
link color:
link color:
link color:

Preview to see your new text links colors the links without the class will use web studio link colors

Select the normal / visited options and the hover options for your links
Each style of link used on a page or website needs it's own class name, select a number if you use 2 or more.

Text Box/Flat Button Link Generator

Each different style of link colors need to have their
own class name wsnextboxlink1 to wsnextboxlink2 for example

<style type="text/css">
a.wsnextboxlink1:link,a.wsnextboxlink1:visited{ display:block; width:100%; padding:1px; text-decoration:none; text-align:center; border-style:solid;
border-width:1px;
border-color:#b0b581;
color:#b0b581;
background-color: #2a323a;
border-radius:4px;}
a.wsnextboxlink1:hover {
border-color:#f4f4ed;
color:#ced1b1;
background-color: #384d5d;}
</style>

between the A and the href

Preview to see your new text links colors the links without the class will use web studio link colors

The generated code for "Inside HEAD"

On the "Html tab" in "Insert Page HTML"
Copy/Paste the code in the
HEAD

You put your text on the page and add your link like you always do then:

The generated class for the "anchor tag"

Select your text and on the TEXT tab in "Clipboard" select "edit HTML" put the class in the link like this:

<P>
<A class=wsnextboxlink1 href="yourlink.html">your link</A>
</P>

class=wsnextboxlink1

Normal / Visited Link

border size:
0 1 2 3

Hover Link

Customize Example background & Text Size

font size:
10 12 13 14
border color:
background color:

Class Name

each link style needs it's own number:
1 2 3 4 5 6 7

Press generate to update the code before you copy

background color:
text color:
border color:
radius size:
sq 4px 6px 8px 10px 12px
background color:
text color:
border color:

CSS in Web Studio 5 - Link CSS style and Link Generator for web studio - by Web Studio Next

Thank-you

aaaaaaaaaaaaiii