HTML styling links please help?

Question

Hey I'm having great difficulty styling my links such as

a href="liiiii.html">liiiii its not a directory problem by the way,

I'm using a style sheet and I want to make my link(s) font bigger(wider and taller) also I want to put a box around it maybe the word to use is border?

any codes or ideas on how I would do this?



BQ(don't have to answer not that important) how would I use an image as a link?



Thanks :)

Answer 1

Link Codes:



The link URL/href will be the link that is shown in the browser's address field when you are on the page you want to link to. See:

How to Copy and Paste a URL (Web Address): http://www.stuffpit.com/stuff/copy-paste

How to Copy & Paste the URL in a New Browser Window: http://www.ehow.com/how_6309076_copy-url-new-browser-window.html



Image Link:

If site does not host images, then you MUST host your image online at any good image hosting site. The "src" image URL MUST be the DIRECT link to the image alone and not to the page the image is on. Put the DIRECT URL to ONLY the image in the src="" attribute. If used as a link, put the correct URL to the site in the href="" attribute.



Text Link:

Link Text Description

You can change the "p" tags to div tags and style as needed.



Link Styles:



You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:



link - this is a link that has not been used, nor is a mouse pointer hovering over it

visited - this is a link that has been used before, but has no mouse on it

hover - this is a link currently has a mouse pointer hovering over it/on it

active - this is a link that is in the process of being clicked



Using CSS you can make a different look for each one of these states:



a:link {

color:#006;

text-decoration:none;

cursor:pointer;

}



a:visited {

color:#369;

}



a:hover {

color:#f60;

text-decoration:underline;

}



a:focus {

outline: none; /* remove the dotted outline added by Firefox */

}



a:active {

color:#fc9;

cursor:wait;

}



a:link {color: #090;}

a:visited {color: #999;}

a:hover {color: #333;}

a:focus {color: #333;}

a:active {color: #090;}



Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.



Pseudo Classes



You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.



You can do this in the following fashion:



#pseudo_content a:link {color: #090;}

#pseudo_content a:visited {color: #999;}

#pseudo_content a:hover {color: #333;}

#pseudo_content a:focus {color: #333;}

#pseudo_content a:active {color: #090;}



Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.



Then for the links in a column you could use the following:



#pseudo_column a:link {color: #090;}

#pseudo_column a:visited {color: #999;}

#pseudo_column a:hover {color: #333;}

#pseudo_column a:focus {color: #333;}

#pseudo_column a:active {color: #090;}



Once again, this assumes the name of the column division, just change the name to match yours.



This same method can be accomplished by declaring a class instead of an id.



a.pseudo_column:link {color: #090;}

a.pseudo_column:visited {color: #999;}

a.pseudo_column:hover {color: #333;}

a.pseudo_column:focus {color: #333;}

a.pseudo_column:active {color: #090;}



Though in this case you will need to add a class to each link



some link text



But, there is still yet an easier way



.pseudo_column a:link {color: #090;}

.pseudo_column a:visited {color: #999;}

.pseudo_column a:hover {color: #333;}

.pseudo_column a:focus {color: #333;}

.pseudo_column a:active {color: #090;}



Then in the (X)HTML file

Link Text Description

Ron

Answer 2

First off, you need to write your link code properly. Using your example this would be:

liiiii



If you're writing your HTML code by hand, then consider using a source code editor that colors the tags and shows where they link together, etc. Assuming you're using a Windows platform I suggest using Notepad++ for this purpose as it is open source (free). That is the first link you'll see below. If you're using some other platform, that is the kind of software you want to use (source code editor).



Now, for some of your other questions...



Turning an image into a link is not hard. One good tutorial on this subject can be found at the second link. Just remember to keep track of your nesting order so the code does not get messed up! Either start with the code to refer to the image file and then surround that with the link tags, or the reverse. Again, that is where a good source code editor can save you hours of frustration in figuring out why your code isn't working.



When adding a border box effect around something (box of text, link, etc.) then you're going to need to write CSS to add the proper styling codes. There are a number of ways to add CSS into your HTML, with the easiest being Inline (included right in your HTML code). My third link below will take you where W3C's tutorials start on using CSS. (Another excellent tutorial site AND one thru which you can obtain certification in writing HTML & CSS if that should interest you.)



The page on W3C's where explanations on various border effects is in the 4th link below.



Enjoy!

Answer 3

If you want to decorate your links you can do this in style sheet like this



a {

text-decoration: underline;

font-size:16px;

font-weight: bold;

}



Answer on your second questions is that you must to have tag inside your tag.



One example:

Answer 4

or

Answer 5

positioned this interior the pinnacle element of the internet pages you % the stylesheet related to: keep in mind that the path to "mystylesheet.css" will exchange in the journey that your HTML records are in diverse folders than your css document.