Right way to copy css change from chrome dev tools-CodePudding

Newbie here, I am adding additional css to my wordpress theme while inspecting it with chrome dev tools. For example, this element has the following styles (by default, provided by my theme):

.product p.price {
float: left;
margin: 0;

}

I want to add this:

padding: 10px 0;

And now it looks like this:

.product p.price {
float: left;
margin: 0;
padding: 10px 0;

}

When I'm done, do I have to copy the 3 lines from dev tools to my theme's additional css or just the one line I added? Does it matter if my additional css reads this:

.product p.price {
padding: 10px 0;

}

instead of this:

.product p.price {
float: left;
margin: 0;
padding: 10px 0;

}

Is there a right/wrong way when adding additional css to a theme?

CodePudding user response：

I'm not familiar with the way wordpress does these things, but i doubt you want to edit the CSS into your template. Templates can get updated over time and when you update them it'll likely just remove all the old files and replace them with the newly downloaded versions - all your changes would be wiped.

I imagine wordpress either provides a separate place for you to override styles, or allows you to manually add extra stylesheets (fresh empty .css textfiles).

In either case, you'd only add your changes to the stylesheet.

Based on your example, the right thing to add would be:

.product p.price {
    padding: 10px 0;
}