LINKS

CSS link styling



If you are not familiar with web studio refer to the instruction page

Different links colors on the same page







We do that with CSS and use what is called a "class"
This isn't too difficult but it may look overwhelming to a beginner.

Using web studio to add the link coding

Open web studio and add a page so you have two pages

Add a link

On page 1 add a text object and type "page 2" select it and link it to page 2
On the Text tab in Links use Page Link and select page 2

Use edit HTML to Look at the link

Still on Text tab with the text selected click on edit html in clipboard and you'll see this:

<A href= A means Anchor and href hypertext reference "stuff" is the actual link
(name web studio adds) page 2 is the text you see, then </A> is needed to close it.

We'll use edit HTML again to add the class to the link

Select your text, in the TEXT tab once again click on "edit HTML" in clipboard
and type in the class
<A class=next href="yourlink" ...

class=next "next" is the name of the class.
Each link you want to look like this you would use that name.

The style is how the link looks, it is css and we add it to the HEAD

Go to the HTML tab click on "Inside HEAD" in Insert Page HTML
Paste this code Inside Head

Preview your page

Go to the HEAD again and let's look at the coding

What is doing what?

3| Link - a normal, unvisited link {the color is dark green and no underlines}
4| Visited - a link the user has visited {the color stays dark green}
5| Hover - a link when the user mouses over it {the color changes to dark slate gray and is underlined}
6| Active - a link the moment it is clicked {the color changes to dim gray and is underlined}


Active is conditional so you don't need to use it in your links.
To work properly in all browsers the link codes need to be in that order
a good way to remember is LoVe HAte

So let's actually do one and look at what does what, open web studio and follow along.

Changing how the links look

We make changes to way our links look with the style in the HEAD

Changing the link colors

Look at the link style in the HEAD

a.next:link { color: DarkGreen; text-decoration: none;}

See where it says color: DarkGreen; you can change DarkGreen to any color name or HEX number
You can do that for any link type, let's make it maroon the HEX for that is #800000

a.next:link { color: #800000; text-decoration: none;}

This is the color chart I use all the time, it has colors by name or by hex.
COLOR CHART

Changing the link underlines

Look at the link style in the HEAD

a.next:link { color: DarkGreen; text-decoration: none;}

See where it says text-decoration: none; For underlined links you use
underline and for no underline you use none
a.next:link { color: DarkGreen; text-decoration: underline;}

For different link colors you add a new style and use a different class name

You can combine them into one style but for the sake of simplicity
let's just add another style to the HEAD just like the first time.

Paste this code Inside Head for the second set of link colors

See in this style how we used a different name ".next2" for the class?
The dot by the way is what actually makes it a "class" when inside the style tags

A different class name in the link

For the first link we used "next" for the class
<A class=next href="page 2" ...
Add another link to Page 2 the same way as the first time
but when you edit HTML this time name the class "next2"
<A class=next2 href="page 2" ...

Now when you Preview your page


and
This is how the link with class=next2 will look

Changing the link background color

You can also change the background colors by adding background-color: Gold;
like this
a.next3:link { color: Black; text-decoration: none; background-color:Gold;}

Paste this code Inside Head for the added background color

For this one use another link with the class <A class=next3 href="page 2" ...
and this is how the the class=next3 link with a background color that changes

Making a linked box

The links will be as wide as your text object, look like a button
with a border and the entire box will be linked

Paste this code Inside Head

I put some notes in this one in the HEAD where you can change the colors.

For this one use this class <A class=next4 href="page 2" ...

Home

This is the method I use quite often for menus for web sites

Let's change the look of the one you have open for the tutorial.

More effects you can do with links

Let's look at some other things we can do with links we'll add these to our first example

While you have the tutorial open we'll add some more css to the style tag.

Links with underlines and overlines

We'll just add some css to our first example so we don't need to change the class name

Adding underline and overline to hover

a.next:hover { color:DarkGreen; text-decoration:underline;}

See where it says text-decoration:underline; you add overline inside that so it looks like this

a.next:hover { color:DarkGreen; text-decoration:underline overline;}
You can do that for any link type

This is how this link looks now

Links change to bold font

We'll just add some css to our first example so we don't need to change the class name

Adding bold to hover

a.next:hover { color:DarkGreen; text-decoration:underline;}

In this case we add a line font-weight:bold; to the end before the bracket } so it looks like this

a.next:hover { color:DarkGreen; text-decoration:underline; font-weight:bold;}
You can do that for any link type

This is how this link looks now

Links change to a larger font

We'll just add some css to our first example so we don't need to change the class name

Adding the font change on hover

a.next:hover { color:DarkGreen; text-decoration:underline;}

In this case we add a line font-size:20px; to the end before the bracket } so it looks like this

a.next:hover { color:DarkGreen; text-decoration:underline; font-size:20px;}
You can do that for any link type

This is how this link looks now

Link Icons

Sometimes you may have a link that could use an icon like a PDF download, Facebook link
or in this case a pretend twitter link with a little bird that flashes you.

We'll add a new style to the HEAD and this time use "icon" for the class name in the link
Paste this code Inside Head

The Icon Images

So you can follow along right click and save this as on.png and this as off.png
Attach those to website properties

When you make your own icons make them around 20px, you could use only one image too

The Code


In this part background:url (off.png) left center no-repeat; padding-left:20px;}
You change off.png or on.png to your images name and attach it to website properties,
and 20px is the room to the left of your text

The Twitter Flasher

Using "footer links" as a menu

This isn't perfect but it's quick and easy to do and super duper tiny, only a couple of lines of code
We'll add a new style to the HEAD and this time we'll take advantage of a web studio,
it wraps the footer links with an out dated <center> tag that we'll change with some css

Paste this code Inside Head

Insert "footer links"

In the insert tab select Footer Links in Links
That's all there is to it insta-menu, preview to see it work.

You can use "edit HTML" to change any of the text in the links I like to delete the | bars

The Code


In the HEAD you can change any of the colors for the look you want.
The font size, type and the over all width you do with web studio.

Untitled 1 | I changed this text Untitled 3 | Untitled 4 | Your Page Names

Every little bit helps to keep this site up and running, thank-you.





Web Studio Next

Thank-you!

These effects are not officially part of Web Studio
If you have questions see the custom coding page

aaaaaaaaaaaaiii