To apply styling to an element site-wide you can do something like this:

a {
  color:Blue;
}

However, is there a way to apply existing CSS classes to elements. The real-world example is, using jQuery UI CSS classes to style elements site-wide. For example:

<link type="text/css" href="css/cupertino/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
a {
  /* use styling from the .ui-state-default class */
}

I could just take the styles from the .ui-state-default class and place them in the style class for the "a" element, but if I change the jQuery UI CSS (via ThemeRoller) I would also have to re-change the styling for the "a" element. On the same note, this website has hundreds of "a" elements, so applying a jQuery UI class to them is pretty much out of the question as well.

Thank you in advance for any help you can provide.

-Jessy Houle

1 answer

o.k.w 2355
1
point
This was chosen as the best answer

Wouldn't the following jQuery methods work regardless of how many "<a>" in the page?

$('a').removeClass(); //remove all css classes attached to all "a" elements (optional)
$('a').addClass('ui-state-default'); //assign the class to all "a" elements
Answered almost 7 years ago by o.k.w
  • This is definitely a great solution. However, the "a" element was just an example, I would have to do this for all of my different inputs, etc. as well. Again great solution, and in-fact I will use this if there is no way to do this with CSS. Thank you. Jessy Houle almost 7 years ago
  • I see, in that case, you have to code more to target those elements e.g. $('input') or $('input[type="text"]') etc etc. Good thing is you only need to work on the element tags and not all the instances. Good luck! o.k.w almost 7 years ago
  • Thank you for your solution on this. Jessy Houle almost 7 years ago