How to merge these two css files so the styling works perfectly?

Question

i have these two css files. One is actually a style tag under an html file and i want this tag to be included in my original css file. How can i merge that so that the styling is properly included. I tried doing it but that corrupts my header styling. Here are the two files . I have already added the elements from style tag to my css file but this does not work properly maybe due to conflicting properties,incorrect ordering of properties or seomething else. How can i fix this so that everything displays properly?

Style tag

css file

*,
:after,
:before {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Poppins, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #0a0a0a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic
}

textarea {
    height: auto;
    min-height: 50px;
    border-radius: 0
}

select {
    box-sizing: border-box;
    width: 100%;
    border-radius: 0
}

main {

    margin-right: -.9575rem;
    margin-left: -.9575rem;
    /*margin-top: 155px;*/
    padding-bottom: 50px;
    top: 110px;
    position: absolute;
    left: 7%;
    right: 7%;
    text-align: justify
}

.log {
    max-height: 100px;
}

.header-main {
    background-color: #fff;
    box-shadow: 0 3px 6px 0 #c2c2c2;
    height: 90px;
    padding: 0 20px;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    transition: color .25s linear .4s, background-color .25s linear .4s, transform .4s ease;
    z-index: 100
}
.header-main .nav-header img {
    width: 85%;
    height: 54px;
    top: unset
}
.nav>li>a:focus, .nav>li>a:hover {
    background-color:unset !important;
}


.li-img-btn-container{
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
.center-content
{
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.margin-left-right-for-btn {
    margin: 0 10px;
}
.img-btn-navs
{
    
    display: flex !important;
    justify-content: space-around;
    border: none;
    min-height: 154px;
}
.nav-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.header-main.hidden {
    transform: translateY(-100%)
}

@media print,
screen and (min-width:64em) {
    .header-main {
        height: 150px;
        padding: 0 30px
    }
}

.header-main .nav-container {
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden
}

@media print,
screen and (min-width:64em) {
    .header-main .nav-container {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

.header-main .nav-header {
    float: left;
    font-size: 22px
}



@media print,
screen and (min-width:64em) {
    .header-main .nav-header img {
        width: 265px;
        height: auto;
        position: relative;
        top: -10px
    }
}

.header-main .nav-header li {
    line-height: 40px
}

.header-main .nav-header li a {
    padding: 24px 25px;
    color: #0a0a0a
}

.header-main .nav-header li a:focus,
.header-main .nav-header li a:hover {
    color: #005aa0
}

.header-main .nav-header li:first-child a {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0
}

.header-main .nav-header li:not(:first-child) {
    display: none
}
.header-main .menu2,
.header-main .menu1 {
    display: flex;
    flex-direction: row;
}
.header-main .menu2 li,
.header-main .menu1 li {
    display: inline-block;
}
.header-main .menu2 li:nth-child(2),
.header-main .menu1 li:nth-child(2) {
    margin: 0 10px
}
.header-main .menu li:nth-child(1) {
    width: 40%;
}


@media print,
screen and (min-width:64em) {
    .header-main .nav-header li:not(:first-child) {
        display: block
    }
}


.grid-container {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto
}

@media print,
screen and (min-width:40em) {
    .grid-container {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

.grid-container.fluid {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

@media print,
screen and (min-width:40em) {
    .grid-container.fluid {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

.grid-container.full {
    padding-right: 0;
    padding-left: 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

.grid-container:not(.full)>.grid-padding-x {
    margin-right: -.625rem;
    margin-left: -.625rem
}

@media print,
screen and (min-width:40em) {
    .grid-container:not(.full)>.grid-padding-x {
        margin-right: -.9375rem;
        margin-left: -.9375rem
    }
}

.grid-container-large {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto
}

@media print,
screen and (min-width:40em) {
    .grid-container-large {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

.grid-container-header {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    float: left;
}

@media print,
screen and (min-width:40em) {
    .grid-container-header {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

section.grid-container {
    background-color: #fff
}

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: flex;
    flex-wrap: wrap
}

[data-whatinput=mouse] .menu li {
    outline: 0
}

.menu .button,
.menu a {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: .7rem 1rem
}

.menu a,
.menu button,
.menu input,
.menu select {
    margin-bottom: 0
}

.menu input {
    display: inline-block
}

.menu,
.menu.horizontal {
    flex-wrap: wrap;
    flex-direction: row
}

.menu.icon-top li a i,
.menu.icon-top li a img,
.menu.icon-top li a svg {
    align-self: stretch;
    margin-bottom: .25rem;
    text-align: center
}

.menu.icon-bottom li a i,
.menu.icon-bottom li a img,
.menu.icon-bottom li a svg {
    align-self: stretch;
    margin-bottom: .25rem;
    text-align: center
}

.menu .button,
.menu a {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: .7rem 1rem
}

.menu a,
.menu button,
.menu input,
.menu select {
    margin-bottom: 0
}

.show-for-sr,
.show-on-focus {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.logocms10 {
    width: 297px;
    height: 82px
}

.boxLogo img {
    max-width: 100% !important;
    float: left;
    z-index: 1;
}

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 32px
}

.hero video {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100vw;
    height: 100vh
}

.hero-text {
    color: #fff;
    align-self: flex-end;
    justify-content: center;
    text-align: center;
    margin-bottom: 5rem;
    position: absolute;
    padding: 0 1rem;
    max-width: 1024px
}

.hero-text h1 {
    font-size: 40px;
    line-height: 1.2em
}

@media print,
screen and (min-width:64em) {
    .hero-text h1 {
        font-size: 62px
    }
}

.hero-text .lead {
    font-size: 18px
}

@media print,
screen and (min-width:64em) {
    .hero-text .lead {
        font-size: 27px
    }
}

.hero-text button {
    font-size: 18px
}

.hero-text button.hollow {
    color: #fff;
    border-color: #fff
}

#customTab a {
    padding: 0;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .container {
        padding: 0;
    }

    .btn {
        padding: 3px 6px;
        font-size: 12px;
    }

    .flex .panel-default {
        margin-right: 4px;
    }

    .flex .panel-default>.panel-heading {
        padding: 0;
    }

    .flex .panel-default>.panel-body .btn:last-child {
        margin-top: 4px;
    }
}

.btn-dark {
    background-color: #343a40;
    color: #fff;
}

.btn-dark:hover,
.btn.focus,
.btn:focus {
    color: #fff;
}

.btn.focus,
.btn:focus,
.btn:active,
.btn:hover,
.active>a .btn {
    color: #fff;
    background: darkblue;
}

.nav-tabs {
    border: none;
}

.hover_btn {
    background-image: url(water1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn:hover {
    background-image: url(water1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn1 {
    background-image: url(sediment1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn1:hover {
    background-image: url(sediment1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn2 {
    background-image: url(bio1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn2:hover {
    background-image: url(bio1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn3 {
    background-image: url(air.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn3:hover {
    background-image: url(air.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn4 {
    background-image: url(pic1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn4:hover {
    background-image: url(pic1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}
.menu1,
.menu2 {
    padding-inline-start: 0;
}

.menu1 li,
.menu2 li {
    list-style-type: none;
    margin-top: 10px;
}

.menu1 li {
    margin-right: 10px;
}
.menu2 li {
    margin-left: 10px;
}

#sediment_data{
    width:35%;
}
#bio_stuff_data{
    width:65%;
}
#water_data{ 
    width:40%;
}
#veggies_data{
    width:20%;
}
#air_data{
    width:40%
}


p.lead {
    font-weight: 400
}

.grid-x {
    display: flex;
    flex-flow: row wrap
}

.grid-x>.auto,
.grid-x>.shrink {
    width: auto
}

.grid-x>.small-1,
.grid-x>.small-2,
.grid-x>.small-3,
.grid-x>.small-4,
.grid-x>.small-5,
.grid-x>.small-6,
.grid-x>.small-7,
.grid-x>.small-8,
.grid-x>.small-9,
.grid-x>.small-10,
.grid-x>.small-11,
.grid-x>.small-12,
.grid-x>.small-full,
.grid-x>.small-shrink {
    flex-basis: auto
}

@media print,
screen and (min-width:40em) {

    .grid-x>.medium-1,
    .grid-x>.medium-2,
    .grid-x>.medium-3,
    .grid-x>.medium-4,
    .grid-x>.medium-5,
    .grid-x>.medium-6,
    .grid-x>.medium-7,
    .grid-x>.medium-8,
    .grid-x>.medium-9,
    .grid-x>.medium-10,
    .grid-x>.medium-11,
    .grid-x>.medium-12,
    .grid-x>.medium-full,
    .grid-x>.medium-shrink {
        flex-basis: auto
    }
}



.grid-x>.small-1,
.grid-x>.small-2,
.grid-x>.small-3,
.grid-x>.small-4,
.grid-x>.small-5,
.grid-x>.small-6,
.grid-x>.small-7,
.grid-x>.small-8,
.grid-x>.small-9,
.grid-x>.small-10,
.grid-x>.small-11,
.grid-x>.small-12 {
    flex: 0 0 auto
}

.grid-x>.small-1 {
    width: 8.33333%
}

.grid-x>.small-2 {
    width: 16.66667%
}

.grid-x>.small-3 {
    width: 25%
}

.grid-x>.small-4 {
    width: 33.33333%
}

.grid-x>.small-5 {
    width: 41.66667%
}

.grid-x>.small-6 {
    width: 50%
}

.grid-x>.small-7 {
    width: 58.33333%
}

.grid-x>.small-8 {
    width: 66.66667%
}

.grid-x>.small-9 {
    width: 75%
}

.grid-x>.small-10 {
    width: 83.33333%
}

.grid-x>.small-11 {
    width: 91.66667%
}

.grid-x>.small-12 {
    width: 100%
}

@media print,
screen and (min-width:40em) {
    .grid-x>.medium-auto {
        flex: 1 1 0px;
        width: auto
    }

    .grid-x>.medium-1,
    .grid-x>.medium-2,
    .grid-x>.medium-3,
    .grid-x>.medium-4,
    .grid-x>.medium-5,
    .grid-x>.medium-6,
    .grid-x>.medium-7,
    .grid-x>.medium-8,
    .grid-x>.medium-9,
    .grid-x>.medium-10,
    .grid-x>.medium-11,
    .grid-x>.medium-12,
    .grid-x>.medium-shrink {
        flex: 0 0 auto
    }

    .grid-x>.medium-shrink {
        width: auto
    }

    .grid-x>.medium-1 {
        width: 8.33333%
    }

    .grid-x>.medium-2 {
        width: 16.66667%
    }

    .grid-x>.medium-3 {
        width: 25%
    }

    .grid-x>.medium-4 {
        width: 33.33333%
    }

    .grid-x>.medium-5 {
        width: 41.66667%
    }

    .grid-x>.medium-6 {
        width: 50%
    }

    .grid-x>.medium-7 {
        width: 58.33333%
    }

    .grid-x>.medium-8 {
        width: 66.66667%
    }

    .grid-x>.medium-9 {
        width: 75%
    }

    .grid-x>.medium-10 {
        width: 83.33333%
    }

    .grid-x>.medium-11 {
        width: 91.66667%
    }

    .grid-x>.medium-12 {
        width: 100%
    }
}

.grid-padding-x {
    margin-right: -.625rem;
    margin-left: -.625rem;
    /*align-items: stretch*/
}

@media print,
screen and (min-width:40em) {
    .grid-padding-x {
        margin-right: -.9375rem;
        margin-left: -.9375rem;
    }
}

.footer-main {
    background-color: #d8d8d8;
    overflow: hidden;
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    z-index: 1000;
}

.footer-main-icons {
    text-align: center
}

.footer-main-nav {
    border-top: 1px solid #909090
}

@media print,
screen and (min-width:64em) {
    .footer-main-nav {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center
    }
}

@media screen and (max-width: 1024px) {
    .footer-main .nav-footer .menu {
        display: flex !important;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center
    }

    .footer-main {
        overflow: scroll;
    }
}

@media screen and (max-width: 600px) {
    .footer-main .nav-footer .menu {
        display: flex !important;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center
    }

    .footer-main {
        overflow: scroll;
    }
}
@media screen and (min-width:367px) and (max-width:867px) {
    body {
        overflow: auto;
    }
    .img-btn-navs {
        flex-direction: column;
    }
    .header-main .menu2,
    .header-main .menu1 {
        display:none;
    }
    .header-main .menu li:nth-child(1) {
        width: 35%;
    }
    .header-main .nav-header img {
        width: 85%;
    }
    #sediment_data,
    #bio_stuff_data,
    #water_data,
    #veggies_data,
    #air_data{
        width:100% !important;
    }
}

.footer-main .social-media {
    margin: 1.5rem 0
}

.footer-main .social-media a i {
    color: #2c2c2c;
    font-size: 38px
}

.footer-main .social-media a:hover,
.footer-main .social-media a:hover i {
    color: #005aa0
}

.footer-main .social-media a+a {
    margin-left: 3rem
}

.footer-main .language-accessibility,
.footer-main .language-switch,
.footer-main .nav-footer {
    line-height: 1;
    font-size: 14px;
    font-weight: 700
}

@media print,
screen and (min-width:64em) {

    .footer-main .language-accessibility,
    .footer-main .language-switch,
    .footer-main .nav-footer {
        float: left
    }
}

.footer-main .nav-footer .menu {
    display: block;
    font-size: 1.1em
}

@media print,
screen and (min-width:64em) {
    .footer-main .nav-footer .menu {
        display: flex
    }
}

.footer-main .nav-footer .menu a {
    color: #2c2c2c;
    font-weight: 400;
    padding: 10px
}

.footer-main .nav-footer .menu a:hover {
    color: #005aa0
}

@media print,
screen and (min-width:64em) {
    .footer-main .nav-footer .menu a {
        padding: 25px
    }
}

.footer-main .language-accessibility {
    margin-left: 5px
}

@media print,
screen and (min-width:64em) {
    .footer-main .language-accessibility {
        margin-left: 20px
    }
}

.footer-main .language-accessibility a {
    color: #2c2c2c;
    font-weight: 700;
    padding: 25px;
    display: inline-block;
    text-indent: 20px;
    background: url(/res/assets/leichte-sprache.png) 0 no-repeat
}

.footer-main .language-accessibility a:hover {
    color: #005aa0
}

.footer-main .language-switch {
    margin-left: 10px
}

@media print,
screen and (min-width:64em) {
    .footer-main .language-switch {
        margin-left: 25px
    }
}

.footer-main .language-switch a {
    color: #909090
}

.footer-main .language-switch a:hover {
    color: #005aa0
}

.footer-main .language-switch .active,
.footer-main .language-switch a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px
}

@media print,
screen and (min-width:64em) {

    .footer-main .language-switch .active,
    .footer-main .language-switch a {
        padding-top: 25px;
        padding-bottom: 25px
    }
}

.gridContent {
    background-color: #fff;
    margin: 0 0 5% 0 !important;
    min-height: 500px;
    height: auto !important;
    width: 100%;
}

/* full clearfix */
/* add to floating elements which shall clear floating after themselves */
* html .cf {
    height: 1%;
    /* IE5-6 */
}

*+html .cf {
    display: inline-block;
    /* IE7not8 */
}

.cf:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    /* FF, IE8, O, S, etc. */
}

video {
    max-width: 100%;
    height: auto;
}

.input-group ul.uib-datepicker-popup.dropdown-menu {
    left: inherit !important;
    right: 0px;
}

.moduleContent table tr th {
    background-color: #dfdeb7 !important;
    font-weight: normal !important;
}

.moduleContent table tr td {
    background-color: #f2f2e2 !important;
}

.moduleContent table tr td,
table tr th {
    text-align: left !important;
    padding: 7px 10px;
    border-width: 0 1px 1px 0 !important;
    border-style: solid !important;
    border-color: #fff !important;
}

.moduleContent span.input-group-btn .glyphicon.glyphicon-calendar {
    font-size: 20px;
}

@media screen and (max-width: 1024px) {
    div.bootbox.modal.fade.bootbox-confirm.in div.modal-dialog {
        position: relative !important;
        width: auto !important;
        margin: 10px !important;
    }

    .input-group ul.uib-datepicker-popup.dropdown-menu {
        left: 0px !important;
        right: 0px;
        width: max-content;
    }

    .moduleContent ul.uib-datepicker-popup {
        padding: 3px !important;
    }

}

Ameer · Accepted Answer

All you need to do is add the CSS inside the style tag into the bottom of your CSS file. It's important that the CSS inside the style tag goes to the bottom because this will allow the CSS that you wrote, to overwrite what was written earlier.

How to merge these two css files so the styling works perfectly?

Answers (1)

Related Questions