I have noticed that when I have my website scanned for possible issues, one thing that seems to always come us is that the CSS is "bloated" and with a recommendation to reduce the size of it.

I am not knowledgeable about this but have a question that may clear things up a bit for me. It seems that if I make style changes to an element and then later change the style again, that the old styles still remain in the CSS. For example, if I look at the "choose a style to reset" it appears that the previous styling remains. Am I mistaken or missing something?

Regardless, is there an easy way for a novice to reduce the size of the CSS.

You can minify it: https://htmlcompressor.com/compressor/
Other than that, there is no easy way.

Hi Phil
There are a number of things that can help,
For instance, you can choose to set things "For All Elements of this type" this is pretty neat especially things like the "Body" , so if most of my pages are goint to be the same background colour, then right at the start of a project then I choose "Apply To All Elements Of This Type" and select the background colour. Then apply padding (if it's coing to have any) etc etc.

Thereafter all additional pages with have the same initial styling. If one page I add requires something different (fo instance maybe a different colour, padding, width what ever, then I add a class name (this class name should be something easy to read, and gives a clue as to what it does.

So for instance I want one of my pages to have more padding, then I would add a class-name 'padding-10-10-10-10 (which indicates an increase of padding to 10px all round. a different background colour, would be a class name for example, body-colour-blue Or even the CSS colour property if it's more specific (navy-blue for example.

When it comes to adding containers, nowadays I go wherever possible for the CSS Grid Property, again this can help reduce traditional CSS It's all kept within the CSS Grid bit, so you can then set some of the styling for the containers to flex, with padding/margins to colums or rows, flexed if required etc etc.

All Headings, 1,2,3,4,5,6, text, paragraphs, text links, buttons, list containeres etc etc, get the "Apply to All Elements" thingy and same process, choose the font style, size, colour, etc etc, then if I want a different thing

I can also make elements " Symbols" (once all styling is set, (Including additional class/ID names)

ALL THIS OF COURSE IS SET UP RIGHT AT THE VERY BEGINNING OF A PROJECT

You can always use (Depending of the framework) the built in class names, which are pretty descriptive (for instance in Foundation, the foundation class name "Text-centered" is clear about what it does and it also does it for you, Bootstrap framework also is pretty good for builtin class names, Frameworkess not good at all
Pseudo and dynamic selectors are also pretty neat if required

For existing projects it's a mamouth job, frought with the possibility of creating errors, and to be honest probably not worth even attemping, just for the sake of a few milliseconds.

I could go on and on for hours, to cover everything that could be done (or should be done right from the start of as project) In fact it's almost like a "never ending story"

To clear unwanted Css Styles "All Styles All Breakpoints usually does the trick (this of course also has to be applied to the element Class/ID/All Breakpoints of this type selected)