Use custom CSS for only part of a Joomla page?

Question

I have some custom CSS for a table that needs to only change this specific table and leave the rest of the page to followed the regular template.css. I'm not sure where to put this to it works with Joomla and isn't accessed by the rest of the Joomla website.

Let's say the CSS code looks something like this, just as an example:

<style>
body {
line-height: 1.5;
}
table {
border: 1px solid #ccc;
}
table tr {
background: #ffffff;
}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
}
</style>

Where do I put the above CSS style in Joomla to only be used on that specific page and only for that one table?

Where do I place this CSS code? Do I create a flexicode module and put the CSS in there to only appear on this page? Add it to the custom.css? How can only body and table be assigned to that specific table to there are no conflicts with the body and perhaps table that might already exist in the template.css and possibly elsewhere?

Answer 1

If you just mean a table in a standard Joomla article (as opposed to a module), then I'd personally just add a class to the table, and then reference the table by that class in the custom css.

ie change <table> to <table class="green"> and reference it with table.green {}

To add the class, you are probably better going in the html view and doing it manually to make sure it appears in the right place, though you could also add the style to the editor.css and do it via the WYSIWYG (anything in your template's editor.css file appears in the styles dropdown).