Conflicting CSS?

[satdk]

Hi there,

I’m creating a very simple ‘website’ for a school project, and I’ve come across a slight problem that I could really use some help with.

I have two different classes of links defined in the css. One is the typical a:link class and the other is a.small:link.

Now the css shows up fine for these links in the HTML page, but the text-align property isn’t picked up and the links are aligned to the left even though they should be centered (see css below). Interestingly, all the other properties e.g. color, size, font etc. are fine.

Any help would be immensly appreciated.

CSS:

Code:

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size: 30px;
color: blue;
font-weight: bold;
text-align: center;
}

h2 {
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
color: blue;
text-align: center;
}

a:link {
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
color: blue;
text-align: center;
}

a.small:link {
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color: black;
text-align: left;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color: blue;
text-align: center;
}

p.first {
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color: black;
text-align: left;
}

.imagecenter {
text-align: center;
}

HTML:

Code:

Tours

Eden Project

Theme Park

Return Link

Travel

Thank you.

[kobylecki]

Well, tag a is inline display – it isn’t block, so text-align property you should give to parent of this tag, in this case: body tag. In tag a the content is aligned in right way, just it doesn’t seem like.

[Author]

Posts