Jump to content
Sign in to follow this  
larry29936

How to merge inline css into an existing .css file

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

@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="??????">?

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.