Using CSS for using colour

[anilshiv]

How can I make a link on a website a different colour to all the other links on that page?

Can this be done with

tags?

I use DMX.

Thanks,

[kev woodman]

It's easy using CSS - all you have to do is give the link a class (or an id if it is the only one) and then style it.

CSS is a bit big to cover here but you will find loads of tutorials available for CSS in general and styling links in particular. Then if you have a particular question just ask here.

[Administrator]

using CSS you can change default color and size of common html and php tags like H1, H2, H3, hyperlinks, strong, bold...

I have included some part of stylesheet of our blog to help you understand what I am trying to say :-

body {
        margin:0;
        padding:0;
        font-family: 'Trebuchet MS',Georgia, Times, Times New Roman, sans-serif;
        font-size: 0.9em;
        text-align:center;
        color:#29303B;
        line-height:1.3em;
        background: #F3F6ED;
}
a {
        color: #909D73; .
        text-decoration:none;
}
a:visited {
        color: #8a3207;
        text-decoration:none;
}
a:hover {
        color: #753206;
        text-decoration:none;
}
input, textarea
{
        background: #F3F6ED;
        border: #E1D6C6 1px solid;
}
#rap
{
        background:#fff url(img/rap.jpg) center repeat-y;
        width:760px;
        margin:0 auto;
        padding:0px 8px;
        text-align:left;
        font-family: Trebuchet MS,Georgia, Arial, serif;
        font-size: 0.9em;
}
#header {
        background:#fff url(img/blog_top.jpg) no-repeat bottom;
        height: 208px;
        margin: 0 auto;
        width:760px;
        padding:0;
        border:#fc9 0px solid;
}
#main
{
        margin:0 auto;
        padding:0;
        background:url(img/content_bg.gif) repeat;
        width:740px;
}
#content {
        width:510px;
        float:left;
        padding:5px;
        margin:0;
        overflow:hidden;
        display:inline;
}
#sidebar {
        width:186px;
        float:right;
        padding:0px 8px 10px 8px;
        margin:0;
        font-size:1em;
        color:#333;
        display:inline;
}
a img {
        border: none;
}
acronym, abbr {
        border-bottom: 1px dotted #0c6bf0;
}
acronym, abbr, span.caps {
        cursor: help;
        letter-spacing: .07em;
}
code {
        font-size: 1em;
        font-style: italic;
}
blockquote {
        margin: 15px 30px 0 45px;
        padding: 0 0 0 45px;
        background: url(img/blockquote.gif) no-repeat left top;
        font-style:italic;
}

cite {
        font-size: 0.9em;
        font-style: normal;
}
h3 {
        margin: 0;
        padding: 0;
        font-size:1.3em;
}
p {
        margin: 0 0 1em;
        padding: 0;
        line-height: 1.5em;
}
h1, h2, h3, h4 {
        font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
        font-weight: normal;
        letter-spacing: 1px;
        text-decoration: none;
}
#header h1
{
        margin: 0;
        font-size: 1.6em;
        padding:10px 20px 0 0;
        text-align:right;
        text-decoration: none;
}
#header h1 a
{
        color:#FFFFFF;
        text-decoration:none;
}
#header h1 a:hover
{
        color:#FFFFFF;
        text-decoration: none;
}
#header #desc
{
        font-weight:normal;
        font-style:italic;
        font-size:1em;
        color:#B5C09D;
        text-align:right;
        margin:0;

[Administrator]

you can see that tags like H1, H2, H3 have been customized and their default size is overridden. also color has been assigned to a ( used for hyperlinks )

if you need further customization then do what Kevin has suggested. Define class in CSS and use it in your code. You can view source code of our blog from your browser to understand how CSS has been implemented.

[anilshiv]

i will try your methods now i hope it works good trying it now thanks