How to merge inline css into an existing .css file

[larry29936]

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?

[maxxd]

That is the format for CSS. Cut everything between '<style>' and '</style>' out of the current file and paste it into the other file.

[larry29936]

@maxxd, Thnks for the reply.  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="??????">?

[kicken]

4 hours ago, larry29936 said:

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?

That's what the selectors are for (the .container, .divL, .divR etc).  Where you put the code in your CSS file probably doesn't matter unless you have multiple selectors trying to override each other or specificity issues. 

Just put your stuff at the end of the CSS file and see if there's a problem.  If there is, then you may need to either adjust where you put it or adjust your selector specificity.

 

[jodunno]

Hi,

I notice that you have the exaxt same code in several places but you use different selectors. 

.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% ;
       }

nothing is different between divL and div R. You could combine the two as .LR and apply them to the class: div clas="MainClass LR h1"

Best wishes.