How to merge inline css into an existing .css file

A

Anonymous

Guest
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:
Code: 
<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?
 
remove the <style></style> tags, then cut and paste it to your css file, then save it.
 
Thanks for the reply, hyper. 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="??????">?
 
To get the calendar icon to the right of the input in your Bootstrap form, you can make use of Bootstrap's input group component. Here's an updated version of your code that includes the necessary changes:

'''html
Enter Manual Volunteer Hours
<form class="form-horizontal">

Date / Time Clocked In

<input data-format="MM/dd/yyyy HH:
mm:
ss PP" name="clock_in" type="text" placeholder="Date / Time Clocked In" class="form-control input-md" required="">

Date / Time Clocked Out

<input data-format="MM/dd/yyyy HH:
mm:
ss PP" name="clock_out" type="text" placeholder="Date / Time Clocked Out" class="form-control input-md" required="">

Job Performed

<select id="selectbasic" name="selectbasic" class="form-control">
Option one
Option two
</select>

<button id="submit" name="submit" class="btn btn-primary">Submit For Approval</button>

</form>
'''
In the updated code, the key changes are as follows:

1. Replace '' with '' to make the column an input group.

2. Move the '' element inside the '' element. 3. Change " " to " ".

These changes group the input box and the calendar icon so that the icon appears to the right of the input box.

For this code to work properly, be sure to include the appropriate CSS and JS files for your bootstrap and calendar icons.

Hope this solves your problem with calendar icon placement. If you have any other questions, please let us know.
 
You must log in or register to reply here.
Back
Top