Jump to content

How to merge inline css into an existing .css file


larry29936

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?

Link to comment
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.

 

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

×
×
  • 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.