Web loading speed when HTML source <style> or CSS is applied multiple times to one item

Hi, how are you?

I am a student who is currently working as an intern and studying HTML+CSS+JSP.

I am helping to develop a test page for our company's products (security/certification services) that are only used within our company, but I was told to unify the UI of that page a week ago, so I fixed the source.

Method 1. I modified the style directly within the specific tags of the HTml/jsp source because I was afraid that the items using the same tag on other pages that I didn't know would change.

ex)

<div class="blah">
    <div class="Blah blah">
        <h5 class="One way or another">

<div class="blah" style="float: left;">
    <div class="Blah blah">
        <h5 class="One way or another" style="Margin-bottom: 10px">

Change to

Method 2. There are multiple items using the same tag that you want to modify only within the corresponding html/jsp source, so the style was applied to the beginning of the source.

ex)

<style>
This one, that one
    font-size : 15px;
}
This one, this one, this one {margin-bottom: 15px;}
</style>

Method 3. When you want to modify a specific tag on every page, you have added a syntax to one css source.

ex)

header. That:hover,
header.That:focus{
    color:#B70000;
    cursor: pointer;
}

Method 4. (It's not related to the style sheet, but I'm asking you a question in a bundle) I made the commonly used part independent of the tag file.

ex)

an existing websiteThe contents of the footer tag are almost the same in bottom.tag used in jsp and the rest of the page, so I made a footer.tag separately and called it <tag:footer/>. Since the last page modification date is also included in the footer tag, there was also an intention to make it easy to find and fix.

However, while examining the source in Chrome developer mode, I found that There are several CSSs applied on each page, and there are many phrases that are not used in the CSS. I think it's because it's not a style sheet made by the company, but a bundle of stylesheets that I officially purchased from bootstrap , and there are many overlapping phrases in those stylesheets.

So I was wondering, wouldn't the web loading speed decrease a lot if you applied the phrases I randomly added in an environment where many stylesheets are loaded every page? I don't think there's much difference, but I don't know if it's okay because it's the way it's used, or if it doesn't feel the difference because it hasn't been modified a lot.

Summary of questions:

If you style the same item in many ways, does the web load drop so much that the user feels uncomfortable?

1-1. If so, is there a need to erase phrases that are not used in the style sheet or that are duplicated and unnecessary + is there a way to find and erase phrases that are not used at once without looking for them one by one

How do actual on-site web developers create web UIs (change all style sheets to their company's style after purchasing from bootstrap, leave them alone even if they have syntax, etc.)

The page I am modifying is not used by many outside users like Naver, but it is used only by a few of our office workers, so the optimal loading speed is not essential, but I am still curious about it.