Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Conor

Conor Avatar

*****
ProNation

2,178


July 2007
This is for those of you who have no clue how to use CSS. Seriously, look how easy it is.

<style type="text/css">
a:hover {
text-decoration: none;
color: #000000;
}
</style>

<style type="text/css"> This starts the code. Without it, it will just appear as text.

a:hover This indicates what you are going to be editing through CSS.

{} This pretty much the capsule where all the editing goes. (for lack of a better name)

text-decoration: Is the decoration of the link when you roll over it.

none This means there will be no decoration. No underline, no bold, no nothing.

color: This tells what color the text will be when you roll over it.

#000000 Hex code for black. When the link is rolled over with a mouse, it will turn black.

; In order not to confuse the computer, a semi-colon is required after each edit, to tell the computer that that line is finished.

</style> This finishes the code. Without this, it will just appear as text.


Last Edit: Aug 3, 2009 1:12:37 GMT by Conor

Justin

Justin Avatar
:)

****
Senior Member

256


July 2009
Thanks so much Conor (Notice i didnt say cornor :P) his was easily explained, and helped me even.


My signature
[/left][/i][/size]

Josh

Josh Avatar
Where were you when Reach fell?

******
Legendary Studio Member

4,806


May 2008
Good beginners tutorial. Only problem is you didn't use my favored formatting style. :P

<style type="text/css">
a:hover {
text-decoration: none;
color: #000000;
}
</style>


I like each modifier on a separate line and then tabbed once over. :P Fucking Proboards won't let me manually add the spaces in. ><

Fredy Sucks Donkey Ass. Big. Donkey. Ass.


Last Edit: Jul 31, 2009 4:55:13 GMT by Josh

~Memzak~

~Memzak~ Avatar
Inquire never, so always need elephants.

****
Senior Member

408


May 2009
<style type="text/css">
a:hover {
text-decoration: none;
color: #000000;
}
</style>

so does this make any link you hover over, go black? or any other color you'd like?

I know this would be an easy basic thing for most coders but how do you make it bold, italic, unerlined, strikethrough or blinking? or make it only work for a certain word?

Since I am a real beginner this would be helpful...




Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
Preceding the {} blocks you have your selector (in this case "a:hover"). Your selector signifies what elements of the page the styling applies to. In this case "text-decoration: none" and "color: #000000" apply to every "a:hover" (rollover link).

www.devguru.com/technologies/css2/home.asp

a { color: #000000 }
.a { font-style: italic }
#a { text-decoration: overline }

Your basic selectors. Standard text represents a tag name. Text with a preceding . identifies a class name. Text with a preceding # identifies an id.

<a href="http://www.google.com/">Google</a>
<a class="a" href="http://www.google.com/">Google</a>
<a id="a" href="http://www.google.com/">Google</a>

Conor

Conor Avatar

*****
ProNation

2,178


July 2007
Josh Avatar
Good beginners tutorial. Only problem is you didn't use my favored formatting style. :P

<style type="text/css">
a:hover {
text-decoration: none;
color: #000000;
}
</style>


I like each modifier on a separate line and then tabbed once over. :P Fucking Proboards won't let me manually add the spaces in. ><

Fredy Sucks Donkey Ass. Big. Donkey. Ass.


Happy? :-*

Parker

Parker Avatar



453


February 2009
Aaron Avatar
Preceding the {} blocks you have your selector (in this case "a:hover"). Your selector signifies what elements of the page the styling applies to. In this case "text-decoration: none" and "color: #000000" apply to every "a:hover" (rollover link).

www.devguru.com/technologies/css2/home.asp

a { color: #000000 }
.a { font-style: italic }
#a { text-decoration: overline }

Your basic selectors. Standard text represents a tag name. Text with a preceding . identifies a class name. Text with a preceding # identifies an id.

<a href="www.google.com/">Google</a>
<a class="a" href="www.google.com/">Google</a>
<a id="a" href="www.google.com/">Google</a>


So if you wanted a link to say
Click here
and for it to be in Orange how would you do that?

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
<style type="text/css">
#lnk { color: #FF7F00 }
</style>
<a id="lnk" href="http://www.google.com">Google</a>

Or

<a href="http://www.google.com" style="color: #FF7F00">Google</a>

~Memzak~

~Memzak~ Avatar
Inquire never, so always need elephants.

****
Senior Member

408


May 2009
Ok, I have been experimenting with CSS now and I was wondering...

<style type="text/css">
a:hover {
text-decoration: overline;
color: #FF9999;
}
</style>


How would you add another decoration?

text-decoration: overline; bold;

Like that?
Or this?

text-decoration: overline;
text-decoration: bold;

Or this?

text-decoration: overline, bold;


How would I do it?




GGoodie

GGoodie Avatar

*
New Member

24


August 2009
Well, bold isn't text-decoration, it's font-weight, :P

But, to answer your question, you would do it like this:

.blah { text-decoration: overline underline; }
(only separate with a space, not a comma or semi-colon)

~Memzak~

~Memzak~ Avatar
Inquire never, so always need elephants.

****
Senior Member

408


May 2009
Oh, that's simple. Silly me.

Thanks Ggoodie! (I'm surprised I never knew you came to studio :D)

Anyways, I've just been fiddling around with things and I think I'm getting the hang of it.




Mini Coder

Mini Coder Avatar

*
New Member

13


July 2011
Should I use a texteditor for this?
I don't understand, like this?

<style type="text/css">
a:hover {
text=decoration: none;
color: #FFFFFF
}
</style>
<a id="lnk"href="http://www.portalfangroup.proboards.com/">Portal Fan Group</a>


Last Edit: Jul 27, 2011 19:07:27 GMT by Mini Coder
My Forum
I came here to learn how to code for my forum and to share with others[/b]

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
Mini Coder Avatar
Should I use a texteditor for this?
I don't understand, like this?

<style type="text/css">
a:hover {
text=decoration: none;
color: #FFFFFF
}
</style>
<a id="lnk"href="www.portalfangroup.proboards.com/">Portal Fan Group</a>


Care to elaborate on what you were doing? It might help us. That should correctly color the link white on hover.

newBookmarkLockedFalling