Applying specific styles to superscript without affecting the rest of links/h1s on page

Text/Link: pos Weyb and superscripted 1 at the top of the page.
I want the 1 to be formated like the word pos Weyb in its ‘unvisited’ state.
I want to apply the following rules in the rest of its states without affecting any other links or h1 text on the page:

a:link {
"Everything else except its vertical alignment like h1 class=logo"

/* visited link */
a:visited {
  color: #60c0d8;

/* mouse over link */
a:hover {
  color: #a92d6c;

/* selected link */
a:active {
  color: #60c0d8;

I know I have to ‘rename’ the pseudo links somehow to make them more specific…but I am not sure how and I don’t want the superscript 1 ‘class/id’ to affect any of the other h1 stuff on the page. Thanks in advance… I hope I am making myself clear and typed this correctly!

I’m not quite sure what you are asking but you should to add a class to the superscript 1 element and style it via that class.


<a class="super" href="#exactly">1</a>

(Avoid using ids for styling as they carry more weight than classes)

a.super {
  font-family: "museo-sans-1", "museo-sans-2", sans-serif;
  font-weight: normal;
  text-shadow: 0 -1px 2px #656461;
  color: #fff;
  margin: 2px;
  line-height: 1;
  font-size: 1rem;
  text-decoration: underline;
/* visited link */
a.super:visited {
  color: #60c0d8;
  text-decoration: blink;
/* mouse over link */
a.super:hover {
  color: #a92d6c;
/* selected link */
a.super:active {
  color: #60c0d8;

Please don’t use blink as a value for the text-decoration unless you want a return to the 1990s. I believe most browsers ignore blink these days anyway.

1 Like

I have attempted to incorporate your examples.

The renaming of the a.super class helped me understand how to do that.

But my class is still being overridden by the generic reset.css and a webkit ‘thingy’ when I inspect the superscript 1 as it is now.

I don’t even know if I really need the reset.css page. I just found the example I based my page on here: So it came along for the ride. I have’t been able to google anything that shows me how to override the user agent style websheet. That was what I was trying to accomplish with the ‘id’ …

No the classes are not working because you have nested them within the moz-document url-prefix styles at the bottom of the css file. There should be an extra closing bracket before your new rules.

@-moz-document url-prefix() {


padding:3px 12px 2px;}

}/* this was missing */

/*My Feeble CSS*/

Also this is not a valid colour as you have 7 values and hex is only 6 values.

color: #ef84218;

Lastly I don’t understand why you would need the moz-document prefix anyway as you are doing nothing special and if you do need it I would advise you not to use it anyway and find a better way to achieve what you want. Hacking styles right at the start of a project is the worst way to code.:slight_smile:

1 Like

Thank you for your input. I got those hex values here: That one looks like a typo on my part. As to how I am learning. I have been going through the w3schools tutorials for html and css.

I found these: tutorials helpful which led me to this page: which I found pleasing. It is specifically designed for others to plagiarize and learn from.

I decided to pick up ‘coding’ because of Covid. I can’t go anywhere. I only ask for help after I have spent a good deal of time trying on my own.

I learned a long time ago with other hobbies (horse husbandry and tailoring) that at some point you have to expose yourself to other’s methods if you want to further your learning.

So I come to the forum to ask for help and learn from the pros. I really appreciate your help, but if my lack of knowledge and my method of teaching myself frustrates you, please don’t feel compelled to help me. I am sure someone else will.

Although most of the information presented there is useful the site itself is not very accessible and the body text is really a bit too small for me to read (14px) without zooming (I tend o use 1rem as the smallest for body content) but apart from that the site is not responsive and not built to todays responsive standards (it has no responsiveness and will not work properly on mobile.)

I also notice you have no viewport meta tag in your page and without it you will be unable to use media queries for smaller screens assuming that your goal is to build a responsive site?

These days the aim is to get away from fixed width designs and allow a fluid site adapt to different dimensions more easily within the constraints of the design of course.

Where did you get that idea? I don’t see anything in my posts that reflect frustration.

I will point out your errors of course but that’s not frustration.

That’s a good method :slight_smile:

It will help that if before you post your code you run it through the validators first and that will pick up errors and simple typos.

Yes that’s also good but please don’t be put off when someone says you are doing it all wrong because that’s why you came here to learn. Keep asking questions and I’m sure you will get there in the end :slight_smile:


Unfortunately my browser won’t let me go there so I would treat those pages with caution.

# Web Protection byBitdefender

## Fraudulent page blocked for your protection

Fraudulent pages usually attempt to trick you into sending money with the intent of obtaining unlawful gain.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.