How to define external css file in a specific <div> tag

Question

I have a different kinds of css file in my project. I want to define only one css the name of which is register.css for a specific <div> named for registerForum.

I could define scss file in the main.css as link in the import annotation and define it via extend annotation in the registerForum defined in main.css. I could use this code snippet shown below but it didn't work.

main.css

@import "./css/bootstrap.min3.3.0.scss" 

#registerForum {
  @extend .reg-forum;
}

bootstrap.min3.3.0.scss

 .reg-forum {a { background-color:transparent;

    }

    a:active, a:hover {
        outline: 0;
    }

    abbr[title] {
        border-bottom: 1px dotted;
    }

    b, strong {
        font-weight: bold;
    }

    dfn {
        font-style: italic;
    }

    h1 {
        margin: .67em 0;
        font-size: 2em;
    }

    mark {
        color: #000;
        background: #ff0;
    }

    small {
        font-size: 80%;
    }

    sub, sup {
        position: relative;
        font-size: 75%;
        line-height: 0;
        vertical-align: baseline;
    }

    h1, .h1, h2, .h2, h3, .h3 {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small,
        .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small {
        font-size: 65%;
    }

    h4, .h4, h5, .h5, h6, .h6 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small,
        .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small {
        font-size: 75%;
    }

    h1, .h1 {
        font-size: 36px;
    }

    h2, .h2 {
        font-size: 30px;
    }

    h3, .h3 {
        font-size: 24px;
    }

    @media ( min-width : 768px) {
        .dl-horizontal dt {
            float: left;
            width: 160px;
            overflow: hidden;
            clear: left;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .dl-horizontal dd {
            margin-left: 180px;
        }
    }

    abbr[title], abbr[data-original-title] {
        cursor: help;
        border-bottom: 1px dotted #777;
    }

    .initialism {
        font-size: 90%;
        text-transform: uppercase;
    }

    @media ( min-width : 992px) and (max-width: 1199px) {
        .hidden-md {
            display: none !important;
        }
    }

    @media ( min-width : 1200px) {
        .hidden-lg {
            display: none !important;
        }
    }

    .visible-print {
        display: none !important;
    }

    @media print {
        .visible-print {
            display: block !important;
        }
        table.visible-print {
            display: table;
        }
        tr.visible-print {
            display: table-row !important;
        }
        th.visible-print, td.visible-print {
            display: table-cell !important;
        }
    }

    .visible-print-block {
        display: none !important;
    }

    @media print {
        .visible-print-block {
            display: block !important;
        }
    }

    .visible-print-inline {
        display: none !important;
    }

    @media print {
        .visible-print-inline {
            display: inline !important;
        }
    }

    .visible-print-inline-block {
        display: none !important;
    }

    @media print {
        .visible-print-inline-block {
            display: inline-block !important;
        }
    }

    @media print {
        .hidden-print {
            display: none !important;
        }
    }
}

Answer 1

OK, so I updated my answer according to your question changes.

Check this example. It shows how you can extend a class from an imported file and then use the new class/id in your project. I used your .reg-forum class but it doesn't do much on this particular example. There is a separate class called .red-big-text and as you can see it works smoothly.

You could also use .reg-forum class directly on your div, without extending it on another id and then use the id, but that is up to you.

Answer 2

I think with sass/scss it is possible instead of @include "register.css"; it should be @import yourcssname, then extend the class properties @extend .propertyclassname. @include is for calling mixins. Please check below link

SASS Basics