How to merge inline css into an existing .css file

I have some inline css that I’d like to add to an existing styles.css file but have no idea what the format needs to be. Here’s what the inline css looks like:

    <style>
          .container {
            display: flex;
        	max-width: 1350px;
    	    margin-right: auto; 
    	    margin-left: auto; 
    	    padding-top: .3rem;
    	    padding-bottom: 1.5rem;
          }
      
          .divL {
            box-sizing: border-box;
            padding: 5px; 
            border-right: solid 1px #000000;
            border-left: solid 1px #000000;
            background: #eaeaea;
            width: 50% ;
            }

        .divR {
            box-sizing: border-box;
            padding: 5px; 
            border-right: solid 1px #000000;
            border-left: solid 1px #000000;
            background: #eaeaea;
            width: 50% ;
           }

         .divR h1 {
    		font-size:24px;
    		font-weight:bold;
    		margin-bottom:8px;
            border-bottom:solid 1px #000000;
    		padding-bottom:10px;
            text-align: center;
    	}
         .divR h2 {
    		font-size:18px;
    		font-weight:bold;
    		margin-bottom:4px;
      		padding-bottom:5px;
            text-align: center;
        }
         .divR h4 {
    		font-size:16px;
            font-weight:normal;
    		margin-bottom:4px;
      		padding-bottom:5px;
            text-align:left;
        }
         .divL h1 {
    		font-size:24px;
    		font-weight:bold;
    		margin-bottom:8px;
            border-bottom:solid 1px #000000;
    		padding-bottom:10px;
            text-align: center;
    	}
         .divL h2 {
    		font-size:18px;
    		font-weight:bold;
    		margin-bottom:4px;
      		padding-bottom:5px;
            text-align: center;
        }
         .divL h4 {
    		font-size:16px;
            font-weight:normal;
    		margin-bottom:4px;
      		padding-bottom:5px;
            text-align: left;
        }
         .p {
    		font-size:16px;
            color:#000000;
            font-weight:normal;
    		margin-bottom:8px;
      		padding-bottom:10px;
        }
         .h1 {
    		font-size:24px;
    		font-weight:bold;
    		margin-bottom:4px;
            border-bottom:solid 3px #000000;
    		padding-bottom:5px;
            text-align: center;
    	} 
    </style>

How do I merge it into the pre-existing styles.css? How do I identify the section of the styles.css file so that the html file knows how to format a section of the page? In other words, the tag in the html, like

<div id="download" class="??????">?

A dot followed by a name denotes a class selector.
A octothorpe (#) followed by a name denotes an id selector.

The brackets are opening and closing blocks for specific styles for the selector identified.

So to move things from inline to the style sheet, you either need to find the selector that the element falls under, or create a new with whatever styles are in the element currently.

Thanks for that explanation. Now I can proceed.

Sponsor our Newsletter | Privacy Policy | Terms of Service