Problem with link style

jayaramgussy · #1 Jul 11th, 2007, 13:12

Hi,
I have created a HTML with stylesheet

<style>
    #button {
width:50px;
}
    .button
{
background-color :EC870E;
FONT-SIZE: 8pt;
color: #FFFFFF;
FONT-FAMILY: Arial, Helvetica, Sans-Serif;
font-weight: bold;
height : 16pt;
}
.contentBody
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Arial, Helvetica, sans-serif
}
.LegendText
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Arial, Helvetica, Sans-Serif;
}
.FormMargin
{
     margin-right: 10px;
    margin-left: 10px;
 }
    </style>

and i am using class to call this styles. its working fine.
But My friend says to create same look & feel without style tags.
So, i have removed CSS codings. and alternatively i have used:

Code: Select all

<table title="Related Links" width="185" border="0" cellpadding="0" cellspacing="0" Style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 0.1em; BORDER-TOP: #666666 1px solid;
    PADDING-LEFT: 0.1em; FONT-SIZE: 8pt; PADDING-BOTTOM: 0.1em; BORDER-LEFT: #666666 1px solid; COLOR: #000000; PADDING-TOP: 0.1em; BORDER-BOTTOM: #666666 1px solid; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #efefef;">


<font style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif" >Welcome to my site</font>

These also working fine.

But how can use the following CSS codings and where can i use it?

Code: Select all

A:link
{
    COLOR: #006fa6;
    TEXT-DECORATION: underline
}
A:visited
{
    COLOR: #006fa6;
    TEXT-DECORATION: underline
}
A:active
{
    COLOR: #45adc6;
    TEXT-DECORATION: underline
}
A:hover
{
    COLOR: #45adc6;
    TEXT-DECORATION: underline
}

Please give me your valuable solutions.

Thanks

Pádraig · #2 Jul 11th, 2007, 13:43

I just had a quick look.

Your link styles should be like this:

Code: Select all

a:link { }

a:hover {}

AND NOT

Code: Select all

A:link { }
A:hover { }

You put the CSS within the <head> tags, inside these tags... <style type="text/css"> </style>

karinne · #3 Jul 11th, 2007, 13:48

That post is a bit confusing but the

Code: Select all

A:link
{
    COLOR: #006fa6;
    TEXT-DECORATION: underline
}
A:visited
{
    COLOR: #006fa6;
    TEXT-DECORATION: underline
}
A:active
{
    COLOR: #45adc6;
    TEXT-DECORATION: underline
}
A:hover
{
    COLOR: #45adc6;
    TEXT-DECORATION: underline
}

is for styling links. So ... in your HTML just a simple link is all it takes.

Also ... like Padraig said, EVERYTHING SHOULD be in lowercase.

You might want to have a look at some tutorials from HTMLDog.

pa007 · #4 Jul 11th, 2007, 14:36

Every line/command/whatever they're called in css must end with a semi-colon( ; ) too. If you miss them out it could mess everything up.

Pete.

karinne · #5 Jul 11th, 2007, 14:41

Oh yes ... although the last line (before the closing } ) does not need a semi-colon( ; ) it's always good practice to just add it.

jayaramgussy · #6 Jul 12th, 2007, 11:08

Thanks for your suggestion.

I need to use the following CSS codings inside the HTML tags
a:link { COLOR: #006fa6;}
a:visited{ COLOR: #006fa6;}
a:active{ COLOR: #45adc6; }
a:hover{ COLOR: #45adc6;}

Methode one to use the styles
<style>
.BodyText
{
FONT-FAMILY: Arial;
FONT-SIZE: 10pt
FONT-COLOR: #3e63ef;
}
</style>
then we can call this style
<font class="BodyText">Hai</font>

or
Methode Two to use the styles
We can directly give the styles to particular text area
<font style="FONT-FAMILY: Arial; FONT-SIZE: 10pt"> Hai</font>

I need to use a.link styles in the Method two way.

hschmitz · #7 Jul 12th, 2007, 12:04

Quote:

Originally Posted by jayaramgussy

I need to use a.link styles in the Method two way.

AFAIK there is no way of doing that.

And why do you want to do it. The first section of the "CSS Techniques for Web Content Accessibility Guidelines" on the W3C website reads:
Use a minimal number of style sheets for your site
Use linked style sheets rather than embedded styles, and avoid inline style sheets.

karinne · #8 Jul 12th, 2007, 12:25

First of all the font element is deprecated so ... forget about using that.

If you want to apply a different color to certain links, then look at the CSS Beginner FAQ that a sticky in this section. There's one question "How do I get some links to look different than other links"

I think that's what you are looking for.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Adding a style sheet to an RSS feed problem	Andrew1986	Other Programming Languages	5	Feb 19th, 2008 10:31
<li> problem :: How to make appear list-style-image while choosing display:inline	sayamish	Web Page Design	2	Oct 21st, 2007 05:19
CSS Print Style Sheet Problem	bennyboy7	Web Page Design	1	Aug 14th, 2007 08:58
How to tell IE7 to use a pariticular style in a single style sheet	figo2476	Web Page Design	5	May 25th, 2007 14:23

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Problem with link style