Html – Overriding CSS classes

csshtmljqueryjquery-ui

I am using Ruby on Rails 3.0.9, jQuery 1.6.2 and jQuery UI. I would like to override some CSS class attributes for my tabs without change the original CSS file generated by the ThemeRoller.

How can I do that? What do you advice about?

P.S.: I would like to style my tabs without modifying the jQuery UI CSS file at all so that, in future developments, I can "re-generate" that file without lose my custom CSS statements.

Best Answer

This is quite simple to achieve. CSS applies styling based on load order. To override any style, it needs to be loaded after the core stylesheet.

  1. Load your jQuery UI CSS.
  2. Load your custom CSS file.

In your custom CSS file, you can override your tab structure using the same markup found in the core UI CSS file.

This will allow you to re-generate and replace the core files without losing your customization.