In the article CSS in module for easy Joomla! design I wrote about an easy and a fast implementation of custom CSS into Joomla website directly from Joomla administration. In that particular case it is not required to edit CSS file, to place it on a server and connect it with a design. Instead, you could just make a Custom HTML module and write CSS directly into it.
In the administration of the Hydrogen template on the bottom of the Page Settings tab you can find an Atom section where Custom CSS / JS particle is meant to be placed.
We can insert our custom code into Custom CSS / JS on the bottom of the Page Settings page
One Custom CSS / JS can contain literally unlimited custom codes sorted by names.
In Custom CSS / JS we can write our own custom CSS codes
Codes can be applied as an external CSS file or as an inline CSS. Keep in mind that if you write an inline CSS you should not use <style> tags because Atom inserts them by default. After the implementation of the code you just use CSS classes where you need them.
Custom CSS can be implemented from an external file or as an inline code directly in Atom
Gantry 5 makes the implementation of CSS a lot simpler which is perfect for small corrections but also for more serious design. This way is more secure in cases when you need to modify a component or a module. After the component is upgraded our CSS code written in a separate Atom is safe from erasing. Working with Joomla! and Gantry you can rely on various solutions including this one. It is up to us to choose to use it or not but it is nice to have this as an option.