Jump to content

default font settings for links


yoshida
 Share

Recommended Posts

Hi. I'm creating a default css page for my new website. Right now it looks like this:

body {     background: #f9f9ff;     text-align: center;     border: 0;     padding: 0;}#defaultpage {     background: #ddddaa;     border-style: dotted;     border-width: 1;     color: #444444;     font-family: sans-serif;     font-weight: bold;     text-align: left;     width: 80%;     height: auto;     margin-left: auto;     margin-right: auto;     margin-top: auto;     margin-bottom: auto;}

Pretty self explaining.But how do I make the following happen by default?

<a href="somepage.html" style="text-decoration:none" onFocus="if(this.blur)this.blur()"><font color=#222299 onMouseOver="color='#cc7700'" onMouseOut="color='#222299'">somelink</font></a>

Some explaining: the default color for all text is dark grey. That's set in the CSS. When I define a link, I'd like it to be blue, bold, with no underline, and change to orange when I hover the mouse over it (still with no line). Once I click it, I don't want a box to appear around it as you would normally have (that's the "if(this.blur)this.blur()" in action). And I want all those things to happen by default once I create a link. It would be no problem for me to define my own new html tag, (something like <link=somepage.html>somelink</link> and define the options for that tag) but I'm pretty new at this.Any help would be great. Happy hollidays.

Link to comment
Share on other sites

A:link {text-decoration: none; color:#0000FF;}A:visited {text-decoration: none; color:#0000FF;}A:active {text-decoration: none; color:#FF9900;}A:hover {text-decoration: none; color:#FF9900;}will give you all links with no underline, blue, and orange when you hover over them and click on them.i dont know how to go about making it bold on hover in css.then, write your links as normal<a href="somepage.htm">click me, i'm a link!</a>:)

Link to comment
Share on other sites

A:link {text-decoration: none; color:#0000FF;}A:visited {text-decoration: none; color:#0000FF;}A:active {text-decoration: none; color:#FF9900;}A:hover {text-decoration: none; color:#FF9900;}will give you all links with no underline, blue, and orange when you hover over them and click on them.i dont know how to go about making it bold on hover in css.then, write your links as normal<a href="somepage.htm">click me, i'm a link!</a>:)

Include that anywhere in the css, and it will work? I'm not putting my styles in the head of every page, I include it in every page using <head><link rel=stylesheet type="text/css" href=apb.css></head>. It's worth a shot I guess. Thanks. :)EDIT: Font specifications can be defined for each link specifically. The only thing I wasn't able to inplement is the onFocus="if(this.blur)this.blur()" function. But as long as I won't use it on the page (only in the menu bar) I'm fine with making it a custom link option. Text-decoration is inherited through the entire script, but I set hover to underlined which I think is real cool. It gives a more interactive feel to the site.So now it looks like this:
body {	background: #f9f9ff;	text-align: center;	border: 0;    padding: 0;}#werklaag {	background: #ddddaa;	border-style: dotted;	border-width: 1;	color: #444444;	font-family: sans-serif;	font-weight: bold;	text-align: left;    width: 800;	height: auto;	margin-left: auto;    margin-right: auto;    margin-top: auto;    margin-bottom: auto;}A:link {	text-decoration: none;	color:#222299;}A:visited {	text-decoration: none;	color:#222299;}A:active {	text-decoration: none;	color:#990000;}A:hover {	text-decoration: underline;	color:#cc7700;}

If someone knows another useful funcionality to implement in my CSS, now is the time to tell me about it. :) Any comments can be mailed to me through the site. You know what to remove in my e-mailaddress (anti-spam functionality).Thank you real_illusions ^_+

Link to comment
Share on other sites

A:link {text-decoration: none; color:#0000FF;}A:visited {text-decoration: none; color:#0000FF;}A:active {text-decoration: none; color:#FF9900;}A:hover {text-decoration: none; color:#FF9900;}will give you all links with no underline, blue, and orange when you hover over them and click on them.i dont know how to go about making it bold on hover in css.then, write your links as normal<a href="somepage.htm">click me, i'm a link!</a>:)

a:link {  text-decoration: none;  color: #0000ff;}a:hover {  text-decoration: none;  color: #FF9900;  font-weight: bold;}

Link to comment
Share on other sites

Include that anywhere in the css, and it will work? I'm not putting my styles in the head of every page, I include it in every page using <head><link rel=stylesheet type="text/css" href=apb.css></head>. It's worth a shot I guess. Thanks. :)

yeah..pretty much.whatever page links to the stylesheet with that in, then that style will be used for that page.:)
Link to comment
Share on other sites

OK, got it to work. Ya gotta admit, even while the current content looks like complete gibberish, it looks pretty near right? :)Thanks for your help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...