Newbie question - which css file to edit

Question

Hi I am currently using the Phlox theme to create a website but there are a few tweaks I'l like to make the CSS typography but as there are multiple CSS files, I'm not sure which one I should be digging into to edit? There is Base.css or Main.css and they both look very similar.

I know I can adjust a lot of the font attributes within the theme GUI but there are a few little extras I'd like to add like line-height and changing to use rem instead of px.

Answer 1

You generally shouldn't edit your theme's CSS files if the theme isn't one you authored yourself. The reason is that these changes would be lost if you ever updated the theme.

The two recommended ways of adding CSS of your own are:

1. Go to Appearance > Customize > Additional CSS and add your CSS here. This CSS is output in a <style> tag on the front end.
2. Create a child theme. This is a bit more complicated, but the process is documented here. This will give you your own theme with its own CSS file that you can safely edit, while continuing to load the parent theme's styles. The only problem is that different themes often work differently and there can be quirks for creating child themes for them. You should consult your theme's documentation to see if there's any information on creating child themes, or even a sample child theme that you can use. If not, and the process documented at the link I gave earlier doesn't work as expected, you should contact the theme author for support.