Insert a Link Using CSS
I’m hand-maintaining an HTML document, and I’m looking for a way to automatically insert a link around text in a table. Let me illustrate:
I would like to automatically make every text in a TD with class «case» a link to that case in our bug tracking system (which, incidentally, is FogBugz). So I’d like that «123456» to be changed to a link of this form:
Is that possible? I’ve played with the :before and :after pseudo-elements, but there doesn’t seem to be a way to repeat the case number.
What do you mean automatically? You will need to run some application over your HTML that will convert it to the desired results.
6 Answers 6
Not in a manner that will work across browsers. You could, however, do that with some relatively trivial Javascript..
function makeCasesClickable() < var cells = document.getElementsByTagName('td') for (var i = 0, cell; cell = cells[i]; i++)< if (cell.className != 'case') continue var caseId = cell.innerHTML cell.innerHTML = '' var link = document.createElement('a') link.href = 'http://bugs.example.com/fogbugz/default.php?' + caseId link.appendChild(document.createTextNode(caseId)) cell.appendChild(link) >> You can apply it with something like onload = makeCasesClickable , or simply include it right at the end of the page.
Careful about blindly wrapping those TD contents in links; block-level elements might show up, and they’re not valid inside A tags. Also, I’d find the right table and get its child elements and not just scoop up all the TDs in the document.
here is a jQuery solution specific to your HTML posted:
in essence, over each .case element, will grab the contents of the element, and throw them into a link wrapped around it.
Not possible with CSS, plus that’s not what CSS is for any way. Client-side Javascript or Server-side (insert language of choice) is the way to go.
I don’t think it’s possible with CSS. CSS is only supposed to affect the looks and layout of your content.
This seems like a job for a PHP script (or some other language). You didn’t give enough information for me to know the best way to do it, but maybe something like this:
Then later in your document:
And if you want an .html file, just run the script from the command line and redirect the output to an .html file.
You could have something like this (using Javascript). Inside , have
I’ve tested it, and it works fine.
I know this is an old question, but I stumbled upon this post looking for a solution for creating hyperlinks using CSS and ended up making my own, could be of interest for someone stumbling across this question like I did:
Here’s a php function called ‘linker();’that enables a fake CSS attribute
for an #id defined item. just let the php call this on every item of HTML you deem link worthy. the inputs are the .css file as a string, using:
and the #id of the corresponding item. Heres the whole thing:
function linker($style_cont, $id_html) < if (strpos($style_cont,'connect:') !== false) < $url; $id_final; $id_outer = '#'.$id_html; $id_loc = strpos($style_cont,$id_outer); $connect_loc = strpos($style_cont,'connect:', $id_loc); $next_single_quote = stripos($style_cont,"'", $connect_loc); $next_double_quote = stripos($style_cont,'"', $connect_loc); if($connect_loc < $next_single_quote) < $link_start = $next_single_quote +1; $last_single_quote = stripos($style_cont, "'", $link_start); $link_end = $last_single_quote; $link_size = $link_end - $link_start; $url = substr($style_cont, $link_start, $link_size); >else < $link_start = $next_double_quote +1; $last_double_quote = stripos($style_cont, '"', $link_start); $link_end = $last_double_quote; $link_size = $link_end - $link_start; $url = substr($style_cont, $link_start, $link_size); //link! >$connect_loc_rev = (strlen($style_cont) - $connect_loc) * -1; $id_start = strrpos($style_cont, '#', $connect_loc_rev); $id_end = strpos($style_cont,' else < $url_clean = 'http://'.$url; >; if($id_clean[0] == '#') < $id_final = $id_clean; if($id_outer == $id_final) < echo ''; >; >; >; >; CSS Links
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color , font-family , background , etc.).
Example
In addition, links can be styled differently depending on what state they are in.
The four links states are:
- a:link — a normal, unvisited link
- a:visited — a link the user has visited
- a:hover — a link when the user mouses over it
- a:active — a link the moment it is clicked
Example
/* unvisited link */
a:link color: red;
>
/* visited link */
a:visited color: green;
>
/* mouse over link */
a:hover color: hotpink;
>
/* selected link */
a:active color: blue;
>
When setting the style for several link states, there are some order rules:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:visited text-decoration: none;
>
a:hover text-decoration: underline;
>
a:active text-decoration: underline;
>
Background Color
The background-color property can be used to specify a background color for links:
Example
a:link <
background-color: yellow;
>
a:visited background-color: cyan;
>
a:hover background-color: lightgreen;
>
a:active background-color: hotpink;
>
Link Buttons
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
Example
a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: red;
>
More Examples
Example
This example demonstrates how to add other styles to hyperlinks:
Example
Another example of how to create link boxes/buttons:
a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: green;
color: white;
>
Example
This example demonstrates the different types of cursors (can be useful for links):
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Give link in css
The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS functions, like the attr() function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the data type.
Note: There is a difference between a URI and a URL. A URI identifies a resource. A URL is a type of URI, and describes the location of a resource. A URI can be either a URL or a name (URN) of a resource.
In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that url() could be used to create a CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, url() denotes only true s.
/* Simple usage */ url(https://example.com/images/myImg.jpg); url(data:image/png;base64,iRxVB0…); url(myFont.woff); url(#IDofSVGpath); /* associated properties */ background-image: url("star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* Properties with fallbacks */ cursor: url(pointer.cur), pointer; /* Associated short-hand properties */ background: url('star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* As a parameter in another CSS function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent)); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") /* … */ > Experimental @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml);
Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).
Syntax
Values
A string which may specify a URL or the ID of an SVG shape.
A URL, which is a relative or absolute address, or pointer, to the web resource to be included, or a data URL, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:
: url("https://example.com/image.png") : url('https://example.com/image.png') : url(https://example.com/image.png)
If you choose to write the URL without quotes, use a backslash ( \ ) before any parentheses, whitespace characters, single quotes ( ‘ ) and double quotes ( » ) that are part of the URL.
References the ID of an SVG shape — circle , ellipse , line , path , polygon , polyline , or rect — using the shape’s geometry as the path.
In the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string. This is not supported and not fully defined in the specification.