yoshida Posted April 16, 2006 Share Posted April 16, 2006 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 More sharing options...
real_illusions Posted April 16, 2006 Share Posted April 16, 2006 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 More sharing options...
yoshida Posted April 16, 2006 Author Share Posted April 16, 2006 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><{POST_SNAPBACK}> 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 More sharing options...
Err Posted April 16, 2006 Share Posted April 16, 2006 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><{POST_SNAPBACK}> a:link { text-decoration: none; color: #0000ff;}a:hover { text-decoration: none; color: #FF9900; font-weight: bold;} Link to comment Share on other sites More sharing options...
real_illusions Posted April 16, 2006 Share Posted April 16, 2006 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. <{POST_SNAPBACK}> 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 More sharing options...
yoshida Posted April 18, 2006 Author Share Posted April 18, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now